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

В дизайне интерфейсов форма — это не просто геометрия, а инструмент восприятия. Прямоугольники с острыми углами воспринимаются как жёсткие, технологичные, иногда угрожающие. Скруглённые углы, напротив, создают ощущение мягкости, доступности и современности. Именно поэтому в 2026 году более 87% популярных интерфейсов (по данным Figma State of Design) используют скругления в диапазоне от 4 до 16 пикселей. Если вы работаете в Figma — вы не просто рисуете элементы, вы формируете эмоциональный отклик пользователя. И умение правильно скруглять углы — один из базовых навыков профессионального дизайнера.

Зачем скруглять углы в дизайне интерфейсов

Скруглённые углы — это не модный тренд, а результат исследований когнитивной психологии. Исследование Nielsen Norman Group (2023) показало, что пользователи быстрее распознают и воспринимают элементы с лёгким скруглением (радиус 4–8 пикселей) как «дружелюбные» и «интуитивные». Особенно это критично для кнопок, карточек, полей ввода — тех элементов, с которыми пользователь взаимодействует напрямую.

Представьте: вы смотрите на два интерфейса. Один — с резкими углами, как у старого экрана монитора 90-х; второй — с плавными скруглениями, как у современного смартфона. Какой кажется более надёжным? Скорее всего — второй. Это связано с тем, что человеческий мозг ассоциирует острые формы с опасностью, а округлые — с безопасностью и комфортом.

Кроме того, скругления снижают визуальную нагрузку. Жёсткие углы создают «визуальные шумы» — точки, где линии пересекаются под прямым углом. Эти точки притягивают взгляд, даже если не должны. Скругление сглаживает эти точки, направляя внимание туда, где оно нужно — на контент, а не на рамки.

Как скруглить углы в Figma: базовый способ

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

1. Выберите прямоугольник на холсте. Убедитесь, что он именно прямоугольник, а не группа или фрейм с заливкой.
2. Перейдите в правую панель (Properties Panel). Она открывается автоматически при выборе любого объекта.
3. Найдите раздел Corner Radius. Он расположен под параметрами Fill и Stroke.
4. В поле введите число — например, 8. Это значение применится ко всем четырём углам одновременно.
5. Нажмите Enter. Фигура мгновенно изменит форму.

Вы можете использовать как целые числа, так и десятичные: 4.5, 12.7 — Figma поддерживает точность до одного знака после запятой. Это особенно полезно при работе с высокодетализированными интерфейсами, например, для Apple Watch или умных часов.

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

Скругление каждого угла отдельно

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

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

1. Выберите прямоугольник.
2. В поле Corner Radius нажмите на маленький значок с четырьмя квадратами — он появляется справа от поля ввода.
3. Откроется режим Individual Corner Radii. Теперь вы видите четыре поля: верхний левый, верхний правый, нижний правый, нижний левый.
4. Введите нужные значения: например, 12, 12, 0, 0 — скругляются только верхние углы.
5. Нажмите Enter. Каждый угол изменится независимо.

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

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

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

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

Если вы применяете градиентную заливку к прямоугольнику, скругление сохраняется автоматически. Но важно: градиент будет следовать контуру скруглённой формы. Это создаёт ощущение объёма. Попробуйте:
— Градиент сверху вниз: от светлого к тёмному — эффект «подсветки»;
— Диагональный градиент: от левого верхнего к правому нижнему — для динамичных кнопок.

Использование масок

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

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

Это идеально для аватаров, карточек с фото и слайдеров.

Анимация скругления

В Figma можно анимировать изменение радиуса скругления с помощью прототипирования. Например:
— При наведении кнопка «раскрывается» — радиус меняется с 0 до 12.
— При клике карточка «разворачивается» — нижние углы становятся скруглёнными.

Для этого:
1. Создайте два состояния: с радиусом 0 и с радиусом 12.
2. Перейдите в режим прототипирования.
3. Установите переход «Hover» или «Click».
4. Выберите «Smart Animate» — Figma автоматически сгенерирует плавное изменение формы.

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

Даже опытные дизайнеры допускают ошибки, которые портят восприятие интерфейса.

Ещё одна распространённая ошибка — использование скругления для всех элементов подряд. Это приводит к «визуальному шуму». Не нужно скруглять линии разделителей, иконки, текстовые метки. Скругление должно работать как акцент — только там, где важна интерактивность.

Экспертное мнение: как скругления влияют на юзабилити

Дмитрий отмечает, что скругления — это не про красоту, а про снижение когнитивной нагрузки. Когда элементы не «режут» глаз, мозг тратит меньше ресурсов на обработку визуальной информации. Это особенно важно для:
— Пожилых пользователей;
— Людей с нарушениями зрения;
— Пользователей в условиях плохого освещения (например, в метро).

Его рекомендация: всегда тестируйте скругления с реальными пользователями. Даже 5 человек — и вы увидите, где они «застревают». Часто это происходит именно на границах: если угол слишком резкий — пользователь не замечает, что это кнопка.

Часто задаваемые вопросы

Заключение

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

Помните: лучший дизайн — это тот, о котором пользователь не думает. Он просто чувствует, что всё «работает» и «понятно». Скругления — один из ключевых инструментов, который помогает достичь этого состояния.

• Используйте радиус 4–12 пикселей для основных элементов — это оптимальный баланс между мягкостью и чёткостью.
• Разные углы — это мощный инструмент для визуальной иерархии: верхние скругления для табов, нижние — для карточек.
• Избегайте скругления текста и линий — это нарушает читаемость и создаёт визуальный шум.
• Всегда тестируйте скругления в реальных условиях: на разных экранах, с разным освещением, с пользователями разных возрастов.
• Используйте Smart Animate для анимации скруглений — это создаёт ощущение живого интерфейса.