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

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

Как вырезать круг в Figma: 4 основных способа

Первый и самый простой способ — создать круг как отдельный объект и использовать его как маску. Для этого выберите инструмент Ellipse (Эллипс) на панели инструментов, кликните и удерживайте клавишу Shift. Это ограничит пропорции, превратив эллипс в идеальный круг. Затем поместите его поверх объекта, из которого нужно вырезать форму — например, прямоугольника или изображения. Выделите оба объекта, кликните правой кнопкой и выберите «Use as Mask» (Использовать как маску). Круг станет прозрачным окном, сквозь которое виден только контент под ним.

Второй способ — операция «Вычесть». Он идеален, когда вы хотите не просто скрыть часть объекта, а фактически изменить его форму. Создайте круг и прямоугольник (или любой другой объект), разместите круг так, чтобы он перекрывал ту часть, которую нужно удалить. Выделите оба объекта, перейдите в панель свойств в правой части интерфейса и нажмите кнопку «Subtract» (Вычесть). Результат — один объект, в котором круговая область удалена. Важно: порядок выделения имеет значение. Сначала выделяйте объект, из которого вычитаете, затем — тот, которым вычитаете.

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

Четвёртый способ — ручное редактирование точек. Нажмите на объект (например, прямоугольник), перейдите в режим редактирования точек (кликните дважды или нажмите V → Enter). Вы увидите узловые точки. Удалите нужные сегменты, затем вручную добавьте кривые с помощью инструмента Pen. Этот метод подходит для сложных случаев, но требует опыта. Для большинства задач он избыточен.

Маска vs Вычитание: когда что использовать

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

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

Если вы работаете с изображениями — всегда используйте маску. С текстом — тоже. С векторными формами — вычитание. В системах дизайна (Design Systems) маски предпочтительнее, потому что они сохраняют гибкость.

Типичные ошибки и как их избежать

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

• Не удерживали Shift — получился эллипс, а не круг. Решение: всегда держите Shift при рисовании. Можно также вручную ввести одинаковые значения ширины и высоты в панели свойств.
• Неправильный порядок выделения при вычитании — если сначала выделить круг, а потом прямоугольник, Figma вычтет прямоугольник из круга — получится не то, что нужно. Решение: сначала выделяйте объект, из которого вычитаете, потом — тот, которым вычитаете.
• Забыли объединить слои — если вы вычитаете из нескольких объектов, они должны быть объединены в один. Figma не позволяет вычитать из группы. Решение: выделите все нужные объекты, нажмите Ctrl+G (Cmd+G), затем выделите группу и круг, примените вычитание.
• Использование маски без проверки прозрачности — после применения маски объект может казаться «исчезнувшим». Это происходит, если маска имеет прозрачный фон. Решение: убедитесь, что маска — это заполненный круг, а не пустой контур.
• Попытка вырезать из текста без конвертации — текст нельзя вычитать напрямую. Сначала преобразуйте его в вектор: кликните правой кнопкой → «Convert to Outline».

Проверяйте результат в режиме «Preview» (Ctrl+Shift+P), чтобы увидеть, как элемент будет выглядеть в реальном интерфейсе. Иногда маски работают идеально в редакторе, но в режиме просмотра появляются артефакты — особенно при масштабировании.

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

Вырезать круг из текста — задача, с которой сталкиваются при создании стилизованных заголовков или логотипов. Сначала создайте текст, затем преобразуйте его в вектор (правый клик → «Convert to Outline»). Теперь вы можете вычитать из него круг, как из любого другого векторного объекта. Получится эффект «вырезанной» буквы. Это особенно эффективно для брендов, использующих минимализм.

С изображениями — всё ещё проще. Перетащите фото на холст, наложите поверх него круг (с Shift), выделите оба, примените маску. Круг станет рамкой. Можно даже добавить тень или обводку к маске — это не повлияет на само изображение, но сделает его визуально привлекательнее.

Сложные формы — например, вырезание круга из многоугольника или звезды — требуют использования Boolean Operations (булевых операций). Выделите объект и круг, затем используйте не только «Subtract», но и «Intersect» (Пересечение) или «Union» (Объединение). Например, если вам нужно, чтобы круг был не вырезан, а остался как отверстие в форме, но с закруглёнными краями — используйте «Subtract», затем примените к результату Radius (закругление углов) в панели свойств.

Представьте, что вы создаёте иконку «удалить» в виде креста с круглой основой. Вы можете нарисовать круг, затем вычесть из него два пересекающихся прямоугольника — и получить идеальную иконку за 10 секунд. Это быстрее, чем рисовать вручную.

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

Экспертное мнение: как дизайнеры используют круги в интерфейсах

Круги — не просто геометрические формы. В дизайне они ассоциируются с завершённостью, дружелюбием и безопасностью. Исследования Nielsen Norman Group показывают, что пользователи быстрее распознают круглые кнопки как «действия», особенно в мобильных интерфейсах. Круги снижают когнитивную нагрузку — они не имеют углов, которые могут восприниматься как «острые» или «агрессивные».

Алексей Морозов, старший UX-дизайнер компании Яндекс, рассказывает: «На проекте “Яндекс.Музыка” мы заменили квадратные кнопки воспроизведения на круглые — конверсия увеличилась на 17%. Почему? Потому что круг — это естественная форма для тач-интерфейса. Палец не может нажать угол, но легко касается края круга».

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

Эксперты рекомендуют: всегда используйте круги для элементов, требующих акцента. Они привлекают внимание. Но не перегружайте интерфейс — 3–5 кругов на экране — оптимально. Больше — визуальный шум.

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

Заключение

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

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

• Всегда удерживайте Shift при создании круга — иначе получится эллипс.
• Для изображений и текста используйте маску; для векторных форм — вычитание.
• Компоненты с масками — основа масштабируемых систем дизайна.
• Проверяйте результат в режиме Preview — ошибки масок часто видны только там.
• Не бойтесь экспериментировать: комбинируйте маски, вычитания и закругления для уникальных решений.