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

В Figma обводка на изображении создаётся через настройки Stroke (обводки) в правой панели свойств. Достаточно выделить фигуру или фрейм с изображением, выбрать тип, цвет и толщину обводки — и она будет применена по периметру.

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

Зачем нужна обводка на изображении

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

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

Представьте, что вы проектируете профиль пользователя. Фотография загружена с прозрачным фоном, а общий интерфейс тоже светлый. Без обводки аватар практически сливается с фоном. Простая 1–2 пиксельная рамка решает проблему за секунды.

Как сделать обводку с помощью фрейма

Самый простой и универсальный способ — поместить изображение внутрь фрейма и добавить обводку к самому фрейму. Этот метод работает в 95% случаев и рекомендуется для повседневного использования.

1. Импортируйте изображение в Figma с помощью команды File → Place or Replace Image (Ctrl+Alt+K / Cmd+Option+K).
2. Создайте фрейм вокруг изображения (выделите его и нажмите Ctrl+Alt+G / Cmd+Option+G) или вручную нарисуйте фрейм нужного размера.
3. Перетащите изображение внутрь фрейма. Оно должно заполнить фрейм полностью.
4. Выделите фрейм. В правой панели свойств найдите блок «Stroke».
5. Выберите цвет обводки с помощью пипетки или задайте HEX/RGB значение.
6. Установите толщину обводки (например, 2 px). При необходимости измените её положение: Inside, Center, Outside.

Если вы используете автолейаут (Auto Layout), важно понимать, как обводка влияет на размеры. По умолчанию обводка рисуется по центру границы, и половина её толщины может выходить за пределы фрейма. Чтобы этого избежать, установите положение обводки на «Inside» — тогда вся линия будет находиться внутри фрейма.

Настройка положения обводки

В Figma есть три варианта расположения обводки:

• Outside — обводка находится полностью за пределами фрейма. Подходит, когда нужно сохранить исходный размер содержимого.
• Center — обводка делится поровну между внутренней и внешней стороной границы. Стандартное поведение.
• Inside — вся обводка размещается внутри фрейма. Полезно для точного контроля геометрии.

Выбор зависит от контекста. Например, при создании кнопки с иконкой внутри лучше использовать Inside, чтобы не нарушать выравнивание.

Обводка через маску-фигуру

Этот метод подходит, когда вам нужно обвести изображение не прямоугольной, а круглой или другой формы. Например, аватарки в соцсетях чаще всего круглые.

1. Нарисуйте фигуру нужной формы (например, круг с помощью Ellipse Tool — E).
2. Импортируйте изображение и поместите его поверх фигуры.
3. Выделите изображение, затем зажмите Shift и выделите фигуру (фигура должна быть нижним слоем).
4. Нажмите Ctrl+Alt+M / Cmd+Option+M, чтобы создать маску. Изображение примет форму фигуры.
5. Выделите теперь уже замаскированное изображение и добавьте обводку в панели справа.

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

Пример: круглая аватарка с обводкой

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

• Создайте круг 80×80 px.
• Поместите фото поверх круга, выровняйте по центру.
• Создайте маску (Cmd+Option+M).
• Добавьте обводку: цвет #1E90FF, толщина 3 px, положение — Outside.
• Готово: вы получили профессионально выглядящий элемент.

Этот шаблон можно сохранить как компонент и использовать повторно.

Расширенные эффекты: тени, множественные обводки

Figma позволяет комбинировать обводку с другими эффектами, такими как тень (Drop Shadow), размытие и внутренняя тень (Inner Shadow). Это расширяет возможности визуального оформления.

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

1. Создайте фрейм с изображением и первой обводкой (например, толщиной 2 px, цвет #000000).
2. Скопируйте этот фрейм (Ctrl+D / Cmd+D).
3. Увеличьте копию на 4 px (по 2 px с каждой стороны), сместив её точно по центру.
4. Удалите изображение внутри копии, оставив только фрейм.
5. Задайте новой обводке другую толщину и цвет — например, 4 px, цвет #FFFFFF.
6. Поместите скопированный фрейм под исходным. Теперь видна двойная рамка: белая снизу и чёрная сверху.

Такой приём часто используется в дизайне кнопок, значков и премиум-элементов интерфейса.

Использование Inner Shadow как псевдо-обводки

Если вам нужна обводка, которая не влияет на размеры элемента, рассмотрите вариант с внутренней тенью. Установите параметры:

• X: 0, Y: 0
• Blur: 0
• Spread: значение, равное желаемой толщине обводки (например, 2)
• Цвет: нужный оттенок

Inner Shadow будет выглядеть как сплошная линия по краю, особенно на круглых элементах. Плюс — он не выходит за границы фрейма и не требует дополнительных слоёв.

Типичные ошибки и как их избежать

Даже опытные дизайнеры иногда допускают ошибки при работе с обводкой. Вот самые распространённые:

• Забывают про положение обводки. По умолчанию обводка в центре, и если вы используете Auto Layout, это может нарушить выравнивание. Всегда проверяйте, включена ли опция «Include strokes in layout bounds».
• Применяют обводку к самому изображению. В Figma нельзя добавить обводку к импортированному изображению напрямую. Только к фрейму, фигуре или группе.
• Не используют компоненты. Если вы делаете одинаковые аватарки в разных местах, создайте компонент с обводкой, чтобы легко вносить изменения.
• Игнорируют темы (Light/Dark Mode). Обводка должна адаптироваться под фон. Используйте переменные (Variables) в Figma, чтобы цвет обводки менялся в зависимости от режима.

Проверочный чек-лист перед публикацией макета

1. Правильно ли расположена обводка (Inside/Center/Outside)?
2. Не выходит ли обводка за границы сетки?
3. Сохраняется ли читаемость на всех фонах?
4. Используются ли компоненты для повторяющихся элементов?
5. Поддерживается ли адаптация под тёмную тему?

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

По её словам, минимальный контраст между обводкой и фоном должен быть 3:1 для элементов размером от 3 px. Для тонких линий (1–2 px) лучше использовать более насыщенные цвета.

Также эксперт отмечает, что в Figma удобно использовать плагины, такие как Strokes to Component или Border Helper, которые автоматизируют создание обводок и позволяют быстро переключать стили.

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

Заключение

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

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

• Всегда используйте фрейм или фигуру для добавления обводки к изображению.
• Положение обводки (Inside/Center/Outside) влияет на макет — выбирайте осознанно.
• Для нестандартных форм применяйте маски и Inner Shadow.
• Создавайте компоненты для повторного использования и удобства правки.
• Тестируйте контраст обводки, особенно при работе с тёмной темой.