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

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

Как создать пунктирную или сплошную обводку в Figma? Инструкция для начинающих пользователей программы.

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

Чтобы сделать обводку в Figma нужно:

  1. Выбрать какой-либо элемент. Это может быть фигура, текст, фрейм или что-то ещё.
  2. В правой панели напротив надписи «Stroke» нажмите иконку плюсика.
Как сделать обводку в Фигме.
  1. После этого вы сможете изменять цвет обводки, задавать толщину, делать обводку пунктиром.

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

Пунктирная обводка в фигме. Как сделать
Пунктирная обводка в фигме

Пунктирную обводку можно создать после добавления обычной. Нажмите внизу надписи «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


Изменение прозрачности обводки в Figma

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

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

Удаление обводки в фигме
Удаление обводки в фигме

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

6. Толщина.

Толщина обводки в фигме


Толщина обводки в фигме

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

7. Выбор типа обводки

Выбор типа обводки: center, inside, outside
Выбор типа обводки: center, inside, outside

Можно сделать обводку внутри (Inside), по центру (Center), снаружи (Outside).

Хотите лучше освоить программу Figma? Получите бонусный урок в подарок + материалы для создания дизайна сайта (Landing Page) по этой ссылке.

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

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