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

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

Что такое окантовка и зачем она нужна в дизайне

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

В Figma окантовка реализована через параметр Stroke, доступный для всех векторных объектов, прямоугольников, эллипсов, текстовых блоков и групп. Однако, в отличие от некоторых графических редакторов, в Figma нельзя напрямую задать две обводки для одного слоя. Это требует дополнительных решений, которые мы рассмотрим далее.

Окантовка играет важную роль не только в эстетике, но и в функциональности. Например, при создании дизайн-системы обводка часто стандартизируется: 1px для обычного состояния, 2px — для активного. Это позволяет команде сохранять консистентность между экранами и упрощает передачу данных разработчикам.

Как добавить окантовку в Figma: пошаговая инструкция

Добавление окантовки — базовый навык, который осваивают на первых этапах работы с Figma. Процесс прост и интуитивно понятен, но требует внимания к деталям.

1. Выберите объект на холсте (например, прямоугольник или текст).
2. В правой панели свойств найдите секцию «Stroke» (Обводка), расположенную ниже заливки (Fill).
3. Нажмите на значок цвета рядом с полем толщины обводки, чтобы выбрать цвет из палитры.
4. Укажите толщину обводки в пикселях — например, 1, 2 или 4.
5. При необходимости измените положение обводки: внутри, по центру или снаружи фигуры.

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

Для текстовых элементов обводка работает аналогично, но есть нюанс: если шрифт имеет прозрачную заливку, а обводка включена, получится эффект «выгравированного» текста. Это популярный приём в заголовках и брендинге.

Когда использовать обводку?

• При создании интерактивных элементов: кнопок, чекбоксов, полей ввода.
• Для визуального разделения блоков на макете.
• В иконках, где требуется контур без заливки.
• Для выделения активного состояния элемента (например, при hover или focus).

Настройка параметров обводки: цвет, толщина, тип линии

Figma предоставляет гибкие возможности для кастомизации обводки. Помимо базовых настроек, можно изменять стиль линии, использовать градиенты и управлять её положением.

Цвет обводки задаётся через тот же интерфейс, что и заливка: можно выбрать из палитры, ввести HEX-код, использовать eyedropper (пипетку) или привязать к стилю из библиотеки. Это особенно удобно при работе с дизайн-системами, где цвета стандартизированы.

Толщина обводки измеряется в пикселях и может быть дробной (например, 0.5px). Однако в практике чаще используют целые значения — 1, 2, 3 px — чтобы избежать размытости на экранах с низким DPI.

Типы линий обводки

Figma поддерживает три типа штриховки:

• Сплошная линия (Solid) — наиболее распространённый вариант.
• Штриховая (Dashed) — используется для временных элементов, например, зон дропа при перетаскивании.
• Пунктирная (Dotted) — редко применяется в UI, но полезна в диаграммах и схемах.

Особенности работы с окантовкой: положение, углы, масштабирование

Одна из ключевых особенностей обводки в Figma — возможность выбора её положения относительно контура фигуры. Этот параметр влияет на то, как обводка взаимодействует с другими элементами и как она масштабируется.

Доступны три варианта:

• Outside — обводка выходит за пределы фигуры.
• Center — обводка делит контур пополам (половина внутри, половина снаружи).
• Inside — вся обводка находится внутри границ фигуры.

Выбор зависит от задачи. Например, при создании кнопки с внутренней тенью лучше использовать Inside, чтобы обводка не выходила за пределы и не нарушала выравнивание. А для акцентной рамки вокруг карточки подойдёт Outside.

Как обводка ведёт себя при масштабировании

При масштабировании объекта толщина обводки остаётся постоянной в пикселях. Это означает, что при увеличении фигуры обводка не становится толще — она сохраняет заданное значение. Это удобно, но требует контроля: слишком толстая обводка на маленьком объекте может его «перекрыть».

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

Многократная и изменяемая обводка: как обойти ограничения Figma

Figma не поддерживает множественную обводку на одном слое — это одно из самых частых ограничений, с которым сталкиваются дизайнеры. Но есть несколько рабочих способов добавить несколько контуров.

Первый метод — дублирование фигуры. Создайте копию исходного объекта, уберите заливку, установите другую толщину и цвет обводки, а затем немного сдвиньте её или измените положение (Inside/Outside). Этот способ даёт полный контроль, но увеличивает количество слоёв.

Второй способ — использование плагинов. Например, плагин Multi-stroke позволяет добавить до 10 обводок с разными настройками. Он интегрируется в панель свойств и работает как расширенный Stroke.

Третий подход — применение эффектов. Хотя Figma не позволяет использовать обводку как эффект, можно имитировать второй контур с помощью тени (Inner Shadow). Настройте тень так, чтобы она повторяла форму: X=0, Y=0, Blur=0, Spread=1–2px. Это создаёт визуальный эффект внутренней обводки.

Когда нужна множественная обводка?

• Дизайн кнопок с двойной рамкой (например, белая + синяя).
• Создание эффекта «неоновой подсветки».
• Выделение элементов в dark mode с контрастной внутренней границей.
• Имитация фокус-состояния с внешним и внутренним контуром.

Практические советы и типичные ошибки

Работа с обводкой кажется простой, но даже опытные дизайнеры допускают ошибки, которые портят внешний вид макета и вызывают вопросы у разработчиков.

Одна из самых распространённых ошибок — смешение положений обводки. Например, у одной кнопки обводка Outside, у другой — Inside. Это нарушает визуальную согласованность. Решение — создать компоненты с едиными настройками.

Вторая ошибка — игнорирование масштаба. Обводка в 3px может отлично смотреться на десктопе, но быть слишком грубой на мобильном устройстве. Всегда проверяйте макет в реалистичных размерах.

Третья проблема — использование обводки на тексте с низкой читаемостью. Если шрифт тонкий, а обводка толстая, буквы могут «слипнуться». Оптимально: толщина обводки ≤ 10% от высоты шрифта.

Чек-лист перед презентацией макета

• Проверьте, везде ли обводка имеет одинаковое положение (Inside/Outside)?
• Соответствуют ли цвета обводки библиотеке стилей?
• Не выходит ли обводка за пределы родительских фреймов?
• Правильно ли отображается обводка в режиме Prototype?
• Подписаны ли компоненты с обводкой для разработчиков?

Экспертное мнение

Никита также отмечает, что в современных дизайн-системах всё чаще отказываются от обводки в пользу теней и отступов. «Flat design ушёл, но минимализм остаётся. Сегодня модно использовать едва заметные границы — 0.5px или полупрозрачные линии. Это мягче и современнее.»

Вопросы и ответы

Заключение

Окантовка в Figma — это мощный, но простой инструмент, который помогает создавать четкие, понятные и профессиональные интерфейсы. Понимание её параметров, особенностей поведения и ограничений позволяет дизайнеру эффективно использовать обводку в повседневной работе.

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

• Обводка в Figma настраивается через панель Stroke: цвет, толщина, тип линии и положение.
• Положение обводки (Inside/Outside/Center) влияет на выравнивание и визуальное восприятие.
• Множественная обводка реализуется через дублирование слоёв или плагины.
• Следите за читаемостью и масштабом — толстая обводка может испортить мелкие элементы.
• Обводка — часть языка интерфейса, поэтому должна быть осмысленной и последовательной.