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

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

Figma — один из самых популярных инструментов для проектирования пользовательских интерфейсов. Благодаря своей гибкости, облачной архитектуре и мощным функциям редактирования векторной графики, он стал выбором дизайнеров по всему миру. Одной из ключевых особенностей является возможность тонкой настройки фигур, включая изменение формы углов. Прямоугольник — одна из самых часто используемых фигур в UI/UX-дизайне: кнопки, карточки, модальные окна, поля ввода — всё это зачастую начинается с простого прямоугольника. Однако строгие 90-градусные углы не всегда подходят под стиль проекта. Именно поэтому умение контролировать скругления — навык, необходимый каждому, кто работает с интерфейсами.

Основной способ скругления углов

Самый простой и распространённый способ скруглить углы прямоугольника в Figma — использовать параметр Corner Radius («Радиус угла»). После того как вы создали прямоугольник с помощью инструмента Rectangle (R), выделите его и перейдите к панели свойств справа. Там вы найдёте блок «Corners», где первое поле — это именно Corner Radius.
Значение можно ввести вручную или изменять с помощью стрелок. Увеличение значения приведёт к более мягкому закруглению. При максимальном значении, равном половине меньшей стороны прямоугольника, фигура превратится в овал. Например, для прямоугольника 100×40 максимальный радиус составит 20 пикселей.
Если вы хотите применить одно и то же скругление ко всем четырём углам, достаточно задать одно значение. Figma автоматически синхронизирует его для всех углов. Это удобно при создании стандартных кнопок или карточек, где требуется единообразие.

Пошаговая инструкция

1. Нажмите R или выберите инструмент «Прямоугольник» на панели слева.
2. Щёлкните и перетащите на холст, чтобы создать прямоугольник.
3. Выделите фигуру, если она ещё не выделена.
4. В правой панели найдите раздел Corners.
5. Введите значение в поле Corner Radius (например, 8).
6. Убедитесь, что иконка сцепления между углами активна (цепочка), чтобы все углы менялись одновременно.

Индивидуальное скругление каждого угла

Figma позволяет управлять каждым углом отдельно. Это особенно полезно при создании сложных форм, таких как пузыри чатов, кастомные кнопки, таббары или анимационные маски. Чтобы включить независимое управление, нужно разъединить цепочку в блоке «Corners».
После разъединения вы увидите четыре отдельных поля: Top-left, Top-right, Bottom-right, Bottom-left. Вы можете задать каждому своё значение. Например, сделать верхние углы закруглёнными (16 px), а нижние — острыми (0 px).
Такой подход широко используется в дизайне мобильных интерфейсов. Допустим, вы создаёте экран с нижним навигационным баром, который плавно переходит в основное содержимое. Скругление только верхних углов карточки визуально привязывает её к нижней части экрана.

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

• Чат-пузыри: у сообщений пользователя — скруглены только левые углы, у собеседника — правые.
• Модальные окна: часто имеют скругление только в верхней части, имитируя поведение iOS-попапов.
• Кнопки-табы: в горизонтальном меню активная вкладка может иметь закруглённые нижние углы, создавая эффект «выреза».

Горячие клавиши и быстрые инструменты

Figma предлагает множество сочетаний клавиш, которые ускоряют работу со скруглениями. Владение ими экономит время, особенно при массовой обработке элементов.
Самое простое — использовать Alt + стрелка вверх/вниз (Option на Mac) при выделенном прямоугольнике. Это увеличивает или уменьшает значение Corner Radius с шагом 1 px. Если зажать Shift, шаг увеличится до 10 px.
Если вы работаете с несколькими фигурами, можно выделить их все и задать единый радиус. Figma применит его ко всем выделенным объектам. Это удобно при стандартизации дизайна, например, когда нужно сделать все кнопки с радиусом 12 px.

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

• Создайте прямоугольник с нужным радиусом.
• Удерживая Alt, перетащите его — получится копия.
• Не отпуская мышь, начните редактировать радиус — изменения затронут только новую фигуру.

Дизайн-практики и рекомендации по скруглению

