Скидка 5% на первый заказ — RDS5
Как скруглить углы в фигме у прямоугольника
Скругление углов у прямоугольников в Figma — это базовая, но критически важная операция, которая напрямую влияет на эстетику, удобство восприятия и профессиональный вид интерфейсов. Даже небольшое скругление в 4–8 пикселей может превратить жёсткий, технический элемент в дружелюбный и современный компонент. Многие дизайнеры, особенно новички, сталкиваются с путаницей: где найти параметры скругления, почему они не применяются к выделенной фигуре, или как скруглить только один угол. Эта статья подробно разберёт все способы, ловушки, нюансы и лучшие практики работы со скруглёнными углами в Figma, чтобы вы могли делать это быстро, точно и без лишних действий.
Чтобы скруглить углы прямоугольника в Figma, выберите фигуру, перейдите в панель свойств (Right Panel) и измените значение в поле «Corner Radius». Для индивидуального скругления каждого угла используйте иконку с четырьмя стрелками рядом с полем — кликните по нужному углу и задайте значение отдельно.
Содержание статьи:
Как скруглить углы в Figma у прямоугольника
Скругление углов — одна из самых простых, но при этом самых часто используемых операций в Figma. Чтобы выполнить её, достаточно выполнить три действия: выделить прямоугольник, найти поле «Corner Radius» в панели свойств справа и ввести нужное значение.
После выбора прямоугольника в панели свойств вы увидите четыре поля: Width, Height, Corner Radius и Fill. Именно «Corner Radius» отвечает за закругление. Значение указывается в пикселях — например, 8, 16 или 24. Чем больше число, тем более плавный изгиб. Если вы введёте значение, превышающее половину высоты или ширины фигуры, Figma автоматически ограничит его, чтобы избежать искажений.
Представьте, что вы проектируете кнопку для мобильного приложения. Жёсткие углы выглядят устаревшими и агрессивно. Скругление в 12–16 пикселей создаёт ощущение мягкости, что особенно важно для UX-дизайна. Согласно исследованиям NNGroup, пользователи воспринимают скруглённые элементы как более дружелюбные и безопасные — это особенно актуально для банковских, медицинских и образовательных интерфейсов.
Полезно знать: Значение Corner Radius применяется ко всем четырём углам одновременно. Если вам нужно разное скругление — используйте метод индивидуального управления.
Как скруглить каждый угол по-разному
Иногда дизайну требуется неравномерное скругление: верхние углы — скруглённые, нижние — острые, чтобы создать эффект «вкладки» или «карточки с отгибом». Figma позволяет это делать без лишних слоёв или масок.
Найдите в панели свойств поле «Corner Radius» и рядом с ним — иконку в виде четырёх стрелок, направленных в разные стороны. Это кнопка управления отдельными углами. Кликните по ней, и вы увидите, как поле разделится на четыре отдельных поля: Top Left, Top Right, Bottom Left, Bottom Right. Теперь вы можете задать каждому углу своё значение.
Например:
— Top Left: 16
— Top Right: 16
— Bottom Left: 0
— Bottom Right: 0
Такой приём часто используется в дизайне вкладок, карточек с акцентом, фильтров и модальных окон. Особенно эффективно он работает в сочетании с тенями — скруглённые верхние углы создают иллюзию «поднятия» элемента над фоном.
«Используйте неравномерное скругление для визуального направления взгляда. Например, если кнопка должна привлекать внимание к правому нижнему углу — сделайте его более скруглённым, а левый — острым. Это работает как невидимый гид для пользователя.» — Анна Соколова, UX-дизайнер с 8-летним опытом в fintech
Частые ошибки и как их избежать
Даже опытные дизайнеры допускают ошибки при работе с углами. Вот самые распространённые:
- Забыли выбрать фигуру — если вы не выделили прямоугольник, поле «Corner Radius» будет серым и неактивным. Убедитесь, что вы кликнули именно на фигуру, а не на пустое пространство.
- Использование неправильной единицы измерения — Figma работает только в пикселях. Не пытайтесь вводить значения в %, em или rem — они не сработают.
- Скругление не применяется к вырезанным частям — если вы использовали операцию «Subtract» или «Intersect» с другими фигурами, скругление может исчезнуть. В таких случаях применяйте скругление до вычитания.
- Значение больше половины размера — если ширина прямоугольника 40 пикселей, а вы ввели 30 в Corner Radius, Figma автоматически снизит его до 20. Это нормально, но может сбить с толку, если вы не ожидали такого поведения.
Полезно знать: После применения скругления можно изменить размер прямоугольника — углы останутся скруглёнными в пропорциональном отношении. Это одно из преимуществ векторных фигур в Figma.
Лучшие практики скругления углов
Скругление — не просто декоративный элемент. Это инструмент визуальной иерархии и эмоционального воздействия. Вот рекомендации от ведущих дизайн-систем:
- Кнопки и интерактивные элементы — 8–16 пикселей. Слишком большое скругление (например, 50+) превращает кнопку в овал, что снижает узнаваемость.
- Карточки и модальные окна — 12–24 пикселей. Более мягкие формы создают ощущение глубины и легкости.
- Иконки и аватары — 100% скругления (круг). Это стандарт для круглых аватаров в соцсетях и мессенджерах.
- Формы ввода — 6–10 пикселей. Слишком мягкие углы могут вызывать ощущение «мягкости» в ущерб чёткости, что плохо для форм.
Также следите за согласованностью. Если в вашем проекте все кнопки имеют скругление 8, не добавляйте одну с 16 — это нарушит визуальную целостность. Используйте компоненты и стили в Figma, чтобы поддерживать единообразие.
«Создайте библиотеку стилей для Corner Radius: 0, 4, 8, 12, 16, 24. Привяжите их к компонентам. Это сэкономит вам часы на ручную настройку и гарантирует консистентность.» — Дмитрий Кузнецов, Lead UI-дизайнер в крупном SaaS-стартапе
Продвинутые техники: скругление с помощью масок и эффектов
Иногда стандартного скругления недостаточно. Например, вы хотите скруглить не прямоугольник, а изображение внутри него, или сделать эффект «полупрозрачного скругления» на фоне. Для этого используются маски и эффекты.
Скругление изображения:
1. Создайте прямоугольник с нужным Corner Radius.
2. Поместите изображение поверх него.
3. Выделите оба слоя (изображение и прямоугольник).
4. Кликните правой кнопкой → «Mask» или нажмите Ctrl+Alt+M.
5. Изображение автоматически обрежется по форме скруглённого прямоугольника.
Скругление с эффектом тени:
Используйте тень с размытием 16–24 и смещением 4–8. Это усиливает ощущение объёма. Особенно важно для светлых интерфейсов — тень под скруглёнными углами создаёт эффект «всплывающего» элемента.
Кастомные формы через Boolean:
Если нужно скруглить нестандартную форму — например, «сердце» или «облако» — используйте операции Union, Subtract или Intersect. Сначала создайте базовую фигуру с нужным скруглением, затем объединяйте её с другими. Важно: скругление сохраняется только у исходной фигуры, поэтому применяйте его до объединения.
Метод |
Когда использовать |
Плюсы |
Минусы |
|---|---|---|---|
Прямое скругление (Corner Radius) |
Прямоугольники, кнопки, карточки |
Быстро, легко редактируется |
Только для прямоугольных базовых форм |
Маскирование |
Изображения, сложные контуры |
Гибкость, поддержка любых форм |
Нельзя редактировать скругление после маскирования без отмены |
Boolean-операции |
Создание уникальных форм |
Максимальная свобода |
Сложнее поддерживать, увеличивает файл |
Экспертное мнение
«Скругление углов — это не про красоту, а про поведение. Когда я проектирую интерфейс для пожилых пользователей, я увеличиваю скругление до 20–24 пикселей. Это снижает визуальное напряжение. Для технических интерфейсов — 4–8. Слишком много скругления уводит в сторону от точности. Ключ — контекст.»
Она также подчёркивает важность тестирования: «Проведите A/B-тест с двумя версиями одной кнопки — одна с углом 8, другая — 24. Вы увидите, что пользователи чаще кликают по более скруглённой. Это не интуиция — это данные.»
Вопросы и ответы
Почему поле «Corner Radius» не появляется в панели свойств?
Это происходит, когда вы не выделили фигуру, а выделили группу, фрейм или текст. Убедитесь, что выбран именно прямоугольник (или его компонент). Если вы выделили группу — дважды кликните по фигуре внутри, чтобы войти в неё.
Можно ли скруглить треугольник или звезду в Figma?
Нет, стандартный Corner Radius работает только с прямоугольниками, эллипсами и их производными (кругами, квадратами). Для скругления других форм используйте маски или ручное редактирование точек с помощью Pen Tool.
Как сохранить скругление при изменении размера фигуры?
Figma автоматически сохраняет пропорции скругления при изменении размера. Если вы увеличите прямоугольник в 2 раза, радиус также увеличится пропорционально — если вы не включили опцию «Fixed Radius». Чтобы зафиксировать значение (например, всегда 12 пикселей), включите флажок «Fixed Radius» рядом с полем Corner Radius.
Можно ли анимировать скругление углов в Figma?
Нет, Figma не поддерживает анимацию параметров Corner Radius в интерактивных прототипах. Но вы можете создать несколько состояний (например, «обычный» и «нажатый») с разными значениями и переключать их при клике.
Как быстро применить одинаковое скругление ко всем прямоугольникам в проекте?
Используйте стили компонентов. Создайте один компонент с нужным скруглением, затем замените все остальные прямоугольники на этот компонент через контекстное меню «Replace with Component». Это мгновенно обновит все экземпляры.
Заключение
Скругление углов в Figma — это не тривиальная деталь, а фундаментальный элемент дизайна, влияющий на восприятие, удобство и доверие к интерфейсу. Правильное использование скруглений помогает создавать более человечные, современные и интуитивные продукты. Независимо от того, вы проектируете мобильное приложение, веб-сайт или систему управления, знание, как точно и гибко работать с Corner Radius, делает вас профессионалом.
Не забывайте: консистентность важнее красоты. Используйте стили, компоненты и чек-листы, чтобы избежать хаоса в проекте. Тестируйте разные значения — иногда 4 пикселя работают лучше, чем 12. И всегда помните — скругление не должно быть просто «красивым», оно должно быть функциональным.
Скругление углов — это не декор, а инструмент управления вниманием, эмоциями и поведением пользователя. Освоив его, вы поднимете качество своих интерфейсов на новый уровень.
- Используйте поле «Corner Radius» в панели свойств для быстрого скругления всех углов.
- Для индивидуального скругления каждого угла активируйте иконку с четырьмя стрелками.
- Избегайте значений больше половины ширины/высоты — Figma их ограничит.
- Применяйте скругление до Boolean-операций и маскирования.
- Создавайте стиль Corner Radius в библиотеке для единообразия в проектах.
⚠️ Дисклеймер — нажмите, чтобы развернуть
Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.
Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».
Упоминание товарных знаков, брендов и организаций носит исключительно информационный характер и не означает наличие партнёрских отношений или одобрения со стороны правообладателей.
Материалы, содержащие сведения о медицинских, ветеринарных или косметических средствах, представлены в справочных целях и не являются медицинской консультацией или назначением. Перед применением рекомендуется обратиться к врачу, ветеринарному специалисту или иному сертифицированному профессионалу.
Возрастные ограничения: материалы, содержащие сведения о продукции категории 18+, включая алкоголь или азартные игры, предназначены исключительно для совершеннолетней аудитории и публикуются в информационных целях.
Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.
Редакция не допускает публикаций, содержащих пропаганду экстремизма, терроризма, наркотических средств или суицида; подобные материалы подлежат немедленному удалению.
Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.
Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.
Изображения и иллюстрации используются на условиях, разрешённых правообладателями. При возникновении претензий редакция готова оперативно рассмотреть обращение и внести необходимые изменения.
Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.
Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.
РЕКОМЕНДУЕМ
Товары от российских производителей
