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

В Figma вставить фото в круг можно с помощью маскирования: импортируйте изображение, создайте круг нужного размера, выделите оба элемента и используйте команду «Create Mask» (Ctrl/Cmd+M). Это скроет часть изображения за пределами круга, визуально превратив его в круглую фотографию.

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

Основные шаги: как вставить фото в круг в Figma

Чтобы вставить изображение в круг в Figma, необходимо использовать комбинацию формы и маски. Первый этап — создание базовой фигуры. Выберите инструмент «Ellipse» (O) на панели слева и удерживая Shift, нарисуйте идеальный круг на холсте. Размер круга должен соответствовать желаемому размеру будущей аватарки или элемента дизайна.
Далее загрузите изображение. Перетащите его прямо в Figma из проводника или воспользуйтесь пунктом меню «File → Place Image». Изображение появится на холсте. Поместите его поверх круга так, чтобы нужная часть фотографии находилась внутри границы круга. Убедитесь, что круг находится под изображением в стеке слоёв.
Теперь выделите одновременно и круг, и изображение. Это можно сделать, зажав Shift и кликнув по каждому элементу, или обведя их рамкой. После выделения нажмите Ctrl+M (Windows) или Cmd+M (Mac), либо выберите в верхнем меню опцию «Create Mask». Изображение мгновенно «обрежется» по форме круга, оставив видимым только ту часть, которая перекрывается с маской.

Пошаговый алгоритм

1. Выберите инструмент «Ellipse» (O) и нарисуйте круг, удерживая Shift для пропорций 1:1.
2. Перетащите изображение в Figma или добавьте через «Place Image».
3. Поместите изображение поверх круга.
4. Выделите оба объекта: сначала круг, затем изображение (или наоборот, главное — оба).
5. Нажмите Cmd/Ctrl + M, чтобы создать маску.
6. При необходимости скорректируйте положение изображения внутри маски, перемещая его курсором.

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

Маскирование в Figma — это не просто обрезка, а полноценный инструмент композиции. Когда вы применяете маску, Figma создаёт специальный контейнер, внутри которого верхний элемент (изображение) становится «замаскированным», а нижний (в данном случае — круг) определяет форму видимости. При этом сама маска может быть не только сплошной фигурой, но и иметь прозрачность, заливку или обводку — однако последние два параметра не влияют на результат маскирования.
Один из ключевых моментов — порядок слоёв. Figma читает маску строго по порядку: первый выделенный объект становится маской, второй — содержимым. Если вы случайно выделите сначала изображение, а потом круг, маска будет создана неверно — круг станет «замаскированным» под размер изображения, что, скорее всего, не даст желаемого эффекта. Чтобы избежать путаницы, проверяйте порядок в панели слоёв (Layers Panel) слева.
Если вы работаете с компонентами или символами (в терминологии Figma — Components), маскирование также полностью поддерживается. Это особенно полезно при создании библиотек интерфейса, где аватарки могут быть переиспользуемыми элементами. Например, вы можете создать компонент «Круглая аватарка» и заменять изображение у каждого экземпляра, сохраняя единый стиль.

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

После применения маски вы можете продолжать редактировать положение изображения. Достаточно дважды щёлкнуть по нему — вы попадёте внутрь маскированного слоя. Теперь можно двигать изображение, масштабировать его (удерживая Alt + колесо мыши или через свойства в правой панели), поворачивать. Все изменения будут ограничены формой маски.
Чтобы выйти из режима редактирования маски, кликните вне её или нажмите Esc. Если нужно изменить саму форму маски (например, увеличить круг), вы можете выделить маску в панели слоёв и изменить её размер или форму. Однако учтите: если вы измените форму маски, например, растянете её, изображение автоматически адаптируется под новую форму.

Раскрытие возможностей маскирования в Figma

