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

Прозрачный круг в Figma создаётся легко: используй инструмент Ellipse, нарисуй фигуру и уберите заливку или установите прозрачность (Opacity) на 0%. Главное — понимать разницу между отсутствием заливки и нулевой непрозрачностью, чтобы избежать проблем при экспорте.

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

Основы прозрачности в Figma

Figma оперирует несколькими уровнями видимости: заливка (Fill), прозрачность (Opacity), обводка (Stroke) и режим наложения (Blend Mode). Чтобы корректно создать прозрачный круг, важно понимать, как эти параметры взаимодействуют.

Когда вы рисуете круг с помощью инструмента Ellipse (горячая клавиша O), Figma по умолчанию применяет сплошную заливку — чаще всего чёрную или цвет из текущего стиля. Чтобы сделать круг прозрачным, нужно либо удалить заливку, либо установить её непрозрачность на 0%. Оба способа работают, но имеют различия в поведении при экспорте и взаимодействии с другими слоями.

Прозрачность в Figma измеряется в процентах. Значение 100% означает полную непрозрачность, 0% — полную прозрачность. Этот параметр можно настроить как для всего объекта, так и для отдельных его свойств, например, только для заливки или только для обводки.

Инструменты для работы с прозрачностью

• Ellipsis (O) — основной инструмент для создания кругов и эллипсов.
• Fill — настройка заливки в правой боковой панели. Кликните на квадрат с цветом и выберите «No fill» или установите Opacity = 0%.
• Opacity — ползунок в разделе «Design» справа. Расположен рядом с названием слоя.
• Layer visibility — глазик в слое. Полезен для временного скрытия, но не для экспортной прозрачности.

Как создать круг с прозрачностью: пошаговая инструкция

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

1. Откройте Figma и создайте новый файл или откройте существующий проект.
2. Выберите инструмент Ellipse на панели слева или нажмите клавишу O.
3. Удерживая Shift, кликните и потяните мышь, чтобы нарисовать идеальный круг (Shift ограничивает пропорции).
4. Перейдите в правую панель (если она скрыта — нажмите D или кликните на значок «Design») и найдите раздел «Fill».
5. Нажмите на квадрат с цветом и выберите опцию «No fill» (иконка с крестиком и диагональной линией).
6. Если нужна обводка, добавьте Stroke, выбрав цвет, толщину и расположение (Inside, Outside, Center).
7. Для полной прозрачности установите Opacity = 0% в верхней части панели Design.
8. Проверьте результат: круг должен быть невидимым, но при этом оставаться активным слоем в дереве объектов.

Альтернативный способ: использование Opacity

Если вы хотите временно скрыть круг или анимировать его появление, установка Opacity = 0% предпочтительнее. Этот метод сохраняет заливку, но делает её невидимой. Пригодится в прототипировании.

Разница между нулевой заливкой и null opacity

На первый взгляд, «удалить заливку» и «сделать Opacity = 0%» — одно и то же. Но это не так. Различия проявляются при экспорте, работе с эффектами и совместной разработке.

Когда что использовать?

• No Fill — когда вы точно знаете, что круг не должен иметь фона. Например, при создании кнопки с обводкой или маски.
• Opacity = 0% — для анимаций, скрытия слоёв, временных состояний. Также удобно при A/B-тестировании дизайна.

Экспертные советы по использованию прозрачных кругов

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

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

Прозрачный круг может служить маской для изображений или других объектов. Создайте круг, примените к нему маску (через правую клик → «Mask with [shape]») и поместите изображение внутрь. Это создаёт эффект круглого портрета или акцента.

Анимация появления

В прототипах прозрачные круги часто используются как начальные состояния. Например, лоадер начинается с Opacity = 0%, затем плавно увеличивается до 100%. Это достигается через переходы в Prototyping.

Интерактивные элементы

Кнопки с обводкой и прозрачной заливкой — стандартный паттерн. Они выглядят легче, чем сплошные, и хорошо сочетаются с фоном. Убедитесь, что контраст обводки достаточен для доступности.

Создание визуальных эффектов

Комбинируйте прозрачный круг с внешними тенями (Drop Shadow) или размытием (Blur). Даже без заливки такие эффекты будут видны, создавая ощущение объёма.

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

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

Ошибка 1: Экспорт с белым фоном

Многие жалуются: «Я сделал круг прозрачным, а при экспорте он на белом фоне!» Причина — в настройках экспорта. По умолчанию Figma может экспортировать PNG с белым фоном.

Решение: Перед экспортом убедитесь, что в настройках экспорта выбрано «Transparent background». Это можно сделать в правой панели при добавлении export-правила.

Ошибка 2: Скрытая заливка мешает верстке

Иногда дизайнер оставляет заливку с Opacity = 0%, но забывает про это. При передаче макета разработчику тот видит цвет и может случайно его активировать.

Решение: Регулярно проводите аудит слоёв. Используйте плагины вроде «Cleaner for Figma», которые находят скрытые заливки и неиспользуемые стили.

Ошибка 3: Неверное расположение обводки

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

Решение: В настройках Stroke выберите «Outside» для внешнего контура или «Inside» для внутреннего. Это особенно важно при масштабировании.

Практические примеры использования

Рассмотрим, где на практике применяются прозрачные круги.

Мобильные интерфейсы

Круглые аватарки с обводкой — классика. Фон прозрачный, чтобы не конфликтовать с карточками или списками. Часто используется комбинация: изображение + обводка + тень.

Веб-дизайн

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

Анимации и микроинтеракции

При нажатии на кнопку может появляться волна (ripple effect). Она начинается с маленького прозрачного круга, который увеличивается и становится полупрозрачным. Реализуется через Prototyping и easing.

Дашборды и индикаторы

Круговые прогресс-бары часто имеют прозрачный фон. Один круг — фон (серый, тонкий), второй — прогресс (цветной, динамический). Прозрачность позволяет встраивать такой элемент в любую тему.

Экспертное мнение

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

Заключение

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

• Используйте No Fill для явного удаления фона.
• Применяйте Opacity = 0% для анимаций и временных состояний.
• Проверяйте настройки экспорта: выбирайте прозрачный фон.
• Комбинируйте прозрачные круги с обводкой, тенью и масками.
• Тестируйте поведение слоя в Prototyping и при передаче разработчикам.