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

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

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

С развитием дизайн-систем, таких как Material Design от Google или Human Interface Guidelines от Apple, использование скруглённых углов стало не просто трендом, а осознанным решением. Например, кнопки, карточки, модальные окна — всё это чаще всего имеет закруглённые края. Поэтому понимание того, как быстро и точно выполнить эту операцию в Figma, критически важно для эффективной работы.

Базовое скругление углов

Самый простой способ закруглить углы у прямоугольника в Figma — использовать встроенный параметр радиуса скругления. После создания прямоугольника с помощью инструмента Rectangle (R), выделите его и перейдите в верхнюю панель свойств. Там вы найдёте поле с иконкой уголка и числовым значением — это и есть радиус скругления.

По умолчанию все четыре угла имеют одинаковый радиус. Достаточно ввести нужное значение в пикселях (например, 8, 12, 16), и углы мгновенно станут скруглёнными. Можно использовать как целые, так и дробные числа — Figma поддерживает значения с точностью до 0.1 px.

Для быстрой настройки удобно использовать стрелки ввода: кликните по стрелкам вверх/вниз рядом с полем радиуса, чтобы увеличить или уменьшить значение с шагом 1 px. Также можно использовать горячие клавиши: после выделения фигуры нажмите Ctrl/Cmd + Shift + , — это уменьшит радиус, а Ctrl/Cmd + Shift + . — увеличит.

Шаги для базового скругления:

1. Выберите инструмент Rectangle (R) и нарисуйте прямоугольник.
2. Выделите фигуру, если она ещё не выбрана.
3. В верхней панели свойств найдите поле «Corner radius».
4. Введите желаемое значение (например, 12).
5. Убедитесь, что иконка скругления активна (не серая).

Если вы часто используете определённый радиус (например, 8 px для кнопок), рекомендуется сохранить такой прямоугольник как компонент или стилизовать его через библиотеку стилей. Это ускорит работу и обеспечит единообразие в проекте.

Индивидуальная настройка каждого угла

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

Чтобы включить индивидуальную настройку, найдите в верхней панели свойств иконку с четырьмя квадратами рядом с полем радиуса. По умолчанию она отключена (значения всех углов связаны). Кликните по ней, чтобы разъединить параметры.

После этого станут доступны четыре отдельных поля:

• Top Left — левый верхний угол;
• Top Right — правый верхний угол;
• Bottom Right — правый нижний угол;
• Bottom Left — левый нижний угол.

Теперь вы можете задать, например, только верхние углы с радиусом 12 px, а нижние оставить острыми — это часто используется в модальных окнах, имитирующих поведение iOS.

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

• Форма чата: нижние углы закруглены, верхние — острые или частично скруглены для имитации пузыря сообщения.
• Кнопка-акцент: один угол закруглён больше остальных для визуального акцента.
• Карточка с фокусом: три угла скруглены, четвёртый — острый, чтобы направлять взгляд пользователя.

Такой уровень контроля делает Figma гибким инструментом, сравнимым с векторными редакторами, но без потери скорости прототипирования.

Продвинутые методы: маски и плагины

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

Один из способов — наложение маски с закруглёнными углами на изображение или группу объектов. Создайте прямоугольник с нужным радиусом, затем выделите его вместе с целевым объектом и нажмите Ctrl/Cmd + Alt + M. Теперь содержимое будет обрезано по форме с закруглёнными краями.

Также существуют плагины, расширяющие возможности скругления:

• Corner Editor — позволяет визуально редактировать каждый угол с помощью маркеров.
• Smart Radius — автоматически подбирает оптимальный радиус в зависимости от размера фигуры.
• Radius Manager — помогает синхронизировать значения скругления в рамках дизайн-системы.

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

Эти методы особенно актуальны при работе над брендированными интерфейсами, где требуется уникальность и внимание к деталям.

Использование скруглений в дизайн-системах

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

Например, в дизайн-системе может быть определено:

• Small Radius: 4 px — для иконок, чекбоксов;
• Medium Radius: 8 px — для кнопок, полей ввода;
• Large Radius: 16 px — для карточек, модальных окон;
• Full Circle: 9999 px — для круглых элементов (Figma интерпретирует это как полный круг).

Такие значения можно сохранить как стили скругления. Для этого:

1. Настройте нужный радиус у фигуры.
2. Нажмите на значок «+» рядом с полем Corner radius в панели свойств.
3. Назовите стиль (например, «Button / Medium»).
4. Теперь его можно применять к другим фигурам через выпадающий список.

Преимущества использования стилей:

• Единый визуальный язык во всём проекте.
• Быстрое обновление — изменение стиля затрагивает все связанные элементы.
• Упрощение передачи макетов разработчикам.
• Поддержка темной и светлой темы с разными радиусами (если нужно).

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

Даже опытные дизайнеры иногда допускают ошибки при работе со скруглением. Вот наиболее распространённые:

• Слишком большой радиус — когда радиус превышает половину высоты или ширины, фигура может выглядеть искажённо. Figma корректирует это автоматически, но лучше контролировать пропорции.
• Несогласованные значения — использование разных радиусов для однотипных элементов (например, одна кнопка с 6 px, другая — с 8 px) нарушает целостность интерфейса.
• Забытые маски — после применения маски легко забыть, что объект обрезан. При изменении размера контента он может не отображаться полностью.
• Игнорирование стилей — ручной ввод значений замедляет работу и увеличивает риск ошибки.

Как исправить ошибки:

1. Используйте режим Outline (O), чтобы видеть границы всех объектов, включая маски.
2. Регулярно сверяйтесь с библиотекой стилей.
3. Проводите аудит скруглений перед передачей макетов разработчикам.
4. Настройте плагин Design Lint для автоматического поиска несоответствий.

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

Также важно учитывать контекст. В финансовых или медицинских приложениях чрезмерное скругление может выглядеть слишком игриво. Здесь лучше придерживаться умеренных значений — 4–6 px. В детских или образовательных приложениях, напротив, большие радиусы (12–16 px) создают дружелюбную атмосферу.

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

Заключение

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

• Базовое скругление выполняется через поле Corner radius в верхней панели.
• Для разных значений по углам разъедините параметры с помощью иконки привязки.
• Сохраняйте часто используемые радиусы как стили для единообразия.
• Используйте маски и плагины для сложных задач.
• Избегайте типичных ошибок: несогласованных значений и чрезмерного радиуса.