Хотя в запросе речь идёт о круге, важно понимать, что Figma позволяет маскировать изображения под любую форму: прямоугольники, многоугольники, кривые, текст и даже составные фигуры. Круг — лишь один из вариантов. Более того, маски могут быть составными: вы можете объединить несколько фигур (через Union, Subtract и другие Boolean operations) и использовать получившуюся форму как маску.
Например, если вам нужно вставить фото в форму сердца или шестиугольника, процесс аналогичен: создайте нужную фигуру, поместите поверх неё изображение и примените маску. Это открывает широкие возможности для креативного дизайна — от нестандартных аватарок до сложных композиций в лендингах.
Также стоит отметить, что маскирование работает с любыми типами изображений: JPEG, PNG, SVG. Однако при использовании SVG есть нюанс — векторные изображения могут масштабироваться без потерь, тогда как растровые (JPEG, PNG) при увеличении могут потерять чёткость. Рекомендуется использовать изображения с разрешением не ниже 2x от целевого размера, особенно если они будут отображаться на Retina-экранах.

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

Figma позволяет применять эффекты (тени, размытие, внутренние тени) как к самой маске, так и к содержимому. Однако важно понимать: эффекты, применённые к маске (кругу), будут влиять на всю группу. Например, если вы добавите тень к кругу до создания маски, после маскирования тень останется. Но если вы примените эффект к изображению, он тоже будет виден, но только в пределах маски.
Это полезно для создания глубины: например, тень вокруг круглой аватарки делает её объёмной. Также можно добавить размытие к фоновому изображению, которое частично выходит за пределы круга, — эффект будет корректно обрезан.

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

Одна из самых распространённых ошибок — неправильный порядок выделения объектов. Как уже упоминалось, если выделить сначала изображение, а потом фигуру, маска будет создана на основе изображения, что приведёт к нежелательному результату. Чтобы этого избежать, всегда следите за порядком в панели слоёв: маска должна быть ниже по списку.
Ещё одна частая проблема — потеря контроля над маской. Иногда дизайнеры забывают, что маска — это не отдельный слой, а связь между двумя объектами. Если вы удалите фигуру-маску, изображение останется, но уже без обрезки. Аналогично, если вы разгруппируете объект (Ungroup), маска исчезнет, и изображение вернётся к исходному виду.
Также встречаются случаи, когда изображение кажется «обрезанным неправильно» — например, важная часть лица не попадает в круг. Это не ошибка Figma, а вопрос композиции. Решение — двойной клик по маске и ручная корректировка положения изображения. Можно использовать привязки (Snap to Pixel, Align) для точного позиционирования.

Чек-лист: проверка перед публикацией

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

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

Один из самых очевидных случаев — профильные аватарки в соцсетях, CRM-системах или внутренних сервисах. Допустим, вы проектируете экран «Мои контакты». Каждый контакт имеет круглую фотографию. Создав один компонент с маской, вы можете быстро клонировать его и менять изображение, экономя время и обеспечивая единообразие.
Другой пример — слайдеры с командой. На лендинге компании часто размещают фото сотрудников в кругах. Здесь важно, чтобы все изображения были выровнены по одному стилю: одинаковый размер, отступы, обводка. Использование маскирования в Figma позволяет задать эти параметры один раз и применять их массово.
Также маски полезны в мобильных интерфейсах. Например, в приложении доставки еды профиль пользователя может включать круглую аватарку. При этом дизайн должен учитывать разные состояния: с фото, без фото (иконка по умолчанию), с онлайн-статусом (маленькая точка в углу). Все эти элементы можно объединить в один компонент с маской.

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

Маскирование — один из фундаментальных инструментов в современном UI-дизайне. Оно позволяет гибко управлять визуальной композицией, не нарушая структуру проекта. Главный принцип: маска должна быть простой, предсказуемой и легко редактируемой. Лучше создавать отдельные компоненты для часто используемых форм, чем дублировать действия.
При работе с командой важно документировать использование масок, особенно если в проекте участвуют новички. Называйте слои понятно: например, «Avatar Mask» или «Photo – Circle Clip». Это упрощает навигацию и снижает количество ошибок.
Также рекомендуется использовать Auto Layout в сочетании с масками. Например, если аватарка — часть карточки с текстом, Auto Layout поможет автоматически выравнивать элементы при изменении размера. Современные версии Figma (2024–2026) отлично поддерживают такие комбинации.

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

Заключение

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

• Для вставки фото в круг используйте маскирование: круг + изображение + Cmd/Ctrl+M.
• Следите за порядком слоёв: маска должна быть ниже изображения.
• Маски работают с любыми формами и типами изображений.
• Создавайте компоненты для повторного использования аватарок.
• Проверяйте экспорт и эффекты, чтобы избежать визуальных сбоев.