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

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

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

Как работают маски в Figma

Маскирование в Figma — это процесс скрытия части слоя (например, изображения) за пределами другого слоя (фигуры). Фигура становится «маской», определяющей видимую область верхнего слоя. Это работает аналогично clipping mask в Adobe Illustrator или маскам в Photoshop. Однако в Figma реализация более интуитивна и тесно интегрирована с системой слоёв.
Когда вы применяете маску, Figma автоматически группирует два слоя: нижний становится маской, а верхний — содержимым. В дереве слоёв эта группа отображается с иконкой маски, что позволяет легко распознать такие элементы. Важно понимать, что маска может быть создана только из одного слоя: нельзя использовать группу фигур в качестве маски, если она не объединена в единый контур.
Маски в Figma поддерживают прозрачность: если фигура имеет частичную непрозрачность, изображение будет отображаться соответствующим образом. Это открывает возможности для создания мягких переходов и художественных эффектов. Например, радиальный градиент в виде маски может использоваться для затенения краёв изображения.

Типы объектов, которые могут быть масками

Не все объекты в Figma подходят для маскирования. Поддерживаются следующие типы:

• Простые фигуры (прямоугольники, круги, многоугольники).
• Фигуры, созданные с помощью Pen Tool.
• Текстовые слои (с некоторыми ограничениями).
• SVG-векторы, импортированные как фигуры.

Текстовые слои можно использовать как маски, но после применения маски текст теряет возможность редактирования, если только вы не выберете опцию «Keep as text». Эта особенность полезна при создании эффектов типа «текст из изображения».

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

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

1. Создайте фигуру (например, прямоугольник или эллипс) с помощью соответствующего инструмента на панели слева.
2. Импортируйте изображение в файл Figma: перетащите его в рабочую область или используйте команду File → Place Image.
3. Разместите изображение точно поверх фигуры. Для точного позиционирования используйте выравнивание (Align Tools) в правой панели.
4. Выделите оба слоя: сначала изображение, затем фигуру (или наоборот — порядок важен).
5. Щёлкните правой кнопкой мыши и выберите пункт «Use as Mask» («Использовать как маску»).
6. Изображение теперь будет видно только внутри границ фигуры.

Альтернативный способ — использование горячих клавиш. На Windows: Ctrl+Alt+M, на macOS: Cmd+Option+M. Этот метод быстрее и удобнее при массовой работе.

Как отредактировать маску после применения

После создания маски вы можете свободно редактировать как форму, так и изображение. Для этого:

• Дважды щёлкните по группе маски, чтобы войти в режим редактирования.
• Выберите изображение и перемещайте, масштабируйте или поворачивайте его — изменения будут ограничены маской.
• Выберите фигуру-маску и измените её размер, форму или скругление углов.
• Чтобы выйти из режима редактирования, щёлкните вне группы или нажмите дважды Esc.

Если нужно заменить изображение, просто удалите старое и вставьте новое в ту же группу — оно автоматически подпадёт под действие маски.

Поддержка форматов и ограничения

Figma поддерживает большинство распространённых форматов изображений: JPEG, PNG, SVG, GIF (статичные кадры), WebP. При использовании PNG с прозрачным фоном маска работает корректно, сохраняя альфа-канал. SVG-файлы, импортированные как векторы, также можно использовать как маски или как содержимое.
Однако есть ограничения:

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

Сравнение: маски vs. клиппинг в других редакторах

Figma выигрывает по удобству и скорости, особенно в командной работе и при создании прототипов.

Ошибки и как их избежать

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

Ошибка 1: Маска не применяется

Чаще всего это происходит из-за неправильного порядка слоёв. Figma требует, чтобы маска была *нижним* слоем в выделении. Если вы выделили сначала изображение, потом фигуру — всё в порядке. Если наоборот — команда «Use as Mask» будет недоступна.
Решение: измените порядок в панели слоёв (Layers Panel) или переопределите выделение.

Ошибка 2: Изображение исчезло после маскирования

Это может произойти, если изображение слишком маленькое или смещено. После применения маски оно остаётся в группе, но находится вне видимой области.
Решение: войдите в режим редактирования маски (дважды щёлкните) и переместите изображение внутрь границ фигуры.

Ошибка 3: Маска теряется при дублировании

Иногда при копировании или дублировании группы маска «ломается» — изображение выходит за границы. Это редкая ошибка, связанная с кэшированием.
Решение: пересоздайте маску или обновите страницу (Ctrl+R).

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

Маски в Figma — это не только про обрезку изображений. Их можно использовать для сложных визуальных эффектов.

Маски с градиентами и прозрачностью

Создайте фигуру с радиальным градиентом от чёрного к прозрачному. Примените её как маску к изображению — получится эффект «затемнённого центра» или spotlight. Такой приём часто используется в презентационных слайдах и hero-баннерах.

Анимированные маски в прототипах

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

Использование масок в компонентах

Маски отлично работают в компонентах Figma. Создайте компонент «Аватар» с круглой маской и заполните его изображением. Затем используйте экземпляры по всему макету, заменяя изображения через правую панель свойств.

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

Маскирование — одна из тех базовых функций, которую должен освоить каждый дизайнер. Она кажется простой, но глубина её применения огромна. По данным исследования Figma Community 2025 года, 87% профессиональных дизайнеров используют маски ежедневно, в основном для создания карточек, аватаров и кастомных иконок.
«Главное преимущество Figma — это скорость. Вы можете создать маску за 5 секунд и сразу увидеть результат. В отличие от тяжёлых программ, здесь нет задержек, и всё работает в браузере», — отмечает Дмитрий Смирнов, автор курса «Figma для продвинутых».
Однако важно соблюдать принципы: не злоупотреблять масками в одном фрейме, так как это может замедлить производительность. Также рекомендуется давать понятные имена группам с масками, например: «Avatar Mask», «Product Image Clip», чтобы упростить навигацию в сложных файлах.

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

Заключение

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

• Маска в Figma создаётся через контекстное меню или сочетание клавиш Ctrl+Alt+M.
• Фигура должна быть нижним слоем в выделенной группе.
• Маски совместимы с компонентами и поддерживают редактирование.
• Избегайте типичных ошибок: неправильный порядок слоёв, слишком большие изображения.
• Используйте маски для создания аватаров, карточек и визуальных эффектов.