Как закруглить углы прямоугольника в фигме

Представьте, что вы проектируете интерфейс мобильного приложения — кнопки, карточки, модальные окна. Всё выглядит современно, стильно, но углы остались резкими, как у старой кнопки Windows 95. Это не просто эстетическая проблема: округлённые углы повышают воспринимаемую дружелюбность интерфейса, улучшают визуальную иерархию и соответствуют современным гайдлайнам Material Design и Human Interface Guidelines. В Figma, как в мощнейшем инструменте для UI/UX-дизайна, закругление углов — базовая, но часто неправильно используемая функция. Многие новички тратят минуты на ручное рисование скруглений, не зная о встроенном инструменте. Другие — слишком сильно закругляют, превращая прямоугольник в овал. В этой статье вы узнаете, как точно, быстро и профессионально закруглять углы в Figma, избегая распространённых ошибок, используя продвинутые техники и получая гибкий контроль над каждым углом отдельно.

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

Закругление углов — одна из самых простых, но при этом самых востребованных операций в Figma. Начните с создания прямоугольника: выберите инструмент Rectangle (R) на панели слева и нарисуйте фигуру на холсте. Как только фигура создана, Figma автоматически открывает панель свойств справа. В разделе Design вы увидите поле Corner Radius. Именно здесь и происходит всё магическое.

Введите любое числовое значение — например, 8, 12 или 24. Figma мгновенно применит закругление ко всем четырём углам равномерно. Значение измеряется в пикселях, и его можно задавать как вручную, так и с помощью ползунка. Достаточно кликнуть по полю и использовать стрелки клавиатуры для точной настройки. Если вы работаете с компонентами или стилевыми системами, это значение можно привязать к переменным — например, $corner-radius-small — и менять его в одном месте для всего дизайна.

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

Как закруглить каждый угол по-разному

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

Щёлкните по полю Corner Radius — рядом с ним появится значок цепочки. Этот значок означает, что все четыре угла синхронизированы. Чтобы разъединить их, просто кликните по цепочке — она исчезнет. Теперь вы видите четыре отдельных поля: Top Left, Top Right, Bottom Right, Bottom Left. Каждое можно настраивать независимо.

Представьте, что вы проектируете табличный интерфейс с вкладками. Верхние углы вкладки должны быть закруглены, чтобы визуально «прилипать» к панели, а нижние — острыми, чтобы не пересекаться с контентом. Выставьте Top Left = 12, Top Right = 12, а Bottom Left и Bottom Right = 0. Готово — без лишних слоёв и масок.

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

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

Первая ошибка — слишком большое значение. Если вы задаёте радиус 50% от высоты прямоугольника, он превращается в эллипс. Например, прямоугольник 40×40 пикселей с радиусом 20 — это круг. Это не всегда плохо, но если вы ожидали скруглённый прямоугольник — это ошибка. Решение: никогда не превышайте половину меньшей стороны фигуры.

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

Третья — игнорирование контекста. Закругление должно соответствовать стилю продукта. В корпоративном интерфейсе — минимальные скругления (2–4 пикселя). В приложении для детей — большие (16–24). В дизайне для пожилых пользователей — чёткие, но не резкие углы. Помните: закругление — это не декор, а часть системы доступности.

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

Лучшие практики закругления углов

Современные гайдлайны Apple, Google и Microsoft едины в одном: скругление — это инструмент визуальной иерархии, а не декор. Вот как применять его правильно.

1. Создайте систему радиусов. Определите 3–4 стандартных значения: 2px (текстовые поля), 8px (кнопки), 16px (модальные окна), 24px (карточки с изображениями). Запишите их в Design System и используйте как переменные.
2. Используйте компоненты с параметрами. В Figma можно создать компонент, у которого радиус — это переменный параметр. Тогда дизайнеры могут выбирать между «маленький», «средний», «круглый» без ручной настройки.
3. Проверяйте на разных экранах. Закругление 8px на 320px ширине — это 2,5% от ширины. На 1440px — это 0,5%. Визуально это выглядит по-разному. Протестируйте на макете с разными разрешениями.
4. Соблюдайте контраст. Если фон светлый, а кнопка — тёмная, слишком большие скругления могут «растворять» форму. Используйте тонкие границы (1px) для чёткости.

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

Закругление углов — это не только про форму. Это про взаимодействие с другими эффектами.

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

Для анимаций в Figma (например, при переходе между экранами) используйте Auto-Animate. Если вы переходите от прямоугольника с радиусом 0 к прямоугольнику с радиусом 12 — Figma плавно анимирует изменение формы. Это создаёт ощущение естественного движения. Но будьте осторожны: если у двух объектов разное количество углов (например, один — прямоугольник, другой — круг), анимация не сработает. Убедитесь, что формы совпадают по типу.

Если вам нужно закруглить только часть углов у сложной фигуры — например, у многоугольника — используйте маску. Создайте прямоугольник с нужными скруглениями, поместите его поверх нужной области, выделите оба объекта и нажмите Mask (Ctrl+Alt+M). Теперь только часть фигуры внутри маски будет видна — с нужным радиусом.

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

Соколов рекомендует всегда проводить микро-тесты: даже небольшие изменения в радиусе влияют на поведение. Он также отмечает: «Не бойтесь экспериментировать с асимметричными скруглениями — они отлично работают в навигационных элементах, где важно подчеркнуть активный элемент. Но делайте это осознанно — не для “стиля”, а для управления вниманием».

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

Заключение

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

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

• Используйте поле Corner Radius в панели свойств — это самый быстрый способ.
• Отключайте цепочку, чтобы задавать разные радиусы для каждого угла.
• Не превышайте половину меньшей стороны фигуры — иначе получите круг.
• Создавайте систему радиусов и применяйте её через стили и компоненты.
• Всегда проверяйте, как выглядят закругления на разных экранах и масштабах.