Как скруглить углы в figma

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

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

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

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

Для более точного контроля доступны отдельные поля: Top-left, Top-right, Bottom-left, Bottom-right. Это особенно важно при создании сложных форм, таких как карточки с ассиметричными углами, кастомные кнопки или UI-элементы, соответствующие брендбуку. Также скругление можно применять к текстовым блокам, если они обёрнуты во фрейм с фоном.

Где найти параметр скругления

После выделения объекта перейдите в правую панель. В разделе «Design» найдите строку с иконкой уголка (□) и полем ввода рядом. Это и есть Corner radius. Рядом с ним — стрелка вниз, раскрывающая четыре отдельных поля для каждого угла.

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

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

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

1. Откройте проект в Figma и выберите инструмент Rectangle (R) или выделите существующий объект.
2. Нарисуйте прямоугольник или кликните по уже созданному элементу.
3. На правой панели найдите параметр Corner radius в разделе Design.
4. Введите числовое значение (например, 8 для стандартной кнопки).
5. Нажмите Enter или кликните за пределами поля — изменения применятся мгновенно.

Значение можно менять не только вручную, но и с помощью мыши: наведите курсор на поле Corner radius, зажмите левую кнопку и двигайте влево/вправо. Такой жест ускоряет подбор подходящего радиуса без необходимости вводить цифры.

Пример: создание кнопки с закруглёнными углами

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

• Создайте прямоугольник размером 280×56 px.
• Задайте заливку — например, синий цвет (#0066FF).
• В поле Corner radius введите 12.
• Добавьте белый текст «Войти» по центру.

Результат — готовая кнопка с мягкими углами, соответствующая современным дизайн-системам, таким как Material Design или Apple Human Interface Guidelines.

Индивидуальное управление каждым углом

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

Кликните на стрелку рядом с полем Corner radius, чтобы раскрыть четыре отдельных поля. Теперь можно задать уникальные значения:

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

Когда использовать разные радиусы?

• При создании кастомных форм, нестандартных иконок.
• Для визуального направления взгляда пользователя (например, большие скругления сверху).
• В брендированных интерфейсах, где форма — часть идентичности (как у Telegram или Notion).
• При адаптации под платформенные гайдлайны (iOS предпочитает большие скругления, Android — умеренные).

Скругление для разных типов объектов

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

Фреймы и Auto Layout

Фреймы — основа структуры в Figma. Если вы добавили фон к фрейму, вы можете применить скругление к его границам. Это особенно полезно при работе с Auto Layout: скруглённые углы будут корректно обрезать содержимое, если включена опция «Clips content».

• Выделите фрейм с Auto Layout.
• Задайте фон (через Fill).
• Установите Corner radius.
• Активируйте Clipping, чтобы содержимое не выходило за границы.

Текстовые блоки

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

Векторные фигуры

Для кастомных векторов скругление также доступно, но с ограничениями. Figma применяет Corner radius только к узлам с типом «Corner». Если вы редактировали пути вручную, убедитесь, что углы не переведены в «Smooth».

Советы по оптимальным значениям радиуса

Выбор радиуса — не просто эстетический вопрос. Он влияет на восприятие интерфейса, безопасность взаимодействия и соответствие платформенным стандартам.

Рекомендации по значениям

• 0–4 px: Минимализм, технические интерфейсы, дашборды.
• 8 px: Универсальное значение для кнопок и карточек в вебе.
• 12–16 px: Современные мобильные приложения (особенно iOS).
• 20+ px: Необычные формы, иконки, микроинтеракции.

Apple рекомендует использовать радиус 10–12 px для кнопок в iOS, а Google в Material Design — 4 или 8 px в зависимости от компонента. Эти стандарты помогают создавать привычные для пользователей интерфейсы.

Адаптивность и масштаб

Радиус должен масштабироваться вместе с объектом. Figma делает это автоматически, но при ручном изменении размеров очень маленьких элементов (например, иконка 16×16 px) большой радиус может превратить объект в круг. Будьте внимательны.

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

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

Ошибка 1: Скругления не применяются к тексту или изображению

Часто пользователи ожидают, что скругление фрейма автоматически обрежет содержимое. Но по умолчанию Figma не включает обрезание. Решение — активировать опцию «Clips content» в правой панели.

Ошибка 2: Разные радиусы при копировании компонентов

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

Ошибка 3: Проблемы при экспорте

При экспорте в PNG/SVG скруглённые углы могут выглядеть «ступенчато», если не задано достаточное разрешение. Всегда экспортируйте с антиалиасингом и, при необходимости, увеличьте DPI.

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

Анна отмечает, что в её команде существует внутренний чек-лист: каждый новый компонент проходит проверку на согласованность скруглений. Они используют плагин «Corner Manager», который позволяет быстро применять стандартные значения ко всем выбранным объектам.

Также эксперт советует: «Если вы работаете в команде, создайте библиотеку с типовыми радиусами: small (4 px), medium (8 px), large (12 px). Это обеспечит единообразие и ускорит работу.»

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

Заключение

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

• Для базового скругления используйте поле Corner radius в правой панели.
• Разные радиусы задаются через раскрытые поля для каждого угла.
• Всегда включайте Clipping для фреймов, чтобы содержимое не выходило за границы.
• Соблюдайте единообразие, используя стандартные значения в дизайн-системе.
• Помните о различиях при экспорте и прототипировании.