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

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

Основы скругления углов в Figma

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

Для изменения радиуса можно ввести число вручную, потянуть стрелку рядом с полем или использовать горячие клавиши. При зажатой клавише Alt (Option на Mac) и прокрутке колеса мыши вы можете быстро увеличивать или уменьшать значение радиуса. Это особенно удобно при работе с макетами в реальном времени.

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

Пошаговое руководство: как скруглить углы

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

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

Точное управление углами: независимые значения

Хотя стандартное скругление применяет одинаковое значение ко всем четырём углам, Figma позволяет задавать индивидуальные радиусы для каждого угла. Это открывает широкие возможности для дизайна: например, можно сделать только верхние углы скруглёнными для модального окна или нижние — для баннера.

Для этого достаточно кликнуть по иконке раскрытия рядом с полем «Corner radius». Появятся четыре отдельных поля: Top-left, Top-right, Bottom-right, Bottom-left. Вы можете вводить разные значения в каждое из них, комбинируя форму по своему усмотрению.

Работа с отдельными углами особенно актуальна при создании адаптивных компонентов. Например, вы можете создать кнопку с разными скруглениями в зависимости от контекста: в мобильной версии — все углы скруглены, в десктопной — только боковые. Такой подход улучшает восприятие интерфейса и соответствует современным гайдлайнам Material Design и Apple Human Interface.

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

• Alt + колесо мыши (Windows) / Option + колесо (Mac) — изменение радиуса выделенного объекта.
• Shift + Alt + колесо — более плавное изменение (с шагом 1 вместо 5).
• Ctrl/Cmd + D — дублирование объекта с сохранением стилей, включая скругления.

Скругление для разных типов объектов: фигуры, фреймы, текст

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

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

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

С текстом ситуация интереснее. Сам текстовой блок нельзя скруглить напрямую, но вы можете:

• Обернуть текст во фрейм и скруглить фон фрейма;
• Применить скругление к фигуре, на которой расположен текст (если используется clipping);
• Конвертировать текст в кривые (Outline), после чего редактировать каждый узел вручную.

Что касается изображений, то они не имеют встроенного скругления. Но вы можете:

• Поместить изображение внутрь фрейма со скруглёнными углами и включить маскирование (Mask);
• Использовать команду «Use as mask» — тогда изображение примет форму нижележащего объекта.

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

Современные инструменты и функции: варианты и компоненты

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

Например, можно создать компонент кнопки с тремя вариантами:

• Sharp — углы 0 px;
• Rounded — 8 px;
• Pill — 999 px (полностью скруглённая).

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

Переменные и стили скругления

С выходом Figma Variables (переменных) стало возможным централизованное управление скруглениями. Вы можете создать переменную, например, «Radius/Large», и присвоить ей значение 16. Затем применять её ко всем компонентам, которые должны иметь одинаковые углы.

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

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

Несмотря на простоту функции, пользователи часто допускают ошибки при скруглении углов. Вот самые распространённые из них и способы их решения.

• Скругление не применяется к объекту. Убедитесь, что вы работаете с фигурой или фреймом, а не с группой. Группы не поддерживают скругление напрямую — нужно разгруппировать или конвертировать в фрейм.
• Углы обрезаются при масштабировании. Это происходит, когда радиус слишком велик относительно размера объекта. Следите за соотношением: максимальный радиус не должен превышать половины меньшей стороны.
• Разные значения в мультивыборе. Если вы выделили несколько объектов с разными радиусами, поле покажет прочерк. Чтобы применить новое значение, введите его — оно заменит все предыдущие.
• Потеря скруглений при импорте. При копировании из других программ (например, Sketch или Adobe XD) некоторые стили могут не передаваться. Всегда проверяйте свойства после импорта.

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

По данным исследований Nielsen Norman Group, интерфейсы с умеренно скруглёнными углами (6–12 px) воспринимаются на 23% легче, чем с острыми. Это связано с тем, что глазу проще следить за плавными линиями. Однако чрезмерное скругление (более 20 px) может выглядеть игриво и неуместно в профессиональных продуктах.

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

Заключение

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

• Базовое скругление настраивается через поле Corner radius на правой панели.
• Для точного контроля используйте независимые значения для каждого угла.
• Фреймы, изображения и текст требуют специальных приёмов (маски, обёртки).
• Переменные и компоненты позволяют централизовать управление скруглениями.
• Соблюдайте баланс: слишком большое скругление может нарушить восприятие.