Как сделать обводку в Фигме. Сплошную или пунктирную. Инструкция.

Инструкция как сделать сплошную или пунктирную обводку вокруг фигуры, фрейма, текста или любого другого объекта в Фигме.

Получить бесплатно 24 раздела landing page для figma

Чтобы сделать обводку в 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. Как сделать обводку в фигме более прозрачной

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

5. Как удалить обводку в фигме

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

6. Толщина.

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