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

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

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

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

Затем загрузите изображение. Для этого перетащите файл с десктопа прямо на холст, или нажмите «File» → «Import» и выберите фото. Не размещайте его внутрь фигуры — оно должно быть на одном уровне с фигурой в структуре слоёв (Layers Panel). Ключевой момент: изображение должно находиться непосредственно поверх фигуры, иначе маска не сработает.

Выделите оба слоя — сначала фигуру, потом изображение (удерживайте Shift при клике). Перейдите в панель свойств справа и найдите кнопку «Mask». Она появляется только при выделении двух слоёв, где верхний — изображение, а нижний — фигура. Нажмите «Mask» — и изображение мгновенно обрежется по контуру фигуры. Фигура становится маской, а изображение — её содержимым.

Альтернативный способ: через контекстное меню

Если вы предпочитаете мышь клавишам, кликните правой кнопкой по выделенным слоям и выберите «Mask». Также можно использовать сочетание клавиш: Ctrl + Alt + M (Windows) или Cmd + Option + M (Mac). Этот метод особенно удобен при работе с несколькими изображениями подряд.

Как изменить позицию изображения внутри маски

После применения маски изображение может быть не идеально центрировано. Не паникуйте — просто выберите изображение (оно останется выделенным, даже если вы кликните вне его), затем используйте стрелки на клавиатуре или перемещайте его мышкой. Figma позволяет «двигать» содержимое маски, не трогая саму фигуру-маску. Это особенно полезно, когда нужно, например, сместить лицо человека в аватаре точно в центр круга.

Маска vs Обрезка: в чём разница и когда что использовать

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

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

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

Даже опытные дизайнеры иногда сталкиваются с неожиданными проблемами. Вот самые распространённые ошибки и способы их решения.

Ошибка 1: Маска не появляется

Часто это происходит, если изображение находится ниже фигуры в структуре слоёв. Figma требует, чтобы изображение было выше фигуры. Решение: перетащите изображение вверх в панели Layers, или выделите оба слоя и нажмите «Bring to Front».

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

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

Ошибка 3: Изображение слишком маленькое или смещено

Если вы загрузили фото с другим соотношением сторон, оно может выглядеть искажённо. Решение: перед применением маски измените размер изображения через «Fit» (кнопка в панели свойств), чтобы оно заполнило фигуру. Затем, используя «Fill» или «Fit», настройте позицию.

Ошибка 4: Маска работает, но изображение не видно

Возможно, фигура имеет непрозрачный фон. Убедитесь, что у фигуры-маски установлено «Fill» = «None». Маска работает только по форме, а не по цвету. Цвет фона не влияет на маску, но может скрывать её эффект, если он белый на белом фоне.

Продвинутые техники: градиенты, анимации, группировка

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

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

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

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

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

Анимация маски в Figma (через Prototype)

Хотя Figma не поддерживает анимацию маски в реальном времени, вы можете имитировать её с помощью переходов. Например, создайте два состояния: одно с маской, другое — без неё (или с маской меньшего размера). Свяжите их через прототипирование и установите переход «Move» или «Dissolve». Это отлично работает для интерактивных прототипов на мобильных экранах.

Реальные кейсы: где это применяется в дизайне

Понимание, где и как применяется маска, помогает осознанно использовать её в проектах.

• Карточки продуктов — изображение товара в прямоугольнике с закруглёнными углами, обрезанное по форме. Это стандарт для e-commerce.
• Профили пользователей — круглые аватары в списках, меню, чатах. Маска гарантирует единообразие.
• Слайды и баннеры — фото с эффектом «вырезанного» фона, когда изображение вписывается в сложную форму (например, облако, звезда).
• Лендинги с ассиметричными формами — изображение, вписанное в нерегулярную форму, создаёт визуальный акцент и выделяет контент.
• Иконки с изображениями — например, иконка камеры с фотографией внутри. Маска позволяет легко менять содержимое без перерисовки.

Представьте, что вы проектируете приложение для путешествий. В каждом блоке «популярные места» — фото локации в форме ромба. Если вы используете маску, вы можете заменить 100 фото за 5 минут — просто заменив изображение в компоненте. Без маски — это 100 часов ручной обрезки.

Экспертное мнение: как профессионалы используют маски

Дмитрий рекомендует всегда создавать шаблоны масок в отдельной библиотеке. Например, в Figma-файле «Design System» создайте раздел «Image Masks» с готовыми формами: круг 48px, прямоугольник 120×120, овал 100×150. Каждый раз, когда команда нуждается в аватаре — они просто копируют маску и вставляют фото. Это не просто удобно — это масштабируемо.

Также он советует не использовать маски для текста или логотипов — только для фото. Текст требует точного позиционирования, и маска может его искажать. Лучше использовать «Text on Path» или векторные формы.

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

Заключение

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

• Изображение должно быть выше фигуры в структуре слоёв.
• Маска работает только при выделении двух слоёв: фигура + изображение.
• Используйте маски для компонентов — это масштабируемо и удобно.
• Не используйте маски для текста — они искажают читаемость.
• Всегда проверяйте результат на 2x/3x масштабе перед экспортом.