Как делать обводку в фигме
Обводка - один из ключевых инструментов Figma для создания аккуратных интерфейсов. Вот подробное руководство по ее созданию и настройке.
Базовое добавление обводки
Обводка - это визуальная рамка, которая проходит по контуру объекта. Она позволяет отделить элемент от фона или других компонентов, добавляя акцент и улучшая визуальное восприятие. Добавить обводку можно:
Через панель Design (справа)
- Выберите объект (фигуру, текст, frame).
- В правой панели найдите раздел Stroke.
- Нажмите на значок «+» рядом со словом Stroke.
- Обводка появится с настройками по умолчанию.
Быстрая клавиша
- Выделите объект и нажмите Ctrl+/ (Cmd+/ на Mac).
- После этого обводка появится на объекте с параметрами по умолчанию. Обычно это черная сплошная линия толщиной 1px, которую вы сможете сразу же настроить под свои задачи.
Настройки обводки
После добавления обводки вы увидите основные параметры для её настройки. Ключевыми параметрами являются:
Толщина (Weight)
- Числовое поле справа от цвета обводки.
- Можно вводить значения вручную или использовать ползунок.
- Диапазон: от 0 до 200px.
Тип обводки
- Solid (сплошная).
- Dashed (пунктирная).
- Dotted (точечная).
- Dash custom - настраиваемая пунктирная.
Положение обводки
- Inside - внутри контура.
- Center - по центру края.
- Outside - снаружи контура.
В отличие от внутренней обводки, внешняя не «съедает» содержимое объекта. Такой подход часто используют в интерфейсах, где важно сохранить точные размеры элемента. Сравним типы позиционирования обводки в таблице:
|
Параметр |
Inside (Внутри) |
Center (По центру) |
Outside (Снаружи) |
|---|---|---|---|
|
Влияние на размер |
Не меняет размер объекта |
Визуально увеличивает объект |
Значительно увеличивает габариты |
|
Пример для квадрата 100×100px с обводкой 10px |
Занимает 100×100px |
Визуально 110×110px |
Занимает 120×120px |
|
Лучшее применение |
Точные размеры элементов |
Плавные переходы, иконки |
Кнопки, выделенные элементы |
|
Риски |
"Украшает" контент |
Может нарушить выравнивание |
Может обрезаться в рамке |
Эта таблица поможет быстро выбрать подходящий тип обводки для конкретной задачи, учитывая особенности каждого варианта позиционирования. Рекомендуется всегда проверять итоговые размеры элемента после применения обводки, особенно при работе с точными макетами и компонентами интерфейса.
Расширенные настройки
Помимо базовых параметров, Figma предлагает тонкую настройку обводки для сложных задач. Режим Custom Dash позволяет создавать уникальные пунктирные паттерны, контролируя длину каждого штриха и промежутка.
Настройки концов линий (End Caps) определяют, как будут выглядеть окончания открытых контуров - скругленно, прямо или с удлинением. Параметр Stroke Joins отвечает за оформление углов, предлагая выбор между острыми, скругленными и срезанными стыками.
Для точного контроля острых углов используется Miter Limit, который определяет максимально допустимое удлинение угла перед тем, как он автоматически превратится в скос. Эти инструменты особенно ценны при работе с иконками и сложными векторными формами.
Для пунктирной обводки:
- Dash - длина штриха.
- Gap - расстояние между штрихами.
Углы и концы:
- Miter (остро).
- Bevel (срез).
- Round (скругленно).
End caps - как заканчиваются линии:
- Flat.
- Round.
- Square.
Советы по созданию и настройке обводки в Figma
Множественные обводки
- Нажимайте «+» в разделе Stroke несколько раз.
- Каждая обводка накладывается поверх предыдущей.
- Полезно для сложных визуальных эффектов.
Обводка для текста
- Работает так же, как для фигур.
- Можно создавать интересные типографические эффекты.
Использование переменных
Если у вас Design System, привязывайте цвет обводки к цветовым переменным. Это обеспечивает согласованность интерфейса и значительно ускоряет работу. При изменении переменной во всей библиотеке все связанные обводки автоматически обновятся.
Такой подход особенно важен в больших проектах с множеством компонентов.
Практический пример: Создание кнопки с двойной обводкой:
- Создайте прямоугольник.
- Добавьте первую обводку: 2px, Outside, цвет #000.
- Добавьте вторую обводку: 6px, Outside, цвет прозрачный.
- Настройте отступ между обводками с помощью положения.
Частые проблемы и решения
Когда мы разобрали все возможности обводок, стоит обратить внимание на типичные сложности. Вот список распространенных проблем и проверенных методов их устранения.
- Углы выглядят неровно: Измените Stroke Joins на Round.
- Пунктирная линия не настраивается: Используйте Dash custom и настройте значения Dash и Gap.
- Если обводка не видна:
- Проверьте положение (Outside может быть за пределами frame).
- Убедитесь, что толщина больше 0.
- Проверьте, что цвет не совпадает с фоном.
Вывод
Освоение работы с обводками - ключевой навык для эффективного дизайна в Figma. От базового контура до сложных многоуровневых эффектов - эти инструменты открывают широкие возможности для визуального оформления. Используйте обводки, комбинируйте настройки и интегрируйте их в свою дизайн-систему для создания профессиональных интерфейсов.