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

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

Почему фото в круге — это стандарт современного дизайна

Круглые аватары и портреты — не просто модный тренд, а результат глубокой эргономики и когнитивной психологии. Исследования Nielsen Norman Group показывают, что круглые формы воспринимаются как более дружелюбные, безопасные и привлекательные, чем угловатые. В интерфейсах это особенно важно: пользователи быстрее ассоциируют круглые фото с личностью, а не с объектом. Более того, круги идеально вписываются в сеточные системы, легко масштабируются и не создают визуального шума — в отличие от прямоугольных изображений, которые требуют дополнительных отступов и обрамлений.

Представьте, что вы проектируете мобильное приложение для социальной сети. Каждый профиль пользователя — это элемент, который должен быть узнаваемым, компактным и эстетичным. Круглый аватар позволяет уменьшить размер иконки до 24×24 пикселей без потери читаемости — а прямоугольная форма при таких размерах превращается в нечитаемый пятно. Это не гипотеза — это фактический стандарт, принятый Apple, Google, Facebook, LinkedIn и другими гигантами.

Способ 1: Использование фрейма с маской (самый надёжный)

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

1. Создайте новый фрейм (Frame или F) и задайте ему одинаковые ширину и высоту — например, 80×80 пикселей. Это гарантирует идеальный круг.
2. Перетащите изображение из папки на ваш фрейм. Figma автоматически поместит его внутрь.
3. В панели свойств справа найдите раздел Fill и выберите опцию Fill (а не Fit или Stretch).
4. Теперь нажмите на изображение в дереве объектов — оно должно быть внутри фрейма. Убедитесь, что фрейм выделен, а не изображение.
5. Включите маску: в панели свойств найдите опцию Mask (она автоматически включится, если изображение находится внутри фрейма).

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

Способ 2: Круг как фигура с наложением изображения

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

1. Нарисуйте круг с помощью инструмента Ellipse (E). Удерживайте Shift, чтобы сохранить пропорции.
2. Загрузите изображение и разместите его поверх круга.
3. Выделите одновременно и изображение, и круг (удерживайте Shift при клике).
4. В верхнем меню выберите Mask (или нажмите Ctrl+Alt+M / Cmd+Option+M).

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

Способ 3: Автоматизация через компоненты

Если вы проектируете систему дизайна — например, для команды из 5+ человек — вам нужно, чтобы все аватары были единообразны. Для этого используйте компоненты.

1. Создайте фрейм с кругом и изображением, как в способе 1.
2. Выделите всё — фрейм и изображение — и нажмите Ctrl+Alt+K (или Cmd+Option+K).
3. В панели Components появится новый компонент. Назовите его, например, «Avatar — Circle».
4. Теперь откройте его в режиме редактирования и добавьте Override для изображения: кликните по изображению внутри компонента → в свойствах появится поле Override Image.

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

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

Даже опытные дизайнеры допускают типичные ошибки, которые портят визуальное качество. Вот основные из них:

• Изображение искажено — произошло из-за выбора режима Stretch вместо Fill. Всегда проверяйте, что в свойствах изображения стоит «Fill».
• Фото не центрировано — если вы перетащили изображение в фрейм, а не вставили его через «Place Image», оно может оказаться смещённым. Используйте кнопку «Align Center» в панели свойств.
• Потеря качества — если исходное фото имеет разрешение меньше 200×200 пикселей, оно будет пикселизироваться при увеличении. Всегда загружайте изображения с минимальным разрешением 400×400 пикселей.
• Круг не идеальный — если вы рисовали круг вручную без удержания Shift, он может быть овалом. Проверьте размеры в панели свойств: ширина и высота должны быть равны.

Экспертное мнение: как дизайнеры используют круги в реальных проектах

• Используйте фрейм с режимом Fill и маской — это самый надёжный способ.
• Всегда загружайте фото с разрешением не ниже 400×400 пикселей.
• Для командных проектов создавайте компоненты с Override — это экономит время и исключает ошибки.
• Добавляйте тонкую обводку (1–2px) для лучшей видимости на темных фонах.
• Не используйте круги для всех типов изображений — применяйте их только для людей и персонажей.