«Как сделать в Фигме…?»: отвечаем на популярные вопросы пользователей

У нас уже есть подобная статья на портале, где мы отвечали на популярные запросы, связанные с использованием Фотошопа. В этой публикации поговорим о Фигме.

Я ввела в поисковики Гугл и Яндекс запрос: «Как сделать в Фигме», чтобы понять, какие вопросы интересуют пользователей. Вот, что у меня получилось:

Я взяла из результатов выдачи совпадающие запросы в обеих поисковых системах и несколько рандомно (на свой вкус). Вот, что у меня получилось:

• как сделать в Фигме текст полукругом (по кругу);
• как сделать в Фигме пунктирную линию (пунктир);
• как сделать в Фигме кнопку;
• как сделать в Фигме градиент;
• как сделать в Фигме сетку;
• как сделать в Фигме маску;
• как сделать в Фигме тень.

С содержанием публикации определились. Поехали!

Как сделать в Фигме текст полукругом (по кругу)?

Для расположения текстового слоя по кругу в Фигме понадобится специальный плагин arc.

Где искать плагины и как их устанавливать, вы можете прочитать здесь.

1. Создайте текстовый слой или выделите необходимый.

2. Запустите плагин arc. Для этого нажмите меню бургер в верхнем левом углу — Plugins — arc.

3. Откроется дополнительное окошко (это и есть плагин), в котором вы увидите ползунок. Передвигайте его вверх-вниз пока не добьётесь нужного эффекта.

4. Когда найдёте нужный вариант, нажмите Apply. Плагин создаст новый слой с текстом, расположенным по кругу или в форме полукруга (в зависимости от ваших настроек).

Как сделать в Фигме пунктирную линию (пунктир)?

Рассмотрим вопрос, как сделать в Фигме пунктирную линию, на примере фигуры — прямоугольник. Для других фигур (треугольник, круг, линия) алгоритм создания пунктира будет тем же.

1. Выделите слой с нужной фигурой, границы которой хотите сделать пунктиром.
2. Создайте обводку, нажав «+» в разделе Stroke бокового меню.

3. Нажмите на значок «…». Откроется дополнительное меню.
4. В строке Dashes введите через запятую два цифровых значения, где первое будет означать длину чёрточек, а второе — длину пробелов между ними в px.

Как сделать в Фигме кнопку?

На самом деле вопрос, как сделать в Фигме кнопку, достаточно широк. Кнопки бывают разные. Однако, я думаю, на примере одной можно показать принцип их создания.

1. Возьмите инструмент для рисования прямоугольника и нарисуйте форму своей кнопке. Инструмент называется Rectangle (горячая клавиша — R). Он находится в верхнем меню.

2. Если вам нужны скругления на углах кнопки, обратитесь к боковому меню слева. В ячейке Corner radius (подсвечена на скриншоте) установите необходимый радиус скругления. Если кликните по иконке справа, откроется дополнительное меню, где можно проработать скругление каждого отдельного угла.

3. Теперь давайте покрасим нашу кнопку. Для этого нажмите на строчку в разделе Fill и выберите нужный цвет.

Также вы можете сделать свою кнопку прозрачной (поставьте значение 0 в поле с процентами) или бесцветной (удалите слой с цветом, нажав на «—»).

4. Напишем на кнопке целевое действие. Возьмите инструмент текст, который находится в верхнем меню под иконкой T. Нажмите на фрейм (рабочее пространство), введите необходимый текст и задайте ему нужные параметры (шрифт, размер и т.д.). Это делается в боковом меню в разделе Text. Также вы можете настроить цвет текста в разделе Fill.
5. Расположите текст по середине кнопки. Это можно сделать с помощью мыши (Фигма подскажет, где центр, с помощью направляющих).

Другой вариант — нажмите на слой с текстом, зажмите shift и нажмите на свою кнопку. Далее воспользуйтесь инструментами выравнивания в самом верхнем разделе бокового меню.

