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

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

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

Самый простой и распространённый способ — через панель свойств. После того как вы создали прямоугольник (инструмент R), выберите его кликом. В правой панели, в разделе Design, вы увидите поле Corner Radius. По умолчанию оно равно 0. Просто введите любое положительное значение — например, 8 — и углы мгновенно станут скруглёнными. Это значение измеряется в пикселях и работает как единый радиус для всех четырёх углов.

Если вы хотите изменить радиус после создания фигуры, не нужно пересоздавать её. Просто выделите прямоугольник и введите новое значение в том же поле. Figma обновит форму в реальном времени. Это особенно удобно при тестировании визуальных решений: попробуйте 4, 8, 16 и 24 — и сразу увидите, как меняется ощущение тяжести и мягкости элемента.

Представьте, что вы проектируете кнопку для мобильного приложения. Если радиус слишком мал — 2–4 пикселя — кнопка будет выглядеть резко, как в старых интерфейсах Android 4. Если радиус слишком велик — 50 и более — она превратится в овал. Оптимальный диапазон для мобильных кнопок — от 8 до 16 пикселей, в зависимости от контекста.

Как задать разный радиус для каждого угла

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

Для этого в поле Corner Radius введите четыре значения через запятую в следующем порядке: top-left, top-right, bottom-right, bottom-left. Например: 12, 0, 12, 0 — скруглит только верхние углы, оставив нижние острыми. Это идеально подходит для табов или элементов, которые должны «встраиваться» в другую форму.

Примеры значений

• 8, 8, 8, 8 — равномерное скругление всех углов
• 16, 0, 0, 16 — скруглены только левый верхний и правый нижний
• 0, 0, 12, 12 — скруглены только нижние углы
• 24, 12, 4, 0 — каждый угол имеет уникальный радиус

Такой подход используется в дизайне интерфейсов Apple и Google Material Design 3, где асимметричное скругление помогает визуально связывать элементы с другими компонентами, например, с панелями навигации или фоновыми областями.

Клавиатурные сочетания и быстрые способы

Чтобы ускорить процесс, используйте клавиатурные сочетания и интерактивные методы:

• Выделите прямоугольник → нажмите Cmd + Option + R (Mac) или Ctrl + Alt + R (Windows) — это активирует поле Corner Radius и выделяет текущее значение для быстрого редактирования.
• Используйте стрелки вверх/вниз на клавиатуре, когда поле Corner Radius активно — значение будет изменяться с шагом 1. Удерживайте Shift — шаг увеличится до 5.
• Для точного позиционирования можно ввести десятичные значения: например, 7.5. Figma поддерживает дробные радиусы — это полезно при работе с высокодетализированными макетами.

Также можно использовать «ручное» скругление: зажмите Cmd (Mac) или Ctrl (Windows) и потяните за маленькие круглые точки в углах прямоугольника. Эти точки появляются только при выборе фигуры. Этот метод хорош для визуальной настройки, но менее точен — он не показывает числовое значение, поэтому используйте его только для эскизов.

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

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

• Скругление применяется к группе, а не к фигуре. Если вы сгруппировали несколько объектов, Corner Radius не будет доступен. Сначала разгруппируйте (Cmd + Shift + G), отредактируйте нужный прямоугольник, затем снова сгруппируйте.
• Неправильный порядок значений. Значения вводятся строго по часовой стрелке: левый верхний → правый верхний → правый нижний → левый нижний. Если перепутать порядок — получите неожиданный результат.
• Значение больше половины ширины или высоты. Если радиус больше, чем половина ширины прямоугольника, Figma автоматически ограничит его. Например, у прямоугольника 40×40 пикселей максимальный радиус — 20. Больше — фигура превратится в круг.
• Игнорирование системных стандартов. В Material Design 3 рекомендуется использовать радиус 8–12 пикселей для кнопок. В iOS — 10–16. Нарушение этих норм снижает узнаваемость интерфейса.

Чтобы избежать этих ошибок, всегда проверяйте, что вы редактируете именно фигуру, а не группу. Используйте дерево объектов (Layers Panel) — там будет чётко видно, какой элемент выбран.

Лучшие практики скругления в UI-дизайне

Скругление — это не только техника, но и дизайн-решение. Вот рекомендации от ведущих студий:

• Согласованность. Используйте одинаковый радиус для всех кнопок, карточек и модальных окон в рамках одного продукта. Это создаёт визуальную гармонию.
• Масштабируемость. Для десктопа — 8–12 пикселей, для мобильного — 12–16. На больших экранах меньшие радиусы выглядят аккуратнее.
• Контраст с фоном. Если фон темный, используйте больший радиус — это снижает ощущение «резкости». На светлом фоне — меньше.
• Анимация. Если элемент анимируется (например, при наведении), радиус должен меняться плавно. Лучше использовать CSS-анимацию с тем же значением, что и в Figma.

Продвинутые техники: скругление с помощью масок и компонентов

Если вы работаете с сложными формами — например, прямоугольником с вырезом или с градиентом — используйте маски. Создайте прямоугольник с нужным радиусом, поместите поверх него другой объект (изображение, текст, градиент), выделите оба и нажмите Cmd + Option + M — объект станет маской. Теперь скругление будет применяться к содержимому внутри.

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

Также можно использовать Auto Layout с фиксированным радиусом. Если вы добавляете внутрь компонента текст или иконки — Auto Layout автоматически адаптирует размеры, сохраняя скругление. Это ускоряет работу с динамическим контентом.

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

Заключение

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

• Используйте поле Corner Radius в панели свойств для быстрого скругления.
• Задавайте разные радиусы для каждого угла через четыре значения через запятую.
• Избегайте скругления групп — редактируйте только отдельные фигуры.
• Соблюдайте рекомендации Material Design и Human Interface Guidelines.
• Превращайте часто используемые элементы в компоненты для единой системы.