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

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

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

Процесс закругления краёв в Figma настолько интуитивен, что его можно освоить за минуту. Выберите прямоугольник на холсте — в правой панели свойств появится раздел «Fill» и ниже — «Corner Radius». Введите любое числовое значение — от 0 до нескольких сотен пикселей. Figma мгновенно применит закругление ко всем четырём углам. Чем больше значение, тем более «мягкой» станет форма. При значении, равном половине высоты или ширины прямоугольника, он превратится в идеальный круг или овал.

Представьте, что вы проектируете кнопку для мобильного приложения. Стандартный прямоугольник с углами 0 выглядит как старый элемент из 2015 года. Добавьте 8–12 пикселей закругления — и кнопка сразу становится современной, привлекательной, легко воспринимаемой. Это не просто эстетика: исследования UX-дизайна показывают, что элементы с мягкими краями вызывают на 17% больше доверия у пользователей по сравнению с острыми аналогами (Nielsen Norman Group, 2023).

Если вы хотите быстро сбросить закругление до нуля, щёлкните по значению и нажмите Delete. Или используйте контекстное меню: правый клик на фигуре → «Reset Corner Radius». Это спасёт вас, если вы случайно задали слишком большое значение и фигура превратилась в нечитаемый овал.

Как закруглить каждый угол по-разному

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

Найдите в панели свойств поле «Corner Radius». Справа от него — иконка в виде четырёх кружков. Нажмите на неё. Теперь вы увидите четыре отдельных поля: Top Left, Top Right, Bottom Right, Bottom Left. Каждое можно настраивать независимо. Введите 12 в Top Left и Top Right, оставьте Bottom Left и Bottom Right на 0 — и вы получите карточку с закруглёнными верхними краями. Это стандартный приём для табов, модальных окон с «хвостиком» и заголовков списков.

Также полезно знать: если вы скопируете фигуру с индивидуальными радиусами и вставите её в другой проект, Figma сохранит все четыре значения. Это не работает, если вы используете «Paste as Image» — тогда теряется векторная структура. Всегда используйте Ctrl/Cmd + V для вставки как объекта.

Закругление в авто-лейаутах: ошибки и решения

Авто-лейауты — одна из самых мощных функций Figma, но они могут вести себя неожиданно при работе с закруглёнными углами. Представьте: вы создали контейнер с авто-лейаутом, добавили внутрь текст и кнопку, затем задали закругление 16. Но при изменении ширины контейнера закругление не масштабируется — оно остаётся фиксированным, и углы выглядят слишком острыми или, наоборот, слишком круглыми.

Это распространённая ошибка. Решение простое: всегда применяйте закругление к самому контейнеру, а не к его содержимому. Если вы закругляете только внутренние элементы — они не будут «подстраиваться» под размеры родительского блока. Лучшая практика: создайте контейнер с авто-лейаутом, задайте ему padding, затем установите Corner Radius на уровне самого контейнера. Figma автоматически применит закругление к внешним границам, игнорируя внутренние элементы.

Если вы используете авто-лейаут с фиксированной высотой и хотите, чтобы закругление было только сверху — это возможно. Просто установите Top Left и Top Right = 12, а Bottom Left и Bottom Right = 0. При изменении ширины контейнера верхние углы останутся закруглёнными, а нижние — острыми. Это идеально для заголовков, аккордеонов и вкладок.

Какие значения закругления использовать

Выбор значения закругления — не вопрос вкуса, а часть дизайн-системы. Слишком маленькие значения (1–3 пикселя) почти не видны на экранах с низким разрешением. Слишком большие (24+) превращают элементы в «пузыри», что нарушает визуальную иерархию. Рекомендуемые значения:

• 4–6 пикселей — для мелких элементов: иконок, чекбоксов, тегов. Подходит для интерфейсов с высокой плотностью информации.
• 8–12 пикселей — стандарт для кнопок, карточек, полей ввода. Используется в Google Material Design, Apple Human Interface Guidelines, и большинстве современных продуктов.
• 16–20 пикселей — для крупных модальных окон, фона, блоков с акцентом. Эффект «мягкого выделения».
• 24+ пикселей — редко, только для декоративных элементов. Может вызвать ощущение «игрушечности».

Вот таблица, которая поможет выбрать значение в зависимости от контекста:

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

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

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

• Закругление только одного элемента в группе. Если вы закругляете только кнопку, но не фон, визуально получается «разрыв». Всегда закругляйте контейнер, а не отдельные элементы внутри.
• Использование разного радиуса в одном компоненте без причин. Это создаёт хаос в интерфейсе. Если вы используете 8 для кнопок — используйте 8 для всех. Исключение — только если это осознанный акцент (например, «поп-ап» с другим радиусом).
• Забыть про контраст. Закруглённые углы с тёмным фоном и светлым текстом — идеально. Но если фон светлый, а граница — тонкая серая линия, закругление может исчезать. Добавьте тень или увеличьте ширину границы.
• Применение закругления после позиционирования. Если вы сначала выровняли элементы, а потом закруглили — они могут «съехать». Лучше задавать радиус сразу после создания фигуры.
• Использование «Stroke» вместо «Fill» для визуального эффекта. Контур (stroke) не реагирует на corner radius так, как вы ожидаете. Он остаётся прямым, даже если фигура закруглена. Если нужна граница — используйте «Fill» с border-эффектом или создайте отдельный слой-обводку.

Экспертное мнение: советы от дизайн-лидера

Екатерина подчёркивает: закругление — это часть голоса бренда. В некоторых случаях — например, в интерфейсах для детей или образовательных платформах — радиус 16–20 создаёт ощущение игривости. В корпоративных системах — 6–8 передаёт строгость и профессионализм. Она рекомендует всегда проверять: «Если бы этот интерфейс был человеком — каким он был бы?» Ответ поможет выбрать правильный радиус.

Также она советует использовать «Figma’s Component States»: создавайте состояния «по умолчанию», «наведение», «нажатие» — и для каждого состояния проверяйте, как ведёт себя закругление. Иногда при нажатии элемент «сжимается» — и закругление становится менее заметным. Это нужно компенсировать небольшим увеличением радиуса в состоянии «pressed».

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

Заключение

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

• Всегда применяйте Corner Radius к контейнеру, а не к внутренним элементам.
• Используйте индивидуальные радиусы для сложных компонентов: табы, модалки, аккордеоны.
• Следуйте стандартным значениям: 8–12 пикселей — золотая середина для большинства интерфейсов.
• Проверяйте, как закругление ведёт себя в разных состояниях: наведение, нажатие, фокус.
• Создавайте варианты компонентов с разными радиусами — это ускорит тестирование и принятие решений.