6. Закончить нашу кнопку можно, добавив иконку. Вы можете нарисовать её самостоятельно, загрузить с компьютера (к примеру, из Иллюстратора в формате svg) или воспользоваться плагином с иконками (например, Iconify).

Подробнее о работе с плагинами вы можете узнать здесь.

Также я добавила к своей кнопке тень. Как это сделать, смотрите ниже.

Как сделать в Фигме градиент?

Для создания градиента в Фигме нужно поработать с разделом Fill бокового меню.

1. Выделите объект, который вы хотите залить с помощью градиента.
2. Добавьте на него цвет (не обязательно, можно работать с градиентом и на первом слое).

3. Добавьте ещё один слой с помощью «+» в разделе Fill.
4. Обратите внимание на полоску с квадратиками. Это ваш инструмент для создания градиента. Вы можете двигать квадратики, добавлять новые, как вам угодно.

Также на изображении вы увидите соответствующий инструмент для управления градиентом и создания необходимого наложения на вашу фигуру.

Вы можете поменять вид градиента, нажав на стрелочку выпадающего меню рядом со строкой Linear.

Виды доступных градиентов в Фигме:

• linear — линейный;
• radial — радиальный (по окружности);
• angular — угловой;
• diamond — по форме бриллианта.

Как сделать в Фигме сетку?

Сетка в Фигме — это вспомогательный элемент, который помогает вам структурировать свой макет и выстраивать стройную композицию. В Фигме вы можете создать три вида сетки:

• columns (колонки);
• rows (строки);
• grid (клеточка/сетка).

Для создания сетки нажмите «+» в разделе Layout Grid. По умолчанию создастся сетка Grid c квадратиками 10х10 px.

Grid

Кликнув по строке сетки, вы сможете настроить величину клетки, цвет и прозрачность.

Кликнув по типу сетки, вы сможете выбрать другой — колонки или строки.

Columns

В колонках настроек куда больше. Здесь вы можете менять:

• количество колонок (count);
• расположение их на макете: растянутое, смещение к центру или к краям (type);
• ширину колонок (width);
• цвет и прозрачность (color);
• отступы между колонками (gutter);
• внешние отступы (margin).

Rows

Здесь почти те же настройки, что и у колонок, только:

• вместо ширины высота строк (height);
• внешние отступы (offset).

Можно сделать несколько слоёв сетки из разных видов и с разными настройками и создать свою суперсетку для уникальной композиции.

Ещё раз! Сетка — вспомогательный элемент для выстраивания композиции. Она не является частью макета, поэтому её можно в любое время выключить. Для этого нажмите сочетание клавиш shift + alt + 4. Включается сетка этой же командой.

Как сделать в Фигме тень?

Теперь, как и обещала, рассказываю как сделать тень в Фигме. Всё довольно просто:

• нажмите на слой, для которого хотите создать тень;
• нажмите на «+» в разделе Effects в боковом меню;
• автоматически включится слой с тенью Drop shaddow, кликните по нему;
• в дополнительном меню вы увидите настройки тени: размытость (blur), протяжность (spread), смещение по оси X и Y, а также прозрачность и цвет.

Как сделать в Фигме маску?

Маска в Фигме используется для придания растровым изображениям нужной формы с помощью векторных фигур. Чтобы сделать маску в Фигме, понадобится пара кликов.

1. Положите свою картинку поверх векторного изображения таким образом, каким вы хотите чтобы создалась маска.

2. Выделите оба объекта с помощью мыши и клавиши shift и тапните по рабочему пространству правой кнопкой мыши.
3. В открывшемся окне выберите команду Use as mask.

В результате ваше изображение впишется в ту область векторной фигуры, в которую вы его поместили.

На этом наш мини-обзор Фигмы подошёл к концу. Оказалось, что пользователей интернета интересуют совсем несложные вопросы. Да и вообще Фигма — максимально простой и понятный инструмент. Единственная сложность только в том, что весь интерфейс на английском. Но к этому быстро привыкаешь.

Надеюсь вам была полезна статья. Если остались вопросы, не стесняйтесь задавать их в комментариях 🙂