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

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

Зачем закруглять только один угол?

Современные интерфейсы всё чаще отказываются от симметричных форм. Одностороннее закругление создаёт ощущение движения, направления или физического взаимодействия. Например, кнопка с закруглённым только верхним правым углом может ассоциироваться с «открывающейся» панелью. Карточка с закруглённым нижним левым углом визуально «прижимается» к краю экрана, создавая эффект тени или глубины. Такие приёмы активно используются в приложениях Apple, Google Material Design 3 и современных SaaS-интерфейсах.

Представьте, что вы проектируете модальное окно, которое «выезжает» справа. Если все углы одинаково закруглены — оно выглядит как стандартный диалог. Но если только правый верхний и правый нижний углы закруглены, а левые — острые, пользователь сразу понимает: этот элемент «прилип» к правому краю. Это не просто эстетика — это когнитивная подсказка. Исследования NNGroup показывают, что визуальные асимметрии, если они логичны, ускоряют восприятие интерфейса на 18–22%.

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

Пошаговая инструкция: как закруглить один угол в Figma

Этот метод работает с любыми векторными объектами: прямоугольниками, текстовыми блоками, фигурами, созданными через Pen Tool. Главное — объект должен быть не группой и не результатом Boolean Operation.

1. Выберите объект, который нужно изменить. Убедитесь, что он выделен — в панели справа появится раздел «Design».
2. Найдите поле «Corner Radius» в разделе «Properties» (в правой панели). По умолчанию там одно поле с одинаковым значением для всех углов.
3. Нажмите на маленький значок «🔗» рядом с полем — он отключит синхронизацию углов. После этого появятся четыре отдельных поля: Top Left, Top Right, Bottom Right, Bottom Left.
4. Введите нужное значение (например, 12) только в поле нужного угла. Остальные три оставьте равными 0.
5. Проверьте результат: если вы ввели значение в «Top Right», только верхний правый угол станет закруглённым, остальные останутся прямыми.

Если вы не видите отдельные поля — убедитесь, что объект не является частью группы. Выделите его, нажмите Cmd+Shift+G (Mac) или Ctrl+Shift+G (Windows), чтобы разгруппировать. Также проверьте, что объект не был преобразован в кастомный патч через «Union» или «Subtract» — в этом случае закругление углов станет недоступным.

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

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

• Ошибка 1: Забыли отключить синхронизацию. Пользователи вводят значение в одно поле и думают, что оно применится только к одному углу — но Figma по-прежнему синхронизирует все. Решение: Всегда проверяйте наличие значка 🔗 — если он закрыт (серый), значит, синхронизация включена.
• Ошибка 2: Использование Boolean Operations. Если вы объединили прямоугольник с кругом или вычли часть — Figma превращает объект в сложный патч, и углы становятся неуправляемыми. Решение: Делайте закругление до применения Boolean. Если уже сделали — используйте маску.
• Ошибка 3: Применение к текстовому блоку без обёртки. Текст сам по себе не имеет углов. Если вы пытаетесь закруглить угол текста — ничего не произойдёт. Решение: Оберните текст в фрейм (Select + Cmd+Shift+R), затем закругляйте фрейм.
• Ошибка 4: Неправильная ориентация. Пользователи путают «Top Left» и «Bottom Right» при работе с макетами в зеркальном отображении. Решение: Включите «Grid» и «Rulers» — они помогут визуально определить, какой угол где находится.

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

Иногда нужно закруглить один угол у нескольких элементов одновременно — например, в списке карточек или в компоненте кнопки. В этом случае ручной ввод каждого угла неэффективен.

Решение — маски. Создайте прямоугольник с нужным закруглённым углом, наложите его поверх основного объекта, выделите оба и нажмите Cmd+Alt+M (Mac) или Ctrl+Alt+M (Windows). Это создаст маску, которая обрежет форму по контуру. Теперь вы можете изменять размер объекта под маской — закругление останется неизменным.

Для повторяющихся элементов — используйте компоненты. Создайте один элемент с нужным закруглением, превратите его в компонент (Right-click → Create Component). Затем, в экземплярах, вы можете переопределять значения углов в панели «Instance» — без потери структуры.

Если вы работаете в команде — настройте стиль закруглений в Design System. Добавьте в библиотеку preset-значения: например, «Corner: Top Right 8» или «Corner: Bottom Left 16». Это ускорит работу и исключит разногласия между дизайнерами.

Также полезно использовать плагины: например, “Corner Radius Manager” или “Figma Corner”. Они позволяют массово применять закругления по типу (например, «только правый»), задавать паттерны и экспортировать настройки в JSON. Особенно полезно при работе с 50+ элементами.

Сравнение с другими инструментами: Figma vs. Adobe XD vs. Sketch

Многие дизайнеры переходят между инструментами и удивляются, почему в других программах закругление одного угла работает иначе. Разберём ключевые различия.

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

Экспертное мнение: почему это важно в UI/UX

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

Он также рекомендует: «Не используйте этот приём везде. Лучше применять его в 1–2 ключевых элементах — тогда он становится маркером, а не шумом.»

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

Заключение

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

Этот приём не требует плагинов, не замедляет работу и не ломает компоненты. Он работает везде: в мобильных приложениях, веб-интерфейсах, визуальных системах. Главное — не переборщить. Используйте его как акцент, а не как правило.

• Отключите синхронизацию углов через значок 🔗 в панели Inspect.
• Вводите значение только для нужного угла — остальные оставьте равными 0.
• Не применяйте к группам и Boolean-объектам — используйте маски или делайте до операций.
• Создавайте компоненты с разными конфигурациями для повторного использования.
• Используйте этот приём умеренно — как визуальный акцент, а не как стандарт.