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

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

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

В Figma скругление углов доступно практически для всех объектов: прямоугольников, фреймов, авто-расположений, фигур, созданных вручную, и даже некоторых текстовых блоков (при использовании обтёкания). Основной инструмент — поле Corner Radius в правой панели свойств (Inspector), которое появляется при выделении подходящего элемента.
Для стандартного прямоугольника процесс максимально прост: нарисуйте фигуру инструментом Rectangle, затем введите значение в поле Radius. Значение указывается в пикселях и может быть дробным (например, 8.5). При значении 0 углы будут острыми, а при увеличении числа — всё более закруглёнными. Максимальное значение зависит от размера фигуры: например, у квадрата 100×100 максимальный радиус скругления составит 50, что превратит его в идеальный круг.
Figma поддерживает два режима скругления: единое и индивидуальное. По умолчанию используется единое значение, применяемое ко всем четырём углам. Чтобы переключиться на индивидуальное управление, нужно нажать на иконку цепочки рядом с полем Radius. Если цепь разомкнута — можно задавать разные значения для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов.

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

Шаги для быстрого скругления

1. Выберите фигуру или фрейм с помощью стрелки (V) или нарисуйте прямоугольник (R).
2. В правой панели найдите раздел Rectangle или Frame.
3. Найдите поле Corner Radius и введите желаемое значение (например, 8).
4. При необходимости разомкните цепочку, чтобы задать разные значения для каждого угла.
5. Используйте клавиши со стрелками ↑↓ для точной настройки значения.

Тонкости работы с радиусами в Figma

На первый взгляд функция скругления выглядит тривиальной, но есть ряд особенностей, которые влияют на качество и согласованность дизайна. Например, Figma автоматически ограничивает максимальный радиус скругления, исходя из размеров стороны. У прямоугольника 200×60 максимальный радиус будет 30 — половина меньшей стороны. Это предотвращает визуальные искажения, такие как пересечение скруглённых краёв.
Ещё одна важная особенность — поведение скругления при масштабировании. Если вы изменяете размеры фигуры после применения радиуса, Figma сохраняет абсолютное значение Radius, а не пропорциональное. То есть, если вы сделали радиус 12 и увеличили ширину вдвое, радиус останется 12, а не станет 24. Это корректное поведение, так как дизайнеры обычно ожидают постоянства значения в пикселях.

Figma также позволяет сохранять стили скругления как стили слоя (Layer Style). Это особенно полезно при работе в команде или над дизайн-системой. Вы можете создать стиль с названием «Small Radius», «Card Corners» или «Pill Button» и применять его к любым фигурам с одинаковыми параметрами. Стиль сохраняет не только радиус, но и другие параметры: заливку, обводку, тени — что делает его универсальным инструментом стандартизации.

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

• Единый радиус — подходит для большинства случаев: карточки, кнопки, модальные окна, где требуется визуальная гармония.
• Индивидуальные углы — используются реже, но незаменимы при создании сложных форм: диаграмм, кастомных пузырей чатов, интерфейсов с ассиметричным дизайном.
• Полный круг (радиус = половине меньшей стороны) — применяется для аватаров, иконок, микроинтеракций.

Работа с отдельными углами: как настроить каждый угол отдельно

Иногда дизайн требует, чтобы, например, только верхние углы были закруглены — как у вкладки в браузере или шапки карточки. Figma позволяет это делать легко. После выделения фигуры разомкните цепочку в поле Corner Radius. Появятся четыре поля: Top-left, Top-right, Bottom-right, Bottom-left.
Введите нужные значения. Например, чтобы получить эффект «закруглённая сверху панель», установите:

• Top-left: 16
• Top-right: 16
• Bottom-right: 0
• Bottom-left: 0

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

Пример: создание пузыря чата

• Нарисуйте прямоугольник 200×60.
• Разомкните цепочку радиусов.
• Установите Top-left: 16, Top-right: 16, Bottom-right: 16, Bottom-left: 4 — последнее значение имитирует «хвостик» сообщения.
• Добавьте треугольник внизу как отдельный слой, чтобы завершить эффект.

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

Хотя встроенная система скругления в Figma уже очень гибкая, существуют плагины, расширяющие её возможности. Они особенно полезны при массовой обработке или когда нужны нестандартные эффекты.
Corner Editor — один из самых популярных плагинов. Он добавляет визуальный контроллер к каждому углу, позволяя мышью «тянуть» скругление, как в векторных редакторах. Также поддерживает сохранение пресетов: например, «Message Bubble», «Rounded Tab», «Sharp Callout».
Radius Resizer помогает быстро масштабировать радиусы всех выделенных объектов пропорционально. Полезно при адаптации макета под другой дизайн-системе.
Auto Corner Radius предлагает «умное» скругление: автоматически подстраивает радиус в зависимости от размера объекта, что приближает поведение к относительному (процентному) скруглению.

Ошибки, которые допускают новички

Несмотря на простоту функции, начинающие дизайнеры часто совершают типичные ошибки, которые снижают качество макета.
Первая — использование случайных значений радиусов. Например, кнопка с радиусом 7, карточка — 9, панель — 11. Это создаёт визуальный диссонанс. Решение — создать систему значений (например, 0, 4, 8, 12, 16, 24) и придерживаться её.
Вторая ошибка — игнорирование ограничений платформ. iOS рекомендует радиус около 10–12 для кнопок, Android Material Design — 4 или 8 для поверхности, 16+ для карточек. Несоблюдение этих норм может вызвать проблемы при передаче макета разработчикам.
Третья — попытка скруглить углы у объектов, которые не поддерживают эту операцию. Например, группы (Groups) не имеют параметра Corner Radius. Чтобы применить скругление, нужно либо разгруппировать, либо применить его к внутренним фигурам.

Как избежать распространённых проблем

• Создайте документ с глобальными стилями, включая стили скругления.
• Используйте компоненты: если кнопка имеет радиус 12, сделайте её компонентом и используйте экземпляры.
• Проверяйте макет на согласованность с помощью Inspect в Figma — разработчики увидят точные значения.

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

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

Рекомендуется использовать скругление в сочетании с другими визуальными сигналами: тенью, цветом, внутренним отступом. Например, карточка с радиусом 16 и лёгкой тенью выглядит объёмной и кликабельной, тогда как та же форма с радиусом 0 может восприниматься как просто блок текста.

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

«В современном дизайне скругление стало стандартом де-факто. Но многие забывают, что за этим стоит психология восприятия. Острые углы ассоциируются с опасностью, закруглённые — с комфортом. Именно поэтому Apple с 2017 года последовательно увеличивает радиусы во всех своих интерфейсах — от iOS до macOS.»

— Екатерина Миронова, руководитель отдела UX в дизайн-студии «Формат», 12 лет в индустрии

По её словам, лучшие практики включают:

• единые значения радиусов в рамках проекта;
• ограничение количества различных стилей скругления (максимум 4–5);
• согласование значений с разработкой (например, через переменные в коде).

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

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

Заключение

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

• Используйте единые значения радиусов в рамках проекта для согласованности.
• Применяйте индивидуальные радиусы для создания уникальных форм, таких как пузыри чатов.
• Сохраняйте стили скругления как Layer Styles для повторного использования.
• Избегайте случайных значений — придерживайтесь системы (например, 0, 8, 12, 16, 24).
• Учитывайте платформенные гайдлайны (iOS, Material Design) при выборе радиуса.