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

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

Для этой цели в фигме предусмотрены два специальных инструмента, которые впрочем являются разновидностью одного и того же. Выбрать их можно на панели инструментов или с помощью горячих главиш L (Line, линия) или Shift+L (Стрелка):

Вне зависимости от того какой инструмент вы выбрали изначально, после его применения на панели справа в разделе Stroke (обводка) появится возможность изменить цвет, толщину и другие параметры стрелки или линии. Там же можно выбрать вид стрелок или их отсутствие на концах линии.

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

Если нажать на иконку дополнительных настроек возле толщины линии, появится всплывающее окно. В графе Stroke style можно выбрать значение Dash — это и позволит сделать линию пунктирной. Значение Dash отвечает за длину штриха, Gap — за отступ между штрихами.

Как в фигме изогнуть линию или стрелку и сделать её кривой

Для начала нужно двойным щелчком по линии или стрелке перейти в режим редактирования вектора. Затем — выбрать инструмент Bend tool и уже с его помощью изонуть линию нужным нам образом:

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

Здесь инструмент Линия будет для нас менее удобен. Вместо него нужно будет использовать инструмент Перо, также находящийся на нижней панели фигмы. Еще его можно вызвать с помощью горячей клавиши P (латинская буква, от слова Pen).

Инструмент Перо часто дается новичкам сложно, поэтому для лучшего понимания этого раздела сегодняшнего урока я рекомендую посмотреть его видео-версию, там всё показано максимально подробно.

Чтобы сделать волнистую линию, выберите инструмент Перо, затем с зажатой клавишей Shift нарисуйте зигзагообразную линию (следите, чтобы углы зигзага находились на одном уровне — фигма будет показывать их с помощью красных линий). Затем на панели Appearance задайте большое скругление углов:

В принципе, с помощью инструмента Перо можно сделать линию абсолютно любой формы — плавной или резкой, ровной или кривой, угловатой или сглаженной. И конечно же каждую такую линию можно сделать пунктирной, поменять её толщину или цвет.

Как сделать красивую обводку, рамку или контур для любой фигуры или текста

По сути, любая рамка или обводка — это такая же линия, как мы рассматривали выше. Только замкнутая. Технически она делается точно так же, как и обычная линия — с помощью настроек на панели Stroke. Не важно, с чем мы имеем дело — с прямоугольником, сложной фигурой или даже текстом — ко всем этим векторным объектам мы можем добавить Stroke и настроить нужные нам параметры — пунктир, толщину, цвет, скругления и так далее. Причем, обводка может применяться как одновременно с заливкой (Fill), так и сама по себе (во втором случае заливка фигуры будет прозрачной).

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

Вот несколько примеров, каких интересных эффектов можно добиться с помощью обводки в фигме:

Плагины с линиями и стрелками в фигма комьюнити

Помимо того, что линии и стрелки можно самостоятельно создавать в фигме, вы можете использовать и готовые варианты из фигма комьюнити. Поищите там соответствующие ресурсы и плагины по запросам типа Lines и Arrows — вполне возможно вы найдете что-то подходящее для своего проекта, например объемные 3д или абстрактные линии. Вот несколько примеров, что нашел в фигма комьюнити я: