Инструкция как сделать сплошную или пунктирную обводку вокруг фигуры, фрейма, текста или любого другого объекта в Фигме.
Чтобы сделать обводку в Figma нужно:
- Выбрать какой-либо элемент. Это может быть фигура, текст, фрейм или что-то ещё.
- В правой панели напротив надписи «Stroke» нажмите иконку плюсика.

- После этого вы сможете изменять цвет обводки, задавать толщину, делать обводку пунктиром.
Как сделать пунктирную обводку в Фигме?

Пунктирную обводку можно создать после добавления обычной. Нажмите внизу надписи «Stroke» (в правой панели) на иконку с тремя точками. Перед вами появится окно с заголовком «Advanced stroke». Это расширенные настройки обводки. Измените значение параметра «Dashes». Например можно поставить 50, 40. Первая цифра (50) — это размер пунктирных линий. Вторая цифра (40) — размер разрыва между пунктирными линиями.
Параметры обводки в Figma
Рассмотрим основные параметры обводки, которые вы можете изменять.
Такие как: цвет, прозрачность, видимость, удаление, толщина обводки, тип, преобразование сплошной линии обводки в пунктирную.
1. Цвет

Чтобы изменить цвет обводки нажмите на цвет внизу надписи «Stroke» или введите код какого-либо цвета (например FF2A54).
Также вы можете изменять тип обводки. Если откроете панель цвета, то сверху по умолчанию стоит надпись «Solid» — это сплошная обводка. В списке есть другие типы обводки.
Linear — линейный градиент.
Radial — радиальный градиент.
Angular — угловой градиент.
Diamond — градиент в виде кристала.
Image — изображение.
2. Добавление нового стиля цвета

Напротив надписи «Stroke» есть иконка с 4 точками в виде квадрата. Если на неё нажать, то появится возможность выбирать цвет из цветовой палитры. Если вы хотите создать новый цвет в вашей палитре и использовать его повторно, то нажмите на плюсик (как показано на картинке выше).

Дайте имя новому цвету и нажмите на кнопку «Create style». После этого вы сможете исползовать этот цвет повторно и он появится в панели справа.
3.Видимость

Можно временно отключить видимость обводки. Для этого нажмите иконку глаза с правой стороны.
4. Как сделать обводку в фигме более прозрачной

Изменение прозрачности обводки в Figma
Чтобы изменить прозрачность обводки, измените цифры с процентами. Изначально по умолчанию стоит 100%. Если поставить 50%, то прозрачность измениться.
5. Как удалить обводку в фигме

Чтобы удалить обводку в фигме, нажмите на иконку минуса.
6. Толщина.

Толщина обводки в фигме
Изменение толщины обводки интуитивно понятно. Для того, чтобы это сделать нужно изменить цифру под цветом, напротив иконки с 3 линиями разной толщины. Изначально создается обводка толщиной 1 px.
7. Выбор типа обводки

Можно сделать обводку внутри (Inside), по центру (Center), снаружи (Outside).
Хотите лучше освоить программу Figma? Получите бонусный урок в подарок + материалы для создания дизайна сайта (Landing Page) по этой ссылке.
Автор статьи: Владимир Чернышов.

P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).