Как в фигме обрезать фото по форме

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

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

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

Вот пошаговая инструкция:

1. Импортируйте изображение в проект: перетащите файл в рабочую область или используйте File → Import.
2. Создайте векторную форму, по которой хотите обрезать фото. Это может быть круг, прямоугольник с закруглёнными углами, звезда, силуэт или произвольный путь, нарисованный с помощью Pen Tool.
3. Разместите форму точно поверх изображения. Убедитесь, что форма полностью перекрывает ту часть изображения, которую вы хотите оставить.
4. Выделите оба слоя — и изображение, и форму. Для этого удерживайте Shift и кликните по каждому элементу в панели Layers.
5. В правом боковом меню найдите кнопку Mask (значок в виде квадрата с кругом внутри) и нажмите её. Альтернативно — используйте горячую клавишу Cmd + Option + M (Mac) или Ctrl + Alt + M (Windows).

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

Маска vs Обрезка: в чём разница и почему это критично

Многие дизайнеры путают маску и обрезку. В Figma понятие «обрезка» как таковое отсутствует — есть только маскирование. Это не недостаток, а особенность векторной системы, которая обеспечивает гибкость и сохранение качества.

В растровых редакторах (например, Photoshop) «обрезка» физически удаляет пиксели за пределами контура. В Figma маска — это правило видимости. Изображение остаётся нетронутым, а маска определяет, какие его части показывать.

Это имеет важные последствия:

• Экономия места: вы не храните десятки копий одного фото в разных формах — достаточно одной копии и нескольких масок.
• Лёгкая корректировка: если нужно изменить форму — просто редактируйте вектор, а не перезаливайте изображение.
• Совместимость с компонентами: маски работают внутри компонентов, что позволяет создавать динамические элементы (например, аватары пользователей в разных формах).

Если вы попробуете «обрезать» фото, используя инструмент Trim или Intersect, вы получите не маску, а новый векторный путь — и потеряете исходное изображение. Это приводит к необратимым потерям при последующих правках.

Продвинутые техники: обрезка по сложным формам и тексту

Обрезка по простым формам — это основа. Но настоящая сила Figma раскрывается при работе со сложными контурами.

Обрезка по тексту

Хотите, чтобы фото было видно только внутри букв? Это возможно.

1. Создайте текст с помощью инструмента Text.
2. Преобразуйте текст в контур: выделите текст → кликните правой кнопкой → Convert to Vector.
3. Поместите изображение поверх текста.
4. Выделите оба слоя → нажмите Mask.

Теперь фото «вытекает» из букв — идеально для заголовков, логотипов или рекламных баннеров. Важно: после конвертации текст становится неизменяемым. Если нужно менять слова — создавайте маску на отдельном слое и используйте компоненты.

Обрезка по нескольким формам

Figma не позволяет напрямую объединить несколько форм в одну маску. Но есть обходной путь:

1. Создайте все нужные формы (например, два круга и треугольник).
2. Объедините их в одну фигуру: выделите все → Union (в панели слева).
3. Теперь у вас одна форма — примените маску к изображению.

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

Частые ошибки и как их исправить

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

• Ошибка 1: Изображение не обрезается — маска не применяется. Причина: слои не выделены вместе. Решение: Убедитесь, что и изображение, и форма выделены одновременно. Курсор должен показывать оба слоя в панели Layers.
• Ошибка 2: После маски изображение стало размытым. Причина: маска применяется к уменьшенному изображению. Решение: Увеличьте изображение до нужного размера до применения маски. Figma не масштабирует изображение внутри маски автоматически.
• Ошибка 3: Маска исчезла после переименования. Причина: вы удалили или переименовали базовую форму. Решение: Никогда не удаляйте слой-маску. Переименовывайте его, но не трогайте структуру.
• Ошибка 4: Изображение выходит за границы формы. Причина: вы не центрировали изображение относительно маски. Решение: Используйте Align (в панели справа) — выровняйте изображение по центру маски.
• Ошибка 5: Маска не работает с компонентами. Причина: вы применили маску к компоненту, а не к его экземпляру. Решение: Применяйте маску только к экземплярам. Внутри компонента — создавайте маску на базовом слое, а не на экземпляре.

Динамическая обрезка: как работать с компонентами и переменными

Самое мощное применение масок — в системах компонентов. Представьте, что вы создаёте UI-библиотеку с аватарами пользователей. Каждый аватар должен быть в круге, но пользователи загружают фото разного размера и пропорций.

Вот как это сделать правильно:

1. Создайте компонент: нарисуйте круг → поместите внутри него изображение → примените маску.
2. Сделайте изображение «замещаемым»: выделите изображение → в панели Properties → отметьте Override (появится значок +).
3. Теперь каждый экземпляр компонента можно заменить другим фото — и оно автоматически обрежется по кругу.

Это особенно полезно для:
— профилей пользователей в приложениях;
— карточек товаров в интернет-магазинах;
— слайдеров с фотографиями.

Для этого создайте компонент с несколькими масками (например, круг, квадрат, треугольник) и используйте Component States или Auto Layout с условиями. Это требует продвинутых знаний, но позволяет создавать адаптивные системы без дублирования.

Экспертное мнение: как дизайнеры используют обрезку для усиления бренда

Елена работает с крупными брендами в сфере e-commerce и SaaS. Её кейс: компания по продаже экологичной косметики хотела, чтобы её продукты на сайте выглядели как «природные объекты» — листья, капли воды, камни.

Они не использовали стандартные прямоугольники. Вместо этого:

• Фотографии продуктов были обрезаны по форме листьев (вручную нарисованные контуры);
• Для каждой категории (уход, очищение, питание) — своя форма;
• Все формы были собраны в компоненты с override-изображениями.

Результат: конверсия увеличилась на 27% за 3 месяца. Пользователи лучше запоминали продукты, потому что форма стала частью идентичности.

Елена подчёркивает: «Не бойтесь нестандартных форм. Figma позволяет делать это без потери качества. Главное — чтобы форма была осмысленной. Не ради эффекта, а ради восприятия».

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

Заключение

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

Ключевые принципы, которые стоит запомнить:

• Используйте маску — никогда не удаляйте изображение.
• Всегда выделяйте изображение и форму одновременно перед применением маски.
• Преобразуйте текст и сложные формы в векторы, прежде чем применять маску.
• Работайте с компонентами и override — это экономит часы на больших проектах.
• Проверяйте выравнивание и масштаб — малейшие сдвиги портят восприятие.