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

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

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

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

Основы маскирования в Figma

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

Когда вы применяете маску, верхний слой (изображение) становится «дочерним» по отношению к нижнему (фигуре-маске). Это создаёт иерархию в виде группы с эффектом обрезки. Важно понимать, что маска работает только в том случае, если изображение находится строго над фигурой в слое и они объединены в одну группу с активированной маской.

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

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

Figma позволяет использовать практически любую форму в качестве маски:

• Прямоугольники и квадраты — стандартные формы для карточек и баннеров.
• Эллипсы и круги — идеальны для аватаров и иконок.
• Многоугольники — например, шестиугольники для игровых интерфейсов.
• Текстовые слои — можно вставить изображение внутрь букв.
• Кастомные векторы — созданные вручную с помощью Pen Tool.

Пошаговая инструкция: как вставить картинку в фигуру

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

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

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

Как редактировать изображение внутри маски?

После создания маски вы можете:

• Перемещать изображение — кликните по нему и тяните внутри маски.
• Масштабировать — используйте инструмент Scale (Z), удерживая Shift для сохранения пропорций.
• Поворачивать — через правую панель свойств или с помощью угловых маркеров.
• Заменить изображение — перетащите новое изображение прямо на замаскированный слой.

Чтобы выйти из режима редактирования маски, кликните вне группы или выберите другой объект на холсте.

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

Новички часто сталкиваются с проблемами при работе с масками. Большинство из них легко решаются при понимании логики Figma.

Ошибка 1: Изображение не реагирует на маску

Если после применения маски ничего не изменилось, проверьте:

• Правильный ли порядок слоёв? Изображение должно быть выше фигуры.
• Не заблокированы ли слои? Убедитесь, что ни один из объектов не заблокирован (значок замка в панели слоёв).
• Использовали ли вы правильное сочетание клавиш? Ctrl+Alt+M, а не Ctrl+M (последнее — дублирование).

Ошибка 2: Маска обрезает изображение не так, как ожидалось

Это происходит, когда изображение слишком маленькое или смещено. Решение:

• Увеличьте изображение до нужного размера до или после маскирования.
• Отцентрируйте его вручную или с помощью инструментов выравнивания (Align tools).
• Используйте режим «Fill» или «Fit» в настройках фрейма, если изображение загружено как фон.

Ошибка 3: Нельзя редактировать маску или изображение

Иногда пользователь не может войти в группу с маской. Причина — двойной клик вне целевого слоя. Чтобы редактировать содержимое:

• Дважды кликните по замаскированному изображению.
• Или выберите его в панели слоёв, раскрыв группу.
• Для выхода — кликните вне группы или нажмите Esc.

Дополнительные возможности и продвинутые приёмы

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

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

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

• Создайте текстовый слой.
• Поместите изображение выше текста.
• Выделите оба и нажмите Ctrl+Alt+M.

Изображение будет видно только внутри букв. Отлично подходит для эффектных заголовков и постеров.

Группировка масок и вложенность

Figma позволяет создавать вложенные маски. Например, вы можете:

• Создать маску из круга.
• Внутри неё — ещё одну маску (например, звезду).
• Это даёт сложные композиции без необходимости экспорта в растровые форматы.

Маски и авто-расположение (Auto Layout)

Если вы используете Auto Layout, маскирование работает корректно, но с нюансами:

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

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

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

Аватар пользователя

Представьте, что вы проектируете профиль в социальной сети. Аватар должен быть круглым.

• Создайте эллипс диаметром 80px.
• Загрузите фото пользователя.
• Поместите фото над эллипсом и примените маску.
• Центрируйте изображение по центру.

Теперь аватар выглядит профессионально и соответствует современным стандартам дизайна.

Карточка товара с нестандартной формой

Вы делаете интернет-магазин модной одежды. Товар представлен в форме ромба.

• Нарисуйте ромб с помощью инструмента Polygon.
• Загрузите изображение модели в одежде.
• Примените маску.
• Добавьте тень и эффект hover.

Такой подход делает карточку запоминающейся и выделяет бренд на фоне конкурентов.

Баннер с текстовой маской

Рекламный баннер с эффектом «текст изображением». Например, слово «ПРИРОДА» заполнено пейзажем.

• Напишите текст крупным шрифтом.
• Поместите пейзаж поверх текста.
• Примените маску.
• Настройте масштаб, чтобы изображение гармонично заполняло буквы.

Эффект сразу привлекает внимание и усиливает визуальное сообщение.

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

По словам эксперта, маскирование особенно полезно при создании дизайн-систем. Например, можно создать компонент аватара с параметрами: форма (круг, квадрат, шестиугольник), размер, наличие рамки. Используя варианты компонентов (Component Variants), вы можете быстро переключаться между формами, а маска автоматически адаптирует изображение.

Также Дмитрий отмечает, что маски отлично работают в связке с плагинами. Например, плагин Content Reel позволяет быстро вставлять случайные изображения внутрь маскированных фигур, ускоряя прототипирование.

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

Заключение

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

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