Как в фигме сделать круглый фрейм

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

Основные методы создания круглого фрейма

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

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

Выбор метода зависит от типа контента и дальнейшего использования. Если вы планируете экспортировать элемент как компонент или использовать его в прототипе, важно учитывать производительность и гибкость. Маски немного тяжелее для системы, но дают больше контроля. Skругление — легче и быстрее, но менее универсально.

Когда использовать каждый метод

• Используйте маскирование, когда нужно обрезать изображение, текст или группу объектов по кругу. Особенно актуально для аватаров, карточек пользователей, миниатюр видео.
• Применяйте Corner Radius, если создаёте простую фигуру, например, круглый фон для иконки, кнопку с эффектом нажатия или элемент загрузки.
• Выбирайте Auto Layout + скругление, когда нужна адаптивность — например, круглая кнопка, которая меняет размер, но остаётся идеально круглой.

Как использовать маски для создания круга

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

1. Создайте новый файл или откройте существующий проект в Figma.
2. Выберите инструмент Ellipse (E) и нарисуйте идеальный круг, удерживая клавишу Shift. Убедитесь, что ширина и высота равны — например, 100×100 пикселей.
3. Добавьте изображение или объект, который вы хотите обрезать по кругу. Перетащите его поверх круга и отцентрируйте.
4. Выделите сначала изображение, затем круг (или наоборот — порядок важен). Нажмите Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac), чтобы применить маску.
5. Теперь содержимое будет видно только внутри круглой области. Вы можете перемещать содержимое внутри маски, не нарушая её форму.

Преимущества и ограничения маскирования

Создание круглого фрейма через Corner Radius

Альтернативный и более лёгкий способ — использование свойства Corner Radius (радиус скругления углов). Этот метод работает с фреймами, фигурами и Auto Layout-объектами. Чтобы получить идеальный круг, достаточно задать радиус, равный половине ширины или высоты объекта.

Например, если у вас есть фрейм размером 80×80 пикселей, установите значение Corner Radius равным 40. Figma автоматически превратит его в идеальный круг. Этот параметр находится в правой панели Inspector, в разделе «Design». Там же можно использовать значок круга рядом с полем радиуса, чтобы быстро применить максимальное скругление.

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

Автоматизация с Auto Layout

Если вы используете Auto Layout, можно настроить динамическое поведение. Например:

• Создайте фрейм 60×60 px с Corner Radius = 30.
• Добавьте внутрь иконку и настройте её выравнивание по центру.
• Включите Auto Layout, выберите направление «Horizontal» и активируйте центрирование.
• Теперь при изменении содержимого (например, замене иконки) фрейм будет автоматически адаптироваться, сохраняя круглую форму.

Работа с изображениями и компонентами

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

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

Для компонентов круглая форма особенно удобна, потому что её можно переиспользовать. Создав один круглый аватар, вы можете превратить его в компонент, а затем создавать варианты: с онлайн-статусом, с бейджем, с рамкой. Все изменения будут синхронизированы через библиотеку стилей.

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

• Создайте фрейм 48×48 px, установите Corner Radius = 24.
• Добавьте изображение профиля внутрь фрейма.
• Если нужно точное обрезание — преобразуйте фрейм в маску (Cmd+Alt+M).
• Добавьте статус (зелёная точка в правом нижнем углу) как отдельный круг 8×8 px.
• Превратите всё в компонент и сохраните в библиотеке.

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

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

• Несимметричное скругление. Иногда дизайнеры случайно задают разные значения радиусов для разных углов. Решение: убедитесь, что все четыре поля Corner Radius имеют одинаковое значение, или используйте значок объединения радиусов.
• Овальная форма вместо круга. Возникает, когда фрейм не квадратный. Например, 100×120 px с радиусом 50 — это овал. Решение: всегда проверяйте соотношение сторон. Используйте квадрат (W = H).
• Маска не применяется. Часто из-за неправильного порядка слоёв. Figma применяет маску только к нижележащему слою. Решение: разместите маску выше содержимого, затем примените Cmd+Alt+M.
• Нечёткие края при экспорте. Особенно заметно при малых размерах (например, 16×16 px). Решение: экспортируйте в формате SVG или увеличьте размер перед растеризацией.

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

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

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

Заключение

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

• Для идеального круга всегда используйте квадратные размеры (W = H).
• Применяйте Corner Radius для простых фигур и Auto Layout — для динамических компонентов.
• Используйте маски только при необходимости точной обрезки изображений.
• Фиксируйте соотношение сторон, чтобы избежать деформации.
• Превращайте круглые элементы в компоненты для повторного использования.