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

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

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

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

Базовые методы скругления углов

Самый простой способ скруглить края в Figma — использовать параметр Corner radius (радиус скругления) на панели свойств. Выделите любую прямоугольную фигуру, и в правом баре появится поле с иконкой уголка и числовым значением. По умолчанию оно равно 0, что означает острые углы. Измените значение — например, на 8 или 16 — и все четыре угла автоматически получат одинаковое скругление.

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

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

Для быстрой работы удобно использовать горячие клавиши. Хотя Figma не назначает отдельную комбинацию именно для скругления, вы можете быстро переключаться между инструментами и полями с помощью Tab и Enter. Также полезно знать, что при копировании стилей (Ctrl/Cmd+Alt+C) вместе с цветом и тенью копируется и радиус скругления, если используется функция «Copy Properties».

• Выделите фигуру с нужным скруглением.
• Нажмите Ctrl/Cmd+Alt+C, чтобы скопировать её свойства.
• Выделите другую фигуру и вставьте стили через Ctrl/Cmd+Alt+V.
• Убедитесь, что в настройках копирования включено «Corner radius».

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

Figma позволяет выделять несколько объектов и задавать им единый радиус скругления. Это особенно полезно при работе с компонентами интерфейса — например, группой кнопок или карточек. Просто зажмите Shift, выберите нужные фигуры и введите значение в поле Corner radius. Все выделенные объекты получат одинаковое скругление.

Однако будьте осторожны: если среди выбранных фигур есть круги или объекты с разными размерами, результат может быть неоднородным. Круги проигнорируют изменение, а узкие прямоугольники могут превратиться в капсулы быстрее, чем ожидалось. Лучше предварительно проверить тип и размеры объектов.

Независимое управление углами

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

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

Теперь вы можете:

• Установить радиус только для одного угла — например, сделать «закладку» в углу карточки.
• Создать форму «банан» — с разными радиусами на противоположных углах.
• Имитировать форму диалогового пузыря — скруглить три угла и оставить один острым.

Практический пример: создание диалогового окна с «хвостиком»

Представьте, что вы проектируете всплывающее уведомление. Оно должно иметь скруглённые края, но с «стрелкой» внизу — как классический пузырь чата.

1. Нарисуйте прямоугольник 200×120 с радиусом скругления 12.
2. Активируйте независимые углы.
3. Установите значение 0 для нижнего левого и нижнего правого углов.
4. Добавьте треугольник внизу — это будет «хвостик».
5. Сгруппируйте оба объекта или объедините в один векторный слой.

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

Продвинутые техники и хаки

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

Один из интересных подходов — использование плагинов. Например, плагин Corner Editor позволяет визуально редактировать углы с помощью точечного управления, а Radius Presets добавляет быстрые шаблоны: 4, 8, 12, 16 px — всё это можно применить одной кнопкой. Это экономит время при работе с дизайн-системой, где важна согласованность.

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

Анимация скругления в прототипах

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

• Создайте два фрейма: один с corner radius = 0, другой с radius = 50 (для квадрата 100×100).
• Свяжите их через прототип (перетащите стрелку перехода).
• Выберите тип анимации Smart Animate.
• Задайте длительность — например, 300 мс.

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

Распространённые ошибки и как их избежать

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

Первая — попытка скруглить линию или текст. В Figma линии не имеют ширины по умолчанию, поэтому скругление не применяется. Текст также нельзя скруглить напрямую — только через конвертацию в вектор (Outline). Чтобы скруглить текст, выберите его, нажмите Ctrl+Shift+O (или Cmd+Shift+O), и работайте с ним как с векторной фигурой.

Вторая ошибка — неправильное понимание порядка применения стилей. Если вы объедините несколько фигур с помощью Boolean operations (например, Union), скругление может исчезнуть. Это происходит потому, что Figma теряет информацию о радиусе при преобразовании. Решение — сохранить оригинальную фигуру как шаблон или использовать компоненты.

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

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

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

• Material Design: 4, 8, 12, 16, 28 px.
• iOS: 8–12 px для кнопок, 18 px для карточек.
• Figma Community: популярны системы с шагом 4px (4, 8, 12, 16).

Чтобы внедрить это в ваш проект, создайте стиль скругления. В правом баре нажмите на значок квадрата рядом с полем corner radius — появится палитра. Нажмите «+» и сохраните текущее значение как именованный стиль (например, «Small», «Medium», «Large»). Теперь его можно применять к любым фигурам через эту палитру.

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

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

По её словам, оптимальный радиус для интерактивных элементов — от 6 до 12 px. Меньше — почти незаметно, больше — может выглядеть «детским» или снижать воспринимаемую стабильность. Также важно учитывать масштаб: на мобильных экранах лучше использовать меньшие значения, чтобы не терять пространство.

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

Заключение

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

• Всегда начинайте с базового corner radius — это быстро и эффективно.
• Используйте независимые углы для создания уникальных форм и микроинтеракций.
• Сохраняйте стили скругления для командной согласованности.
• Избегайте случайных значений — придерживайтесь сетки (например, 4px).
• Тестируйте восприятие скруглённых элементов в прототипах.