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

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

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

Скругление углов в Figma начинается с выбора подходящего инструмента. Наиболее часто используются инструменты Rectangle (Прямоугольник), Frame (Фрейм) и Vector (Вектор). Каждый из них поддерживает параметр Corner radius (Радиус угла), расположенный в правой панели Inspector. При создании нового прямоугольника вы можете сразу задать значение скругления в верхней строке параметров, либо изменить его позже после выделения объекта.

Для стандартного скругления всех четырёх углов достаточно ввести одно число в поле «Corner radius». Значение указывается в пикселях и может быть дробным, что особенно полезно при тонкой настройке. Например, 8px — типичный выбор для карточек и кнопок в современных дизайн-системах. Если вы работаете с фреймами, помните: скругление применяется только к границам фрейма, а не к содержимому внутри, если оно не обрезается с помощью маски.

Figma автоматически сохраняет последние использованные значения радиуса, что ускоряет повторяющиеся действия. Кроме того, вы можете копировать стиль слоя с уже заданным скруглением и применять его к другим объектам через контекстное меню или сочетание Ctrl+Alt+C / Cmd+Option+C. Это особенно эффективно при работе с компонентами и библиотеками стилей.

Пошаговый алгоритм скругления

• Выберите инструмент Rectangle (R) или выделите существующий объект.
• В правой панели найдите раздел «Stroke» и ниже — «Corner radius».
• Введите желаемое значение в пикселях (например, 12).
• Убедитесь, что значок цепочки рядом со значением замкнут — это означает, что все углы будут одинаковыми.
• Нажмите Enter, чтобы применить изменения.

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

Настройка каждого угла отдельно

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

Представьте, что вы проектируете диалоговое окно с указателем-стрелкой. Вы можете оставить три угла с радиусом 12px, а четвёртый — прямым (0px), чтобы подготовить место для стрелки. Или, например, создать форму капли, где один угол сильно скруглён, а противоположный — почти острый. Такие детали делают интерфейс живым и запоминающимся.

Для точной настройки рекомендуется использовать числовые значения, а не мышь, так как перемещение ползунка может привести к неточностям. Вы можете быстро переключаться между полями с помощью клавиш Tab и Shift+Tab. Если вы случайно задали разные значения и хотите вернуть единый радиус, просто снова нажмите на значок цепочки — Figma предложит объединить значения, взяв за основу среднее или текущее.

Использование фигменных заготовок и плагинов

Кроме встроенных инструментов, Figma предлагает расширения через экосистему плагинов. Они позволяют автоматизировать скругление, применять сложные формы и синхронизировать стили. Популярные плагины включают Corner Editor, Radius Resizer и Auto Layout Tools. Эти инструменты особенно полезны при работе с крупными проектами, где требуется единый подход к дизайну.

Например, Radius Resizer позволяет быстро увеличивать или уменьшать радиус всех выделенных объектов на заданную величину — идеально для A/B-тестирования разных уровней скругления. Corner Editor даёт визуальный интерфейс для точной настройки каждого угла с возможностью сохранения пресетов. Это экономит время при создании адаптивных компонентов.

Также можно использовать Component Variants и Design System Tokens для управления скруглением на уровне библиотеки. Например, вы можете создать токен `radius-sm`, равный 4px, и применять его ко всем второстепенным элементам. Это обеспечивает консистентность и упрощает внесение глобальных изменений: достаточно обновить один токен, и все связанные компоненты изменятся автоматически.

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

Новички в Figma часто сталкиваются с типичными проблемами при работе со скруглением. Одна из самых распространённых — попытка применить скругление к группе объектов. Figma не поддерживает скругление групп напрямую. Решение — преобразовать группу в один объект с помощью Outline Stroke или Boolean Union, либо применять скругление к каждому элементу отдельно.

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

Также важно помнить, что скругление не наследуется при дублировании через Copy-Paste, если не используется Style. Поэтому рекомендуется создавать Local Styles для часто используемых комбинаций: цвет + радиус + обводка. Это снижает риск ошибок и ускоряет работу.

• Ошибка: Скругление не применяется к текстовому блоку.
• Решение: Текстовые слои не поддерживают скругление напрямую. Оберните текст во фрейм и примените радиус к нему.
• Ошибка: После булевой операции углы теряются.
• Решение: Булевы операции сбрасывают стили. Применяйте скругление после завершения операций.

Практические примеры использования

Рассмотрим несколько реальных сценариев, где скругление играет ключевую роль. Первый — создание кнопки с микроинтеракцией. Начните с прямоугольника 160x48px, задайте радиус 8px. Добавьте текст, центрируйте. Затем создайте второй фрейм с теми же параметрами, но радиусом 24px. Свяжите их в прототипе, чтобы при наведении кнопка «расплывалась», создавая игривый эффект.

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

Третий кейс — мобильный чат. Пузыри сообщений имеют асимметричные углы: у входящих сообщений левый верхний угол прямой (0px), остальные — 16px. У исходящих — наоборот. Это помогает визуально различать отправителя без дополнительных меток.

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

Кроме того, эксперт отмечает, что в Figma появилась поддерж динамических радиусов через Variables (переменные), хотя на момент 2026 года эта функция всё ещё в бета-версии. Она позволяет связывать значение скругления с состоянием компонента, например: default (8px), hover (16px), active (4px). Это открывает новые возможности для прототипирования без кода.

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

Заключение

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

• Всегда начинайте со встроенного параметра Corner radius в правой панели.
• Используйте раздельную настройку углов для сложных форм и микровзаимодействий.
• Применяйте Design Tokens и Local Styles для обеспечения согласованности.
• Избегайте типичных ошибок: группировка, масштабирование, потеря стилей.
• Интегрируйте плагины и компоненты для автоматизации и масштабирования.