Как закруглить углы в figma

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

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

Самый простой способ закруглить углы — использовать общий параметр Corner Radius (Радиус угла) в правой панели свойств. Этот параметр доступен для всех векторных фигур: прямоугольников, линий с заливкой, эллипсов и других геометрических элементов. При изменении значения автоматически применяется одинаковое скругление ко всем четырём углам.

Для этого достаточно выбрать инструмент «Прямоугольник» (R), нарисовать фигуру и ввести нужное значение в поле «Radius» в разделе «Design». Значение можно указывать в пикселях, например 8px для мягкого скругления или 100px для более выраженного эффекта. Figma поддерживает дробные числа, что позволяет добиться точной настройки.

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

Пошаговый алгоритм:

1. Выберите фигуру с помощью инструмента «Стрелка» (V).
2. В правой панели найдите секцию «Corner Radius».
3. Введите значение в пикселях (например, 12).
4. Убедитесь, что иконка замка закрыта — это означает, что все углы связаны.
5. Проверьте результат на холсте.

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

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

Для этого нужно разомкнуть связь между углами. Просто кликните по иконке замка в поле Corner Radius — она станет открытой. После этого вы увидите четыре отдельных поля. Каждое из них соответствует одному углу, начиная с верхнего левого и по часовой стрелке.

Вы можете комбинировать значения по своему усмотрению. Например, установить 16px для верхних углов и 0px для нижних. Это часто используется в карточках продуктов, где требуется визуальное разделение содержимого. Также полезно при создании сложных форм, таких как чатовые пузыри или кастомные кнопки.

Особенности скругления углов у фреймов и авто-расположений

Фреймы в Figma ведут себя иначе, чем обычные фигуры. По умолчанию у фрейма нет заливки и обводки, поэтому скругление углов не видно. Чтобы применить радиус, необходимо либо добавить заливку, либо включить обводку. Только тогда параметр Corner Radius станет активным.

Особенно важно учитывать поведение скругления при использовании Auto Layout. Если внутри фрейма с Auto Layout находится дочерний элемент с меньшим радиусом, визуально это может выглядеть неаккуратно. Рекомендуется согласовывать значения радиусов между родительским и дочерними объектами.

Кроме того, при вложении одного фрейма в другой с закруглёнными углами возможны наложения. Например, внутренний элемент может выходить за границы скруглённого угла. В этом случае помогает маскирование: включите опцию «Clipping» (Обрезка содержимого) в правой панели. Тогда всё, что выходит за пределы фрейма, будет скрыто.

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

• Создайте фрейм нужного размера (например, 320×200 px).
• Задайте ему радиус скругления — например, 12px.
• Добавьте заливку (например, белую) и тень (Drop Shadow).
• Внутрь поместите изображение и текст.
• Включите Clipping, чтобы изображение не выходило за углы.

Такой подход обеспечивает чистый и профессиональный вид, особенно при экспорте или презентации.

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

Figma позволяет не только задавать радиус через панель, но и напрямую редактировать векторные узлы. Это даёт максимальный контроль над формой. Выбрав инструмент «Редактирование узлов» (N), вы можете кликнуть на любой угол и потянуть ручку, чтобы вручную изменить степень скругления.

При этом важно понимать, что при ручном редактировании теряется параметрическая связь. То есть, если вы потянули ручку, Figma больше не будет отображать значение радиуса в панели свойств — оно станет «—». Такой объект уже нельзя будет легко отредактировать через числовые поля.

Однако, если вам нужно временно изменить форму, а потом вернуться к параметрическому контролю, можно воспользоваться командой «Reset handles» (Сбросить ручки). Для этого кликните правой кнопкой по узлу и выберите соответствующий пункт. После этого радиус снова станет управляемым через панель.

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

• Создание несимметричных форм, например, каплевидных кнопок.
• Адаптация готовых SVG-иконок под стиль проекта.
• Сложные переходы между прямыми и кривыми участками.

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

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

Одной из самых частых ошибок является попытка скруглить углы у группы объектов. Группы в Figma не поддерживают параметр Corner Radius. Если вы выделили несколько фигур и не видите поле радиуса — скорее всего, они сгруппированы. Решение простое: разгруппируйте (Ctrl+Shift+G) или объедините в один векторный объект.

Другая распространённая проблема — несоответствие скругления при масштабировании. Если вы увеличиваете фигуру, радиус остаётся прежним. Это может нарушить пропорции. Например, кнопка с радиусом 8px при увеличении вдвое должна иметь радиус 16px для сохранения визуального баланса. Лучше заранее продумать масштабируемость или использовать компоненты.

Также дизайнеры часто забывают, что скругление не наследуется при копировании стилей. Если вы копируете заливку и обводку, радиус угла не передаётся. Для повторного использования параметров лучше создавать компоненты или использовать Style Libraries.

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

Правильное скругление углов — это не просто техническая операция, а часть визуальной иерархии. Исследования показывают, что пользователи воспринимают закруглённые формы как более дружелюбные и безопасные. Например, в одном из исследований Stanford Persuasive Tech Lab было установлено, что интерфейсы с мягкими углами получают на 23% больше положительных отзывов.

Однако чрезмерное скругление может сделать интерфейс «слишком мягким» и несерьёзным. Для финансовых приложений или корпоративных платформ лучше использовать умеренные значения — 4–8px. Для молодёжных сервисов, медиа или игр допустимы более смелые решения — до 16–24px.

Рекомендуемые значения по типу интерфейса:

• Корпоративные системы: 4–6 px
• Мобильные приложения: 8–12 px
• Медиа и соцсети: 12–16 px
• Детские и образовательные платформы: 16–24 px

Также стоит учитывать плотность макета. В плотных интерфейсах (например, дашборды) большие скругления могут «перегружать» глаз. Здесь лучше придерживаться минимализма.

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

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

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

Заключение

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

• Для быстрого скругления используйте поле Corner Radius в панели свойств.
• Разомкните замок, чтобы задать разные значения для каждого угла.
• Фреймы требуют заливки или обводки для отображения скругления.
• Избегайте ручного редактирования узлов, если не нужна максимальная свобода.
• Соблюдайте консистентность значений в рамках дизайн-системы.