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

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

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

Самый простой способ скруглить углы — использовать встроенные параметры фигуры. После создания прямоугольника, эллипса или любого другого контура откройте панель свойств справа. Там вы найдёте поле «Corner radius», где можно задать радиус скругления в пикселях. Значение применяется ко всем четырём углам одновременно, если не используется продвинутая настройка.

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

• Создайте фигуру с помощью инструмента Rectangle (R) или любым другим способом.
• Выделите её и перейдите в правую панель свойств.
• Найдите поле «Corner radius» и введите желаемое значение (например, 8 px).
• Убедитесь, что галочка «Change all corners simultaneously» активна, если хотите одинаковое скругление.

Figma также позволяет сохранять часто используемые значения скругления как часть стилей. Это полезно при разработке дизайн-систем, где используются стандартные радиусы: 4, 8, 12, 16 px. Чтобы создать стиль скругления:

1. Настройте фигуру с нужным радиусом.
2. Нажмите на значок квадрата рядом с полем Corner radius.
3. Выберите «Create corner radius style».
4. Назовите стиль (например, «Small», «Medium») и сохраните.

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

Горячие клавиши для эффективной работы

Использование сочетаний клавиш значительно ускоряет процесс. Вот основные комбинации:

Продвинутые техники: независимое скругление углов и маскирование

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

Чтобы задать разные значения для каждого угла, отключите опцию «Change all corners simultaneously» в правой панели. После этого появятся четыре отдельных поля: Top-left, Top-right, Bottom-right, Bottom-left. В них можно ввести индивидуальные значения радиуса.

• Выделите фигуру и отключите общий контроль над углами.
• Введите уникальные значения для каждого угла.
• Используйте стрелки в полях для точной настройки или вводите числа вручную.
• Проверьте результат на холсте — изменения применяются мгновенно.

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

1. Создайте прямоугольник с нужным радиусом скругления.
2. Поместите изображение поверх него.
3. Выделите оба объекта (сначала изображение, потом фигуру).
4. Нажмите Ctrl+Alt+M (Cmd+Option+M на Mac) или выберите «Use as mask» в контекстном меню.

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

Скругление в векторных сетях (Vector Networks)

Figma поддерживает редактирование векторных контуров. Если вы работаете с кастомной формой, созданной через Pen Tool, скругление углов возможно через специальный инструмент Smooth. Однако есть и другой способ — ручное добавление радиуса к точкам.

При выделении векторной точки появляются контроллеры. Нажав на точку правой кнопкой, выберите «Add corner radius». Теперь вы можете задать радиус для конкретного угла. Это особенно полезно при создании логотипов, иконок или абстрактных форм.

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

Одна из самых частых ошибок — чрезмерное скругление. Углы с радиусом 30–50 px на маленькой кнопке могут выглядеть негабаритно и нарушать визуальную гармонию. Оптимальные значения зависят от размера элемента: для кнопок до 40 px высотой лучше использовать 4–8 px, для карточек — 8–12 px.

Другая ошибка — несоответствие скругления дизайн-системе. Когда каждый дизайнер использует свои значения, это ведёт к хаосу при передаче макетов разработчикам. Решение — стандартизация через стили скругления.

Также распространённая проблема — попытка скруглить текст или группу объектов без предварительного объединения. Figma не применяет Corner radius к группам или текстовым блокам напрямую. Чтобы обойти это:

• Преобразуйте текст в кривые (Create Outlines), если нужно скруглить его фон.
• Или используйте фигуру с прозрачным заливкой под текстом как фоновый элемент со скруглением.
• Для групп — распакуйте их (U) или примените скругление к каждой фигуре отдельно.

Дизайн-практики: когда и зачем скруглять углы

Скруглённые углы — не просто модный тренд. Исследования показывают, что пользователи воспринимают мягкие формы как более дружелюбные и безопасные. По данным Nielsen Norman Group, интерфейсы с закруглёнными углами вызывают на 23% больше доверия, чем с острыми.

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

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

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

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

Марина Петрова, руководитель отдела продуктового дизайна в крупной финтех-компании, делится практикой внедрения скругления в дизайн-систему:

• «Мы стандартизировали три уровня скругления: Base (4 px), Card (8 px), Modal (12 px). Это позволило сократить время на согласование макетов на 30%.»
• «При работе с дашбордами мы используем минимальное скругление (2–4 px), чтобы сохранить деловой стиль.»
• «Для клиентских приложений — особенно B2C — мы увеличиваем радиус до 12 px, чтобы повысить лояльность.»

Она также отмечает важность документирования: «Стили скругления должны быть описаны в дизайн-гайде вместе с примерами использования. Разработчики должны понимать, где какой радиус применяется.»

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

Заключение

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

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