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

Прямоугольники с закруглёнными углами — один из ключевых элементов современного дизайна интерфейсов. В Figma они используются повсеместно: от кнопок и карточек до сложных компонентов. Закругление углов в Figma выполняется быстро и гибко, но новички часто сталкиваются с трудностями — например, не знают, как задать разные радиусы для каждого угла или как применить скругления к уже существующим фигурам. Главное — использовать параметр Corner Radius (Радиус угла) в панели свойств справа. Достаточно выделить прямоугольник и изменить значение в поле «Radius» — и углы станут плавными.

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

Основные шаги закругления

Закругление углов прямоугольника в Figma — это простая операция, доступная даже новичкам. Первое, что нужно сделать — создать прямоугольник с помощью инструмента Rectangle (R) или выбрать уже существующий объект. После выделения фигуры в правой панели свойств появится раздел с параметрами формы, включая поле Radius.

• Выделите прямоугольник с помощью инструмента Selection (V).
• Найдите в правом верхнем углу редактора блок «Properties».
• В секции «Corners» найдите поле «Radius» и введите желаемое значение в пикселях.
• Углы автоматически станут закруглёнными.

Значение по умолчанию — 0 px. Увеличение числа приводит к более плавному скруглению. Например, 8 px подходит для кнопок, 16 px — для карточек, а 100 px может использоваться для круглых аватаров. Figma мгновенно обновляет отображение фигуры, что позволяет визуально оценивать результат в реальном времени.

Figma также поддерживает горячие клавиши для быстрого доступа. Нажав R, вы активируете инструмент прямоугольника, а после создания фигуры можно сразу начать вводить число — например, 12 — и нажать Enter, чтобы установить радиус. Это ускоряет процесс при массовом создании элементов.

Как работает радиус в Figma

Радиус угла — это расстояние от вершины угла до точки, где начинается закругление. Чем больше значение, тем «мягче» выглядит угол. В Figma максимальное значение ограничено половиной длины короткой стороны прямоугольника. Например, если ширина фигуры — 40 px, максимальный радиус составит 20 px, иначе фигура превратится в овал.

Настройка углов индивидуально

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

1. Выделите прямоугольник.
2. В поле Radius найдите иконку цепочки, расположенную между числами.
3. Нажмите на неё, чтобы «разорвать» связь между углами.
4. Теперь вы можете ввести разные значения для Top-left, Top-right, Bottom-right, Bottom-left.

Например, чтобы создать контейнер с закруглёнными только верхними углами, установите:

• Top-left: 12 px
• Top-right: 12 px
• Bottom-left: 0 px
• Bottom-right: 0 px

Это особенно полезно при проектировании модальных окон, таббаров или карточек, которые плавно переходят в фон.

Советы по точной настройке

• Используйте стрелки клавиатуры для точного изменения значений: кликните по полю радиуса и нажимайте ↑/↓ для шага в 1 px.
• Для крупных изменений удерживайте Shift + стрелку — шаг увеличится до 10 px.
• Щёлкните по числу и вращайте колесо мыши (при включённой поддержке в настройках Figma), чтобы быстро менять значение.

Figma также позволяет копировать стиль скругления с одной фигуры на другую. Выделите объект с нужными радиусами, нажмите Alt+Click (Win) / Option+Click (Mac) по нему, затем Alt+Click по целевой фигуре — параметры углов будут скопированы.

Работа со стилями и компонентами

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

1. Настройте радиусы на любой фигуре так, как вам нужно.
2. Выделите эту фигуру.
3. В правой панели найдите раздел «Effects & Strokes», нажмите иконку «+» рядом с «Corner Radii».
4. Введите название стиля, например, «Card Radius 12» или «Button Soft Corners».

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

Использование в компонентах и вариантах

Если вы создаёте компоненты (Components), такие как кнопки или табы, скругления становятся частью шаблона. При создании вариантов (Variants) можно задать разные радиусы как отдельные состояния. Например:

• Primary Button: Radius 8 px
• Pill Button: Radius 999 px (визуально круглый)
• Square Button: Radius 0 px

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

Ошибки и как их избежать

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

• Смешение радиусов в одном интерфейсе. Использование 6.5 px, 7 px и 8 px для похожих элементов делает интерфейс визуально «дрожащим». Решение — стандартизация через стили.
• Забытые разъединённые углы. После индивидуальной настройки легко забыть, что углы не синхронизированы. Это может привести к ошибкам при масштабировании или редактировании.
• Скругление несуществующих фигур. Попытка изменить радиус у группы или фрейма без внутренней фигуры не даст результата. Нужно работать именно с векторными объектами.

Как проверить и исправить

1. Регулярно проверяйте, какие стили скруглений используются в проекте, через панель «Design» в плагинах вроде Stark или Styles Manager.
2. Используйте режим «Outline» (⌘+Alt+O), чтобы видеть границы всех фигур и находить аномалии.
3. Применяйте авто-расчёт: при изменении размера фигуры с большим радиусом Figma сама корректирует его, если он превышает допустимое значение.

Распространённые сценарии использования

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

• Кнопки: радиус 8–12 px — стандарт для большинства интерфейсов. Pill-кнопки (999 px) используются для фильтров и переключателей.
• Карточки: 12–16 px создают ощущение лёгкости и современности.
• Модальные окна: закругляются только верхние углы, если окно «выезжает» снизу (iOS-паттерн).
• Аватары: радиус 50% от ширины превращает квадрат в круг.

В мобильных приложениях Apple активно использует скругления в интерфейсе: например, модальные листы в iOS имеют радиус около 16 px в верхних углах. Копирование таких паттернов повышает привычность интерфейса.

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

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

• Используйте единые значения радиусов в рамках одного проекта.
• Не злоупотребляйте разными скруглениями — это усложняет чтение интерфейса.
• Автоматизируйте через стили и компоненты, особенно в дизайн-системах.
• Тестируйте формы на пользователях: иногда квадратные кнопки работают лучше в нишевых нишах (например, в B2B-интерфейсах).

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

Заключение

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

• Используйте поле Radius в правой панели для быстрого закругления.
• Разъединяйте углы через иконку цепи для индивидуальной настройки.
• Создавайте стили скруглений для единообразия в проекте.
• Следите за ограничениями: радиус не может превышать половину стороны.
• Применяйте best practices платформенных гайдлайнов (Material, iOS).