Линии в фигма
Уроки

Линии в фигме: как сделать пунктирные, волнистые и кривые

В этом уроке вы узнаете как делать разные линии в фигме. В результате вы научитесь делать пунктирные, волнистые, изогнутые, ломанные линии. Это простое руководство для начинающих пользователей программы Figma.

Как сделать линию в фигме

Создание линии в фигме

Чтобы сделать линию в Figma, в верхней панели (где расположены все инструменты) нажмите на стрелочку с векторными фигурами «Shape tools». Затем нарисуйте линию нужной длинны зажав левую клавишу мыши. Также для активации инструмента, можете нажать на горячую клавишу «L» на клавиатуре.

Изменение толщины и цвета линий

Изменение цвета и размера линий в фигме

Цвет и толщину линий вы можете изменять стандартным образом используя правую панель и разделы «Color» и «Stroke».

Как сделать пунктирную линию в фигма

Создание пунктирной линии в фигме

Чтобы в фигме сделать пунктирную линию, выделите созданную ранее линию. В правой панели, где написано «Stroke», нужно нажать на 3 точки. В выпадающем окне измените значение «Dashes». Можно указать 2 цифры (например 10, 20). Первая цифра — длинна пунктирной линии. Вторая цифра — длинна разрыва между линиями.

Как закруглить линию в фигме

Как закруглить линию в фигме

Чтобы закруглить линию в фигме выберите нужную линию. В правой панели напротив надписи «Stroke» нажмите на пиктограмму с тремя точками. Затем вместо значения «None», выберите пункт «Round».

Как у линии в фигме сделать стрелки на концах

Создание стрелки из линии в фигме. Стрелка в виде линии.
Стрелка в виде треугольника в фигме из линии

Чтобы превратить линию в стрелку, выделите необходимую линию. В панели справа, где надпись «Stroke», нажмите 3 точки. Вместо значения «None» поставьте «Line Arrow» —стрелка в виде линии или «Triangle Arrow» — линия в виде треугольника.

Стрелка с одним концом в фигме

Если хотите сделать стрелку у линии с одной стороны, выберите линию и нажмите на клавишу Enter. Затем выделите точку с какого-то конца, нажав левую клавишу мыши. Нажмите на иконку с тремя точками напротив надписи «Stroke» в правой панели. С одной стороны поставьте значение «None», а с другой стороны поставьте «Line arrow» или «Triangle arrow».

Как сделать волнистые линии в фигме (изогнутые, кривые)

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

Создание волнистой линии в фигме

Выделите линию и нажмите сверху на иконку «Edit object» или на клавишу Enter.

Точки на линии, для волнистой линии

Поставьте новую точку по центру. Между отрезками в этой точке, поставьте ещё несколько. Например на скриншоте выше я создал 7 точек.

Выбор точек на линии

Зажмите клавишу Shift и выделите левой клавишей мыши точки, как показано на скриншоте выше. Нужно выбирать точки через одну.

Ломанная линия в фигме

Зажмите клавишу Shift, затем нажимайте на стрелку вверх или вниз на клавиатуре. Точки будут подниматься на 10 px, если будет зажата клавиша Shift и на 1 px без её зажатия. В итоге получается ломанная линия.

Линия волной в фигме

Чтобы задать скругление и сделать линию в форме волны, выберите её и в правой панели задайте скругление.

Создание ломанной линии с помощью пера

Аналогичную волнистую линию вы можете нарисовать, с помощью пера. Прежде всего активируйте инструмент «Pen Tool», зажмите клавишу Shift и поведите в сторону. Будет создаваться линии под углом 45 градусов. Поставьте нужное количество точек для вашей волнистой линии и при необходимости сделайте скругление.

Заключение

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

P.S. Переходите по этой ссылке и получите 24 раздела для создания дизайна сайтов в Figma.

Автор статьи: Владимир Чернышов

Дизайн генератор — комплект figma
Теги