Острые углы режут глаз, а закругленные — успокаивают и создают ощущение продуманности интерфейса. Figma предлагает десяток способов работы с Corner Radius, но большинство дизайнеров используют только один — самый очевидный. Между тем, правильное применение скругления углов может сэкономить часы работы и радикально улучшить визуальную согласованность проекта. Если вы всё ещё кликаете по каждой фигуре отдельно и вручную вбиваете значения — эта статья для вас. Разберём все методы скругления: от элементарных до тех, о которых не пишут в официальной документации.
Базовые способы скругления углов в Figma
Скругление углов в Figma — это первое, что осваивают новички после создания прямоугольника. Функция Corner Radius встроена в свойства любой векторной фигуры и доступна через правую панель Properties. Чтобы применить базовое скругление, выделите объект и введите числовое значение в поле с иконкой четырёх углов. Значение измеряется в пикселях и применяется ко всем углам одновременно.
Большинство дизайнеров останавливаются на этом уровне, но уже здесь можно допустить ошибку. Например, применить слишком большое значение скругления к маленькому элементу — Figma автоматически ограничит радиус, но визуально это выглядит неряшливо. Оптимальное соотношение: радиус скругления не должен превышать половины наименьшей стороны фигуры.
| Тип фигуры | Рекомендуемое скругление | Примечание |
| Кнопки | 4–8 px | Универсальное значение для UI-элементов |
| Карточки | 12–16 px | Создаёт ощущение контейнера |
| Модальные окна | 16–24 px | Привлекает внимание к центральному элементу |
| Иконки | 2–4 px | Сохраняет читаемость мелких деталей |
Другой базовый способ — использование инструмента Rectangle с предустановленным радиусом. После выбора инструмента, но до создания фигуры, можно задать Corner Radius в верхней панели. Это экономит один клик, но мало кто помнит об этой опции. Метод особенно полезен при создании серии однотипных элементов — карточек товаров, аватаров, превью.
Третий базовый приём — копирование значения скругления между объектами. Выделите фигуру с нужным радиусом, скопируйте её стили через Copy/Paste или используйте пипетку свойств (хотя официально такой инструмент в Figma отсутствует, можно скопировать весь объект и удалить лишнее). Это быстрее ручного ввода, когда работаете с десятками элементов.
Марина Соколова, UI/UX дизайнер
Я год работала над интерфейсом финтех-приложения и использовала только одно значение Corner Radius — 8 пикселей — для всех кнопок. Клиент был доволен, пока не появился конкурент с более "мягким" дизайном. Пришлось пересматривать всю систему: мелкие элементы получили 4 px, средние — 12 px, крупные контейнеры — 16 px. Конверсия выросла на 7% за месяц. Оказалось, визуальная иерархия через скругление работает не хуже цвета и размера.
Функция Corner Radius для разных фигур и объектов
Corner Radius ведёт себя по-разному в зависимости от типа объекта. Прямоугольники и квадраты — самые предсказуемые: значение применяется равномерно, создавая плавную дугу. Но попробуйте применить скругление к треугольнику, и результат вас удивит: углы скругляются не дугой, а скошенными линиями, что создаёт эффект фаски, а не радиуса.
Для сложных фигур, созданных с помощью Boolean Operations (объединение, вычитание, пересечение), скругление применяется к итоговому контуру. Это означает, что если вы объединили два прямоугольника, а затем применили Corner Radius, скруглятся только внешние углы результирующей фигуры. Внутренние стыки останутся острыми, если только вы не применили скругление до операции объединения.
Текстовые блоки не поддерживают Corner Radius напрямую — это частая ошибка новичков. Чтобы создать текст с закругленным фоном, нужно разместить текст над прямоугольником с нужным радиусом или использовать Auto Layout с внутренними отступами. Автолэйаут автоматически создаёт контейнер, к которому можно применить скругление.
| Тип объекта | Поддержка Corner Radius | Особенности |
| Векторные фигуры | ✅ Полная | Прямое редактирование через Properties |
| Растровые изображения | ✅ Через маску | Нужно создать прямоугольник-обтравку |
| Текстовые блоки | ❌ Отсутствует | Требуется фоновая фигура |
| Группы объектов | ❌ Отсутствует | Используйте Frame вместо Group |
| Frame / Auto Layout | ✅ Полная | Скругление применяется к контейнеру |
Отдельная история — импортированные SVG. Если SVG содержит атрибут rx или ry (радиус скругления), Figma сохранит эти значения, но редактировать их через стандартную панель Corner Radius не получится. Придётся либо разбить объект на компоненты (Flatten), либо работать с исходным кодом SVG.
Компоненты и инстансы наследуют скругление от мастер-компонента, но это свойство можно переопределить на уровне инстанса. Это удобно, когда нужна вариативность: например, основная кнопка с радиусом 8 px и её альтернативная версия с радиусом 16 px для акцентных действий. Главное — не перестараться с количеством вариаций, иначе система станет хаотичной.
Индивидуальное скругление каждого угла элемента
Возможность задавать разные значения Corner Radius для каждого угла появилась в Figma относительно недавно, но радикально расширила возможности дизайнеров. Чтобы активировать режим индивидуального скругления, кликните на иконку четырёх точек рядом с полем Corner Radius — появятся четыре отдельных поля для каждого угла: верхний левый, верхний правый, нижний правый, нижний левый.
Классическое применение — карточки с закругленным верхом и острым низом, модальные окна с закругленными только верхними углами (популярно в мобильных интерфейсах), элементы навигации с односторонним скруглением. Такой подход создаёт визуальную связь между элементами: например, карточка "прикрепляется" к нижней части экрана острыми углами, что интуитивно понятно пользователю.
Технически Figma позволяет ввести любые комбинации значений, но дизайн-система требует логики. Хаотичное использование разных радиусов создаёт визуальный шум. Профессиональный подход — определить 3-4 паттерна индивидуального скругления и применять их последовательно во всём проекте. Например: полное скругление для самостоятельных элементов, верхнее — для начальных элементов списка, нижнее — для завершающих.
Частая ошибка — попытка создать "каплю" или "речевой пузырь" через индивидуальное скругление. Это невозможно: Corner Radius работает только с прямыми углами исходной фигуры. Для сложных органических форм используйте Pen Tool или плагины вроде Arc и Blobs. Скругление углов — это геометрическая операция, а не свободная деформация контура.
Игорь Волков, продуктовый дизайнер
Работал над мобильным банкингом, и там каждый пиксель на счету. Модальные окна с полным скруглением визуально "висели" в воздухе, пользователи не понимали, как их закрыть. Убрал скругление с нижних углов — конверсия завершения операций выросла на 12%. Острые углы внизу создали визуальный "якорь", интуитивно намекающий, что окно можно свайпнуть вниз. Казалось бы, мелочь, но психология восприятия — это не абстракция.
Индивидуальное скругление особенно полезно при создании адаптивных интерфейсов. Мобильная версия может требовать более агрессивного скругления верхних углов (24 px), тогда как десктопная — консервативного (8 px). Вместо создания отдельных компонентов используйте переменные или варианты компонента с разными значениями Corner Radius. Это сохраняет единую систему и упрощает поддержку.
Ещё один продвинутый приём — комбинирование индивидуального скругления с тенями и обводками. Например, карточка с скругленным только верхом и тенью снизу создаёт эффект "приподнятости" над поверхностью. Обводка при этом должна следовать контуру с учётом скругления — Figma делает это автоматически, но важно проверять результат при экспорте в SVG или код.
Горячие клавиши для быстрого скругления в Figma
Figma не предлагает прямых горячих клавиш для изменения Corner Radius, что раздражает опытных пользователей. Однако существуют обходные методы, которые ускоряют работу в разы. Первый — использование быстрого ввода: выделите объект, нажмите Enter, это активирует поле Corner Radius. Введите значение и снова нажмите Enter. Три нажатия вместо клика мышью и поиска нужного поля.
Второй метод — копирование свойств через Cmd/Ctrl + C и Cmd/Ctrl + V. Скопируйте объект с нужным скруглением, выделите целевой объект, вставьте — Figma скопирует все визуальные свойства, включая Corner Radius. Это работает даже с индивидуальными значениями для каждого угла, что экономит массу времени при работе с дизайн-системами.
- Cmd/Ctrl + Alt + K — открывает панель свойств, откуда одним Tab можно добраться до Corner Radius
- Shift + R — после выделения объекта активирует инструмент Rectangle, затем можно задать радиус перед рисованием следующего
- Cmd/Ctrl + D — дублирование с сохранением всех свойств, включая скругление
- Cmd/Ctrl + / — поиск по командам, введите "corner" для быстрого доступа к плагинам скругления
Третий способ — создание пользовательских плагинов или скриптов через Figma API. Опытные дизайнеры пишут простые скрипты, которые назначают горячие клавиши на часто используемые значения Corner Radius: например, Cmd + 1 для 4 px, Cmd + 2 для 8 px и так далее. Это требует базовых знаний JavaScript, но окупается при работе над крупными проектами.
Четвёртый хак — использование плагинов вроде Figma Shortcuts или Keyboard Maestro (для macOS), которые позволяют записывать макросы. Например, макрос "выделить объект → активировать поле Corner Radius → ввести 8 → применить" можно назначить на одну клавишу. Это автоматизация на уровне операционной системы, а не самой Figma, но результат впечатляет.
Наконец, самый недооценённый метод — работа с числовыми значениями через стрелки клавиатуры. Активируйте поле Corner Radius, затем используйте стрелки вверх/вниз для изменения значения с шагом 1 px (или 10 px при зажатом Shift). Это позволяет быстро подобрать оптимальный радиус визуально, не вводя числа вручную. Многие дизайнеры игнорируют эту возможность, хотя она встроена в Figma с самого начала.
Продвинутые техники работы с закругленными краями
За пределами базовой функции Corner Radius существует целый арсенал продвинутых техник, которые отличают опытных дизайнеров от новичков. Первая — использование Smooth Corners, алгоритма скругления, который создаёт более органичные, "айфоновские" углы. Figma не поддерживает это нативно, но плагин Squircle решает проблему. Разница между обычным радиусом и smooth corners незаметна на мелких элементах, но критична для крупных — иконок приложений, карточек.
Вторая техника — работа с вложенными радиусами. Когда элемент с закругленными углами содержит другой элемент с закругленными углами, важно соблюдать визуальную гармонию. Правило: внутренний радиус должен быть меньше внешнего на величину отступа. Например, если карточка имеет радиус 16 px и внутренний отступ 8 px, вложенное изображение должно иметь радиус 8 px (16 - 8 = 8). Это создаёт визуальную согласованность, которую глаз считывает на подсознательном уровне.
Третья — использование отрицательного пространства через Boolean Operations. Вместо прямого скругления углов создайте два объекта: основной и вычитаемый с закругленными углами. Результат операции Subtract даст эффект "вырезанных" закругленных углов. Это техника уровня black magic, но незаменима для создания сложных UI-паттернов вроде вырезов под notch или динамические островки.
- Создание "псевдо-скругления" через градиентные маски — радиус применяется не к геометрии, а к прозрачности краёв
- Использование компонентов-оберток с фиксированным Corner Radius для автоматического скругления вложенного контента
- Экспорт скругленных элементов в SVG с оптимизацией кода через плагин SVGO Compressor для уменьшения веса файла
- Применение скругления к обтравочным маскам для создания сложных форм с мягкими краями
- Синхронизация значений Corner Radius с CSS-переменными через плагины экспорта кода для консистентности фронтенда
Четвёртая техника — использование Constraints в связке с Corner Radius для адаптивных элементов. Когда контейнер меняет размер, скругление может выглядеть неуместно (слишком мало на большом экране или слишком много на маленьком). Решение — создание вариантов компонента с разными радиусами для разных брейкпоинтов или использование плагинов вроде Responsify, который пересчитывает радиус пропорционально размеру.
Пятая — работа с Corner Radius в контексте дизайн-токенов. Современные дизайн-системы используют токены для хранения всех значений, включая радиусы скругления. В Figma это реализуется через стили или плагины вроде Design Tokens. Преимущество: изменение одного токена автоматически обновляет все элементы проекта. Это критично для enterprise-проектов, где дизайн-система охватывает десятки продуктов.
Шестая техника — анимация Corner Radius через прототипирование. Smart Animate в Figma позволяет плавно изменять радиус скругления при переходе между фреймами. Например, кнопка при наведении может увеличивать радиус с 8 px до 16 px, создавая эффект "размягчения". Это тонкая микроинтерактивность, которая повышает воспринимаемое качество интерфейса.
Седьмая — экспорт с сохранением Corner Radius в код. При передаче макетов разработчикам критично, чтобы значения радиусов сохранились точно. Используйте плагины вроде Anima или Figma to Code, которые генерируют CSS/Swift/Kotlin с корректными значениями border-radius. Альтернатива — ручное документирование через плагин Design Doc, который создаёт спецификации со всеми значениями.
Скругление углов в Figma — это не просто косметическая функция, а мощный инструмент визуальной коммуникации. От базового Corner Radius до сложных техник с Boolean Operations и дизайн-токенами — каждый метод решает конкретную задачу. Освоив все уровни работы со скруглением, вы получаете контроль над визуальной иерархией, согласованностью системы и восприятием пользователем интерфейса. Не останавливайтесь на стандартных 8 пикселях — экспериментируйте, измеряйте результаты, создавайте свои правила. Именно внимание к таким деталям отличает профессиональный дизайн от любительского. 🎯
