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

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

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

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

Особенности работы с изображениями в Figma

Figma — это векторный редактор, и хотя он поддерживает импорт растровых изображений (JPG, PNG, SVG), они остаются «плоскими» слоями без внутреннего доступа к пикселям. Это означает, что такие эффекты, как stroke, blur или маски, нельзя применить напрямую к изображению так же, как к фигуре. Вместо этого используются обходные методы.
Изображения в Figma нельзя «обвести» через панель свойств, как это делается с фигурами. У них нет параметра Stroke. Однако можно использовать маски, фигуры и группы, чтобы добиться аналогичного результата. Это требует понимания иерархии слоёв и принципов композиции в Figma.

Шаг 1: Подготовка изображения

Перед тем как добавлять обводку, убедитесь, что изображение корректно размещено в макете. Перетащите его в рабочую область или используйте команду File → Place Image. Изображение должно быть чётко выровнено и иметь нужные размеры.
Если вы планируете использовать обводку с закруглёнными углами, проверьте, совпадают ли радиусы скругления будущей рамки с углами изображения. Например, если у картинки скругление 12px, обводка должна иметь такое же значение.

• Убедитесь, что изображение находится в отдельной группе или фрейме.
• Проверьте выравнивание по сетке и отступы.
• Если используется Auto Layout — настройте его заранее.

Шаг 2: Добавление обводки через фигуру

Наиболее надёжный способ — создать фигуру под изображением. Выберите инструмент Rectangle (R) и нарисуйте прямоугольник такого же размера, как ваше изображение. Поместите его под слой с картинкой, используя Ctrl+[ (или Cmd+[ на Mac).
Теперь выберите фигуру и в правой панели Properties установите параметр Stroke. Выберите цвет, толщину (например, 2px) и положение обводки — внутри, по центру или снаружи. Для точного соответствия границам изображения лучше использовать положение «Inside».

Как точно совместить фигуру с изображением

• Выделите изображение и посмотрите его размеры в панели справа (W и H).
• Создайте фигуру с теми же значениями ширины и высоты.
• Используйте привязку (snapping) или введите координаты X и Y вручную.
• Проверьте порядок слоёв: фигура — ниже, изображение — выше.

Шаг 3: Настройка stroke и позиционирование

После добавления фигуры перейдите к настройке обводки. В разделе Stroke вы можете:

• Выбрать цвет через палитру или ввести HEX-код.
• Указать толщину: от 0.1 до 100 px.
• Настроить тип линии: сплошная, пунктирная, с точками.
• Изменить положение: Inside, Center, Outside.

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

Альтернативные методы добавления обводки

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

Метод 1: Использование внешнего теневого эффекта

Добавьте к изображению эффект Drop Shadow с малым значением X и Y и большим Spread. Например: X=0, Y=0, Blur=0, Spread=2. Это создаёт визуальную рамку. Преимущество — не нужно создавать дополнительный слой. Недостаток — ограниченная гибкость в настройке цвета и типа линии.

Метод 2: Маскирование через фигуру с обводкой

Создайте фигуру с нужной обводкой, затем поместите изображение внутрь неё, преобразовав в маску (Ctrl+Alt+M). Этот способ подходит, если вы хотите, чтобы обводка была частью одного слоя. Однако он менее гибкий при изменении размеров.

Метод 3: Плагины

В Figma Marketplace есть плагины, автоматизирующие добавление обводки. Например, Stroke Image или Frame with Stroke. Они быстро создают обводку вокруг любого слоя. Но будьте осторожны: такие плагины могут конфликтовать с Auto Layout или не сохранять стили.

Частые ошибки и как их избежать

Новички часто сталкиваются с проблемами при добавлении обводки. Вот основные ошибки и пути их решения.

Ошибка 1: Обводка не совпадает по размеру с изображением

Это происходит, если фигура не выровнена по пикселям. Решение: используйте привязку к сетке и включите опцию Precision Selection в настройках.

Ошибка 2: Обводка исчезает за фоном

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

Ошибка 3: Нарушается Auto Layout

Если вы используете Auto Layout, обводка снаружи может сдвигать элементы. Решение: либо использовать положение Inside, либо обернуть изображение и обводку в отдельный фрейм.

Ошибка 4: Сложность повторного использования

Если обводка сделана вручную каждый раз, это снижает эффективность. Решение: создайте компонент с изображением и обводкой, сохраните стиль stroke как Shared Style.

Практические примеры использования обводки

Рассмотрим, как обводка применяется в реальных проектах.

• Аватарки пользователей: тонкая синяя обводка при онлайн-статусе.
• Карточки товаров: серая рамка при ховере, заменяющая тень на светлом фоне.
• Формы ввода: красная обводка при ошибке заполнения поля.
• Галереи: белая обводка на тёмном фоне для выделения фотографий.

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

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

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

Заключение

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

• Обводка добавляется не к изображению, а через отдельную фигуру под ним.
• Положение stroke (Inside/Center/Outside) влияет на размеры и вёрстку.
• Для повторного использования создавайте компоненты и стили слоёв.
• Избегайте плагинов в production-проектах без тестирования.
• Обводка — инструмент коммуникации, используйте её осознанно.