Как в фигме поместить фото в фигуру

В Figma можно поместить изображение внутрь фигуры с помощью функции маскирования. Для этого нужно разместить фото над фигурой, выделить оба элемента и использовать команду «Create Mask» (Создать маску) через контекстное меню или панель инструментов. Это скроет часть изображения за пределами формы, создав эффект обрезки по контуру.

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

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

Основные понятия: что такое маска в Figma

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

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

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

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

Процесс помещения фото в фигуру в Figma прост и занимает всего несколько шагов. Он работает одинаково для всех типов фигур и изображений — будь то PNG, JPEG, SVG или даже видео (в рамках прототипирования).

1. Добавьте фигуру на холст. Используйте инструмент Rectangle, Ellipse или любой другой, чтобы нарисовать форму, в которую вы хотите поместить изображение. Например, выберите Ellipse Tool (O) и нарисуйте круг нужного размера.
2. Импортируйте изображение. Перетащите фото с компьютера на холст или вставьте его через меню File → Place Image (Ctrl+Alt+I). Убедитесь, что изображение находится поверх фигуры в слоях.
3. Выделите оба слоя. Зажмите Shift и кликните по фигуре и изображению в панели слоёв или на холсте. Порядок выделения не важен, но важно, чтобы изображение было выше фигуры в стеке слоёв.
4. Примените маску. Кликните правой кнопкой мыши и выберите «Create Mask» (Создать маску), либо нажмите Ctrl+Alt+M. Альтернативно — используйте значок маски в верхней панели инструментов.
5. Отрегулируйте положение фото. Теперь изображение отображается только внутри фигуры. Вы можете щёлкнуть по нему внутри группы и сдвинуть, чтобы изменить фокус — например, центрировать лицо в круглом аватаре.

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

Совместимость и ограничения масок в Figma

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

• Нельзя использовать группу как маску напрямую — только после объединения в векторный объект (через Outline Stroke или Union).
• Маски не поддерживают прозрачность: вся маска работает как сплошная форма, даже если у фигуры есть opacity ниже 100%.
• Эффекты (тени, размытие) не применяются к самой маске, но могут быть добавлены к группе после создания.
• В некоторых случаях при экспорте маскированные изображения могут обрезаться иначе, чем на холсте — особенно если включена опция «Crop to bounds».

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

Маски — это не просто технический приём, а мощный инструмент визуальной коммуникации. Вот несколько реальных кейсов:

• Аватары и профили. Круглая маска на фото пользователя — стандарт в соцсетях и CRM-системах. Легко создать компонент с маской, чтобы быстро менять изображения.
• Карточки товаров. Продукт в форме шестиугольника или капли — необычный способ выделиться. Форма задаётся маской, а изображение остаётся редактируемым.
• Геро-баннеры с фигурными вырезами. Можно создать маску в виде волны или стрелки, чтобы фоновое изображение плавно вписывалось в макет.
• Иконки с градиентным фоном. Поместите градиент внутрь иконки через маску, чтобы добиться современного look’а.

Распространённые ошибки и как их избежать

• Ошибка: изображение исчезло после создания маски. Причина — изображение находится под фигурой в слоях. Решение: переместите фото выше в стеке.
• Ошибка: маска не применяется. Возможно, выделено более двух слоёв или используется группа. Решение: оставьте только два слоя — фигуру и изображение, или объедините фигуры в вектор.
• Ошибка: при экспорте обрезка некорректная. Проверьте настройки экспорта: выберите «Crop to bounds» или «Include in export» для группы с маской.
• Ошибка: нельзя редактировать изображение внутри маски. Убедитесь, что вы дважды кликнули по группе, чтобы войти в режим редактирования содержимого.

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

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

Заключение

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

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