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

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

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

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

Наиболее простой метод — использование инструмента Rectangle (R) и последующая настройка параметра Corner Radius в правой панели Inspector. Достаточно нарисовать прямоугольник, выделить его и изменить значение радиуса. Это работает не только для прямоугольников, но и для других фигур, таких как рамки, линии с толщиной и даже текстовые блоки с фоном.

Для более сложных форм, например, многоугольников или кастомных контуров, придётся использовать векторный режим. Здесь скругление достигается путём добавления сглаженных узлов (smooth points) или применения команды «Round Corners» через плагины.

Если вы работаете с готовыми иконками или импортированными SVG, важно помнить, что их узлы могут быть жёстко зафиксированы. В таком случае прямое скругление через Corner Radius недоступно — нужно разбить контур и редактировать каждый угол отдельно.

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

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

Этот процесс мгновенный и не требует дополнительных действий. Однако он даёт лишь равномерное скругление — все четыре угла получают одинаковый радиус.

Настройка радиуса скругления

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

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

Figma позволяет использовать как абсолютные значения, так и относительные единицы, если проект синхронизирован с плагинами или кодовой базой. Например, при интеграции с Zeplin или через API можно передавать значения в rem или dp.

Кроме того, Figma поддерживает горячие клавиши для быстрого изменения радиуса:

• Ctrl + ←/→ (Win) или Cmd + ←/→ (Mac) — уменьшает или увеличивает радиус на 1 px.
• Shift + Ctrl/Cmd + ←/→ — изменяет шаг на 10 px.

Это значительно ускоряет работу, особенно при тонкой настройке.

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

Скругление разных углов фигуры

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

Для этого в панели свойств есть значок ссылки между полями скругления. По умолчанию все четыре угла связаны. Чтобы разорвать связь, нажмите на иконку цепи — она станет разорванной. После этого можно вводить разные значения для Top Left, Top Right, Bottom Right и Bottom Left.

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

• Top Left: 16 px
• Top Right: 16 px
• Bottom Left: 0 px
• Bottom Right: 0 px

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

Практический пример: закруглённая шапка модального окна

1. Создайте прямоугольник размером 320×500 px.
2. Разъедините значения скругления.
3. Установите Top Left и Top Right = 20 px.
4. Остальные углы оставьте 0 px.
5. Добавьте тень и заголовок — готово.

Такой элемент будет визуально «прилипать» к верхней части экрана, как в iOS.

Работа с векторными узлами

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

Чтобы начать, преобразуйте фигуру в вектор: выделите объект и нажмите Ctrl+Shift+K (Cmd+Shift+K на Mac). Теперь вы можете использовать инструмент Edit Object (A), чтобы перемещать узлы и ручки Безье.

Для сглаживания угла:

• Выберите два соседних узла.
• Щёлкните правой кнопкой мыши и выберите «Smooth».
• Ручки Безье автоматически выровняются, создавая плавную кривую.

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

Для массового скругления углов существуют сторонние плагины, такие как Round Any Corner или Super Round. Они позволяют выбрать объект и указать желаемый радиус — плагин сам добавит сглаженные узлы.

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

• При работе с нестандартными формами (стрелки, облака, иконки).
• Если нужно несимметричное или очень точное скругление.
• Для импортированных SVG без встроенного Corner Radius.
• Когда требуется анимировать форму в Prototyping.

Динамическое скругление в компонентах

Одно из самых мощных применений скругления — создание вариативных компонентов (component variants) с настраиваемым радиусом. Это позволяет дизайнерам быстро переключаться между разными стилями одной кнопки: острой, слегка закруглённой или полностью круглой.

Для этого:

1. Создайте базовый компонент (например, кнопку).
2. В панели свойств добавьте свойство «Corner Radius» как variant property.
3. Создайте несколько вариантов: 0 px, 8 px, 16 px, 999 px (для полного скругления).
4. Теперь при использовании компонента в экземпляре можно выбирать нужный стиль.

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

Кроме того, можно комбинировать скругление с другими свойствами — цветом, размером, тенью — создавая комплексные варианты компонентов.

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

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

Первая ошибка — попытка скруглить группу объектов, которая не является вектором. Figma не применяет Corner Radius к группам, если они не объединены в фрейм или не конвертированы. Решение: либо использовать фрейм, либо выполнить «Detach and Edit».

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

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

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

• Является ли объект вектором или примитивом?
• Не превышает ли радиус половину короткой стороны?
• Развязаны ли углы, если нужно разное скругление?
• Не заблокированы ли слои или группы?
• Сохранена ли копия оригинальной формы?

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

По её словам, правильное скругление снижает когнитивную нагрузку: глаз легче движется по плавным линиям. Она рекомендует использовать градацию: 4 px — для текстовых полей, 8 px — для кнопок, 16 px — для карточек, 24 px и выше — для модальных окон.

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

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

Заключение

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

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

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