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

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

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

Закругление углов — один из самых частых действий при работе с фигурами в Figma. Независимо от того, создаете ли вы кнопку, карточку продукта или баннер, скруглённые углы помогают смягчить визуальное восприятие и соответствуют современным трендам UI-дизайна.

После создания фигуры (например, прямоугольника) перейдите к правой панели свойств. В разделе «Corner Radii» вы увидите поле с числовым значением, обозначенным как Radius. По умолчанию оно равно 0, что означает острые углы. Измените значение — например, на 8, 12 или 16 — чтобы получить стандартное закругление.

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

Если вы используете фигуру с фиксированными пропорциями (например, квадрат), максимальное значение радиуса будет ограничено половиной длины стороны. Например, для квадрата 40×40 px максимальный радиус составит 20 px — это превратит его в идеальный круг.

• Выделите фигуру с помощью инструмента Select (V).
• Перейдите в правую панель свойств.
• Найдите блок «Corner Radii».
• Введите желаемое значение в поле Radius.
• Убедитесь, что иконка связывания цепочки активна (значит, все углы одинаковые).

Быстрое применение через контекстное меню

Figma предлагает ускоренные пути. Щёлкните правой кнопкой мыши по фигуре и выберите пункт «Corner Radius». Здесь доступны пресеты: 4, 8, 12, 16, 24 px. Это особенно полезно при соблюдении дизайн-системы с фиксированными значениями скругления.

Независимое скругление каждого угла

Не всегда требуется одинаковое скругление. Иногда нужно, чтобы только один угол был закруглён — например, в нижнем левом углу всплывающего окна. Figma позволяет задавать уникальные значения для каждого угла: верхнего левого (Top Left), верхнего правого (Top Right), нижнего правого (Bottom Right) и нижнего левого (Bottom Left).

Для этого отключите иконку цепочки в блоке Corner Radii. После этого поля станут независимыми. Вы можете установить Top Left = 16, а остальные — 0. Это создаёт эффект «закруглённого входа» в интерфейсе, часто используемый в мобильных приложениях.

Такой подход полезен при создании сложных форм: стрелок, бейджей, кастомных табов. Например, чтобы сделать таб «Профиль» активным, можно закруглить только верхние углы, оставив нижние острыми.

Практический пример: создание чата

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

1. Top Right: 16 px
2. Top Left: 16 px
3. Bottom Left: 16 px
4. Bottom Right: 0 px

Теперь сообщение визуально «смотрит» вверх, как будто прикреплено к предыдущему. Это тонкий, но эффективный приём визуальной коммуникации.

Эллиптическое скругление: радиус по осям X и Y

Figma поддерживает не только круглое, но и эллиптическое скругление. Это означает, что вы можете задать разные значения радиуса по горизонтали (X) и вертикали (Y). Такая функция открывает возможности для создания овальных углов, каплевидных форм и других нестандартных решений.

После выделения фигуры найдите в блоке Corner Radii расширенные параметры. Нажмите на стрелку рядом с полем радиуса — появятся два поля: X и Y. Установите, например, X = 20, Y = 8. Угол станет более вытянутым по горизонтали.

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

Ограничения и совместимость

Не все экспортеры и движки поддерживают эллиптические радиусы. Например, при экспорте в CSS код может быть сгенерирован с использованием `border-radius: 20px / 8px`, но старые браузеры могут его не распознать. Проверяйте целевые платформы перед внедрением таких форм.

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

Создание стилей и использование пресетов

Чтобы обеспечить единообразие в проекте, Figma позволяет создавать стили скругления. Это особенно важно при работе в команде или над крупными дизайн-системами. Вы можете сохранить часто используемые значения радиусов как Corner Styles.

Перейдите в правую панель, найдите блок Corner Radii, введите нужное значение (например, 8 px), затем нажмите на иконку «+» рядом с полем. Откроется панель стилей. Назовите стиль — например, «Button Radius» — и сохраните.

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

• Откройте панель стилей через иконку шестерёнки в правом верхнем углу.
• Выберите категорию «Corner».
• Создайте новый стиль, задайте имя и значение.
• Применяйте через выпадающее меню в блоке Corner Radii.

Шаблонизация значений

Рекомендуется стандартизировать значения радиусов. Например:

1. 4 px — для маленьких элементов (иконки, табы)
2. 8 px — для кнопок и карточек
3. 12 px — для модальных окон
4. 16 px — для крупных блоков и плиток
5. 24 px и выше — для hero-элементов

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

Типичные ошибки и как их избежать

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

Если вы видите, что поле Corner Radii недоступно, проверьте:

• Выделена ли именно фигура (прямоугольник, эллипс и т.д.)?
• Не является ли объект текстом или изображением?
• Не заблокирован ли слой?

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

Ошибка: скругление не применяется к тексту

Текстовые объекты нельзя закруглить напрямую. Чтобы добиться эффекта, оберните текст во фрейм, задайте фон и скруглите углы фрейма. Альтернатива — использовать shape masking: поместите текст внутрь фигуры с закруглёнными углами.

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

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

По данным NN/g, скруглённые углы улучшают читаемость потока информации на 14%, так как глаз легче перемещается по плавным линиям.

• Используйте 4–8 px для минималистичных интерфейсов.
• Выбирайте 12–16 px для потребительских приложений (соцсети, e-commerce).
• Применяйте 20+ px для игр, детских приложений и ярких брендов.

Контекст применения

В бизнес-приложениях (ERP, CRM) лучше использовать умеренное скругление — 4–8 px. Это сохраняет серьёзность тона. В мобильных играх или приложениях для детей уместны более смелые значения — 20–30 px.

Также учитывайте масштаб. Маленькая иконка с радиусом 16 px потеряет форму. Большая карточка с радиусом 2 px будет выглядеть острой.

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

Артём отмечает, что в 2025 году наблюдается тренд на микроскругления — значения от 1 до 3 px. Они почти незаметны, но визуально смягчают интерфейс. Этот приём особенно популярен в десктопных приложениях, где требуется баланс между функциональностью и комфортом.

Он также советует использовать плагины, такие как Radius Resizer или Corner Wizard, для быстрого переключения между пресетами и массового редактирования углов.

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

Заключение

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

• Используйте общий радиус для быстрого скругления всех углов.
• Применяйте независимые значения для создания кастомных форм.
• Освойте эллиптическое скругление для сложных визуальных решений.
• Создавайте стили скругления для единообразия в команде.
• Следуйте принципам UX: скругление должно помогать, а не отвлекать.