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

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

Основной метод: маскирование

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

Как работает маскирование на уровне слоёв

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

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

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

1. Откройте Figma и создайте новый файл или перейдите в нужный фрейм.
2. Используя инструменты фигур (например, Rectangle, Ellipse), нарисуйте фигуру, в которую вы хотите поместить изображение. Например, круг для аватарки.
3. Перетащите изображение из проводника или вставьте его через меню File → Place Image (или Ctrl/Cmd+K).
4. Разместите изображение поверх фигуры. Убедитесь, что изображение находится выше в стеке слоёв.
5. Выделите оба объекта: зажмите Shift и кликните по фигуре и изображению.
6. Нажмите сочетание клавиш Ctrl/Cmd+Alt+M или выберите в верхнем меню: Object → Create Mask.
7. Готово: изображение теперь отображается только внутри формы фигуры.

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

• Перемещать изображение внутри маски, чтобы выбрать нужный фрагмент.
• Масштабировать изображение, удерживая Alt и используя инструмент перемещения.
• Редактировать форму маски, дважды щёлкнув по ней и изменив её размер или очертания.

Редактирование масок

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

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

Обратите внимание: если вы измените размер маски, изображение не масштабируется автоматически. Оно остаётся в том же положении, но может частично выйти за границы новой формы.

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

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

Создание аватарки и фото профиля

Один из самых частых сценариев — оформление профилей пользователей. Круглая аватарка стандартна для соцсетей, мессенджеров и CRM-систем. Используя маску, вы легко превращаете прямоугольное фото в круглое, сохраняя возможность центрировать лицо.

Дизайн кнопок и элементов интерфейса

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

Создание графических эффектов

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

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

Новички в Figma часто сталкиваются с типичными трудностями при работе с масками. Знание этих проблем поможет сэкономить время.

Неправильный порядок слоёв

Самая частая ошибка — размещение фигуры выше изображения. В этом случае маска не сработает корректно. Убедитесь, что фигура находится внизу, а изображение — сверху.

Применение маски к нескольким объектам

Если вы выделили три и более объекта и применили маску, Figma использует самый нижний как маску, а остальные — как содержимое. Это может привести к неожиданным результатам. Лучше работать с двумя слоями: один — маска, второй — изображение.

Отсутствие доступа к изображению после маскирования

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

Дополнительные техники

Помимо базового маскирования, Figma предлагает продвинутые методы, которые расширяют возможности дизайна.

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

Вы можете использовать любой векторный объект — например, путь, созданный Pen Tool, или текст — в качестве маски. Для этого:

• Создайте векторную фигуру.
• Преобразуйте текст в кривые (Right-click → Convert to Outline), если используете шрифт.
• Поместите изображение выше и примените маску.

Динамические компоненты с масками

В системах дизайна (Design Systems) часто создаются компоненты аватарок, где маска фиксирована, а изображение заменяется. Это достигается через:

• Создание компонента с маской.
• Установку изображения как заполняемого свойства (Fill or Image).
• Использование в экземплярах с разными аватарами.

Сочетание маскирования с эффектами

Маскирование отлично работает с:

• Blur (размытие) — для фоновых изображений.
• Opacity (прозрачность) — для наложения слоёв.
• Auto Layout — для адаптивных карточек.

Экспорт результата

После завершения работы важно правильно экспортировать изображение. Маскирование в Figma не влияет на качество экспорта — вы получаете растровое изображение в заданном формате.
Чтобы экспортировать:

• Выделите группу с маской.
• В правой панели нажмите «+» рядом с Export.
• Выберите формат: PNG (с прозрачностью), JPG или SVG (если маска векторная).
• Укажите разрешение: 1x, 2x, 3x для ретина-экранов.
• Нажмите Export.

Обратите внимание: при экспорте в SVG маски могут некорректно отображаться в некоторых браузерах. Рекомендуется тестировать результат или использовать PNG для критически важных элементов.

Особенности экспорта в SVG

SVG-файлы сохраняют векторную структуру, но маски в виде растровых изображений преобразуются в base64-строки. Это увеличивает размер файла. Для оптимизации:

• Используйте PNG при высокой детализации.
• Оптимизируйте SVG через внешние инструменты (SVGO, Figma Plugins).
• Проверяйте совместимость с целевыми платформами.

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

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

• Создание шаблонов масок для частых форм (круг, овал, закруглённый прямоугольник).
• Использование компонентов для масок, чтобы унифицировать аватарки и карточки.
• Тестирование масок на разных разрешениях и ориентациях экрана.

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

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

Заключение

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

• Маскирование в Figma выполняется через сочетание Ctrl/Cmd+Alt+M после выделения двух слоёв.
• Фигура должна быть ниже, а изображение — выше в стеке слоёв.
• Маски можно редактировать, перемещать и использовать в компонентах.
• Экспорт возможен в PNG, JPG и SVG, но требует проверки совместимости.
• Техника применима в UI, графическом дизайне и прототипировании.