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

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

Зачем нужно вставлять изображение в фигуру

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

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

Кроме эстетики, такой подход упрощает работу команды. Дизайнер может заменять изображения без изменения макета, а разработчики получают понятную структуру, которую легко воспроизвести в коде через CSS-маски или clip-path.

Подготовка к работе: требования и условия

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

Для успешной вставки изображения в фигуру необходимо:

• Иметь готовое изображение (загруженное из файла, URL или через drag-and-drop);
• Создать фигуру нужной формы (прямоугольник, круг, многоугольник и т.д.);
• Разместить изображение и фигуру на одном фрейме или в одной группе;
• Правильно выстроить порядок слоёв в панели Layers.

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

Как проверить порядок слоёв

Откройте панель слева (Layers) и найдите два объекта: изображение и фигуру. Убедитесь, что изображение находится выше по списку. Если нет — перетащите его вверх. Альтернативно, используйте горячие клавиши:

1. Ctrl+] (Cmd+] на Mac) — поднять слой;
2. Ctrl+[ (Cmd+[ на Mac) — опустить слой.

Основной способ: использование маски

Самый надёжный и универсальный метод — создание clipping mask. Этот подход работает во всех случаях, независимо от формы фигуры или типа изображения.

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

1. Загрузите изображение в Figma: перетащите файл или используйте File → Place Image (Ctrl+K / Cmd+K).
2. Создайте фигуру нужной формы с помощью Shape Tools (например, Ellipse для круга).
3. Разместите изображение так, чтобы оно покрывало фигуру полностью или частично — это зависит от желаемого вида.
4. Выделите оба объекта: кликните по одному, затем Shift + клик по второму.
5. Нажмите комбинацию Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac).

После этого изображение будет видно только внутри границ фигуры. На панели слоёв они объединятся в группу с иконкой маски (двухслойный квадрат).

Настройка положения и масштаба

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

• Дважды щёлкните по изображению в группе маски — войдёте в режим редактирования содержимого;
• Переместите или измените масштаб изображения с помощью курсора или панели свойств;
• Выйдите из режима, кликнув за пределами группы.

Альтернативные подходы и лайфхаки

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

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

Если вы часто используете один и тот же тип карточки (например, круглый аватар), создайте компонент:

• Примените маску к изображению и фигуре;
• Сгруппируйте их (Ctrl+G / Cmd+G);
• Создайте компонент (клик по значку «♦» в панели справа);
• Теперь при создании экземпляров можно заменять изображение через панель Properties.

Это особенно удобно при работе с дизайн-системами и прототипированием.

Mask через Boolean Operations (редкий случай)

Figma не позволяет использовать boolean-операции (Unite, Subtract и др.) для маскирования изображений напрямую. Однако есть обходной путь:

• Преобразуйте изображение в Fill (выделите, кликните правой кнопкой → Create Vector Mask);
• Примените Subtract или Intersect с фигурой.

Но этот метод превращает изображение в вектор, что может снизить качество и увеличить нагрузку на файл. Используйте только при крайней необходимости.

Плагины для автоматизации

Несколько популярных плагинов упрощают вставку изображений:

• Content Reel — хранит изображения и позволяет быстро вставлять их в маски;
• Unsplash — прямая загрузка фото с лицензией;
• Image Manager — массовое применение изображений к маскам.

Частые ошибки и как их избежать

Даже простая операция может вызвать проблемы, если не соблюдать правила.

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

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

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

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

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

После маскирования изображение становится частью группы. Чтобы изменить его, нужно:

• Дважды щёлкнуть по нему внутри маски;
• Или щёлкнуть правой кнопкой → Edit Contents.

Ошибка 4: Маска ломается при экспорте

Экспорт в PNG/SVG должен сохранять маску корректно. Если маска исчезает — убедитесь, что группа не усечена внешним фреймом. Также проверьте, включена ли опция «Include in Export» в настройках слоя.

Экспорт и совместимость с другими инструментами

После создания маски важно правильно экспортировать результат. Figma поддерживает экспорт масок в PNG, JPG, SVG и PDF. Однако есть нюансы:

SVG-экспорт сохраняет маску как «, что совместимо с большинством браузеров. Разработчики могут использовать этот код напрямую или конвертировать в CSS `clip-path`.

Для React, Vue или других фреймворков рекомендуется:

• Использовать обёртку с `overflow: hidden` для прямоугольных форм;
• Применять `border-radius: 50%` для круглых аватаров;
• Для сложных форм — использовать SVG-clip или CSS-маски.

Если вы передаёте макет в Zeplin или Avocode, маски отображаются корректно, но лучше добавить комментарий: «Изображение обрезано по форме».

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

Он также отмечает, что многие начинающие дизайнеры боятся масок, считая их сложными. На самом деле, после первых 2–3 попыток процесс становится интуитивным. Главное — практика и внимание к порядку слоёв.

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

Заключение

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

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