Выбор радиуса скругления — не случайность. Он влияет на восприятие интерфейса: более высокие значения делают дизайн дружелюбнее и современнее, низкие — строже и профессиональнее. Apple, например, использует радиус 10–12 px в своих системных элементах, Google Material Design — 4 px для компактных интерфейсов.
Для веб-интерфейсов чаще всего используются значения от 4 до 16 px. На мобильных устройствах — от 8 до 20 px, особенно в крупных элементах вроде карточек. Важно соблюдать согласованность: если кнопка имеет радиус 8 px, другие интерактивные элементы должны следовать тому же правилу.

Как выбрать правильный радиус?

• Оцените стиль бренда: минимализм — меньше скруглений, дружелюбный тон — больше.
• Учитывайте платформу: iOS любит мягкие формы, Android — более угловатые.
• Тестируйте на разных устройствах: слишком большое скругление на маленьком экране может «съесть» пространство.

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

Новички в Figma часто допускают типичные ошибки при работе с углами. Первая — забывать отключить цепочку при необходимости индивидуальных радиусов. В результате все углы остаются одинаковыми, даже если это не требуется.
Вторая ошибка — использование слишком большого радиуса. Например, для прямоугольника 50×50 px радиус 30 px сделает его похожим на овал, что может нарушить восприятие элемента как кнопки. Радиус не должен превышать половины меньшей стороны.
Третья — отсутствие системы. Дизайнеры иногда задают радиусы «на глаз», что приводит к несогласованности. Кнопка — 8 px, карточка — 9 px, поле ввода — 7 px. Это мешает масштабированию и передаче макетов разработчикам.

Как исправить ошибки

• Проверьте цепочку в разделе Corners — она должна быть разомкнута для независимых углов.
• Используйте плагины вроде Radius Resizer для быстрой коррекции.
• Добавьте в дизайн-систему компоненты с предустановленными радиусами.

Расширенные возможности: компоненты и стили

Figma позволяет превращать фигуры со скруглёнными углами в компоненты. Это особенно полезно при создании кнопок, карточек или других повторяющихся элементов. Компонент сохраняет все свойства, включая радиус, и может быть использован в нескольких местах.
Если вы измените мастер-компонент, все экземпляры обновятся автоматически. Это гарантирует согласованность. Представьте, что вы решили увеличить радиус кнопок с 8 до 10 px. Достаточно изменить один элемент — и все кнопки в проекте обновятся.
Кроме того, можно создавать варианты компонентов (Component Properties). Например, добавить свойство «Corner Style» с опциями: Sharp, Rounded, Pill (капсула). Пользователь сможет переключаться между формами без редактирования кода.

Создание стиля скругления

• Выделите фигуру с нужным радиусом.
• В разделе «Corners» нажмите иконку «+» справа от поля.
• Назовите стиль, например, «Button Radius – 8px».
• Теперь этот стиль можно применять к другим фигурам через выпадающее меню.

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

Профессиональные дизайнеры подчёркивают, что скругление — это не просто визуальная деталь, а инструмент управления вниманием и восприятием. Форма влияет на то, как пользователь взаимодействует с интерфейсом.
«Люди интуитивно воспринимают скруглённые углы как более безопасные. Острые — ассоциируются с предупреждениями или действиями. Поэтому кнопки успеха делают с большим радиусом, а иконки удаления — с минимальным», — объясняет Анна Петрова, руководитель дизайн-студии Interface.
Также важно понимать культурный контекст. В западных интерфейсах преобладают мягкие формы, в восточных — особенно в финансовых приложениях — чаще встречаются строгие линии. Это связано с восприятием надёжности и стабильности.

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

Заключение

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

• Используйте Corner Radius в панели свойств для быстрого скругления всех углов.
• Разъединяйте цепочку для индивидуального контроля каждого угла.
• Соблюдайте единые значения в рамках дизайн-системы.
• Применяйте компоненты и стили для масштабируемости.
• Учитывайте контекст: платформа, бренд, устройство — всё влияет на выбор радиуса.