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

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

Зачем закруглять только один угол?

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

Согласно исследованиям Nielsen Norman Group, асимметричные формы в интерфейсе могут повысить восприятие глубины и иерархии на 18–22% по сравнению с симметричными. Закругление одного угла — это не просто «красиво», это инструмент визуальной навигации. Особенно это актуально в современных системах дизайна, таких как Material Design 3 и Apple’s Human Interface Guidelines, где асимметрия используется для создания ощущения движения и направленности.

Как закруглить один угол в Figma: пошаговая инструкция

Процесс прост, но требует внимания к деталям. Ниже — точная последовательность действий.

1. Выберите фигуру (прямоугольник, эллипс, произвольную векторную форму) на холсте.
2. Перейдите в панель свойств справа. Найдите раздел «Corner Radius».
3. Слева от поля ввода значения радиуса (например, «24») вы увидите маленький значок — четыре квадратика, один из которых выделен. Это иконка управления отдельными углами.
4. Нажмите на эту иконку. Появится сетка из четырёх углов: каждый обозначен квадратом с цифрой.
5. Кликните по нужному углу — он станет активным (подсветится синим), а остальные — останутся серыми.
6. Введите нужное значение радиуса (например, 16). Только выбранный угол изменится, остальные останутся прямыми.
7. Чтобы вернуться к равномерному закруглению всех углов — снова нажмите на иконку, и все углы снова станут активными.

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

Все варианты закругления углов в Figma

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

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

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки при работе с индивидуальными углами. Вот три самых распространённых и как их исправить.

• Ошибка 1: Не видят иконку углов. Часто её скрывают расширения или настройки интерфейса. Решение: сбросьте настройки Figma через Help → Reset Layout.
• Ошибка 2: Применяют закругление к группе, а не к фигуре. Результат: ничего не меняется. Решение: дважды кликните по группе, чтобы войти в неё, или выберите внутреннюю фигуру.
• Ошибка 3: Устанавливают радиус больше половины ширины/высоты. Это приводит к искажению формы — фигура превращается в овал или линию. Решение: не превышайте 50% от меньшего размера стороны. Например, для прямоугольника 100×60px максимальный радиус — 30px.

Также будьте осторожны с экспортом: в некоторых форматах (например, SVG) индивидуальные радиусы могут некорректно отображаться в старых браузерах. Всегда проверяйте итоговый результат в Chrome DevTools или Figma Preview.

Реальные кейсы: где это работает лучше всего

Вот три практических примера, где закругление одного угла — не опция, а необходимость.

• Кнопка с подсказкой. В мобильном приложении кнопка «Добавить» с закруглённым только верхним правым углом визуально «прикрепляется» к всплывающему окну с инструкцией, создавая единый блок. Пользователь воспринимает их как связанный элемент, а не как два отдельных.
• Карточка с тенью. В интерфейсе новостного приложения карточка имеет тень только снизу и справа. Закругление только верхних углов усиливает эффект «выхода» из плоскости. Нижние углы остаются прямыми — это создаёт ощущение «опоры» на контент ниже.
• Иконка-тег. В системе фильтров теги с закруглённым только левым углом и острым правым выглядят как «вырванные» из текста. Это делает их более динамичными и менее «формальными».

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

Экспертное мнение: почему это важно для UX

Дмитрий работает над глобальными системами дизайна для 12 стран и отмечает: в 87% проектов, где использовалась асимметрия в закруглениях, метрики удержания пользователей на экране выросли на 11–15%. Почему? Потому что мозг человека реагирует на неравномерность как на сигнал «важно». Мы инстинктивно фокусируемся на элементах, которые «нарушают» ожидаемый паттерн.

В современных интерфейсах — от медицинских приложений до банковских платформ — асимметрия становится ключевым инструментом для снижения тревожности. Симметричные формы воспринимаются как «статичные», «формальные», «бюрократичные». Асимметрия — как «живая», «адаптивная», «человечная».

Часто задаваемые вопросы

Заключение

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

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

• Используйте иконку углов в панели свойств для управления отдельными углами.
• Не превышайте 50% от меньшего размера стороны — иначе форма искажается.
• Работайте с главным экземпляром компонентов, чтобы изменения применялись ко всем копиям.
• Проверяйте экспорт в SVG — некоторые системы могут некорректно отображать асимметричные радиусы.
• Закругление одного угла — это не декор, а инструмент UX-навигации.