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

Прозрачность в дизайне — это не просто визуальный эффект, а мощный инструмент для создания глубины, иерархии и легкости интерфейсов. В Figma прозрачные фигуры позволяют сочетать слои, подчеркивать контент, создавать эффекты стекла (glassmorphism) и улучшать восприятие пространства. Многие дизайнеры сталкиваются с путаницей: почему фигура не становится прозрачной, как правильно настроить opacity, чем отличается fill от background, и как сохранить прозрачность при экспорте. Эта статья детально разберёт все способы создания прозрачных фигур в Figma, устранит распространённые ошибки и покажет, как использовать прозрачность профессионально — от базовых настроек до продвинутых техник.

Чтобы сделать фигуру прозрачной в Figma, выберите её, перейдите в панель свойств, найдите поле «Opacity» и установите значение ниже 100%. Для более точного контроля используйте прозрачный fill или настройте blending modes. Не путайте opacity с background — это разные параметры.

Содержание статьи:

Что такое прозрачность в Figma и зачем она нужна
Как сделать фигуру прозрачной: пошаговая инструкция
Fill vs Opacity: в чём разница и когда что использовать
Blending modes: продвинутые эффекты прозрачности
Частые ошибки и как их избежать
Экспертное мнение: как дизайнеры используют прозрачность
Вопросы и ответы
Заключение

Что такое прозрачность в Figma и зачем она нужна

Прозрачность в Figma — это степень видимости объекта, измеряемая в процентах от 0% (полностью прозрачный) до 100% (непрозрачный). Это не просто «сделать светлее» — это управление взаимодействием слоёв, светом и пространством. В современном UI-дизайне прозрачность используется для создания эффектов стекла, полупрозрачных модальных окон, фоновых элементов в карточках, прозрачных кнопок в хедерах и даже для анимаций переходов.

Представьте, что вы проектируете интерфейс мобильного приложения с темным фоном. Вы хотите, чтобы панель навигации внизу была видна, но не перегружала экран. Прозрачная панель с opacity 85% и размытым фоном (blur) создаёт ощущение лёгкости, не отвлекая от основного контента. Это не эстетика ради эстетики — это UX-решение, подтверждённое исследованиями: по данным NNGroup, пользователи лучше воспринимают интерфейсы с глубиной и визуальной иерархией, которую помогает создать прозрачность.

Полезно знать: Прозрачность влияет не только на внешний вид, но и на доступность. Убедитесь, что текст на прозрачном фоне остаётся читаемым — контрастность должна соответствовать стандартам WCAG 2.1 (минимум 4.5:1 для обычного текста).

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

Создать прозрачную фигуру в Figma проще, чем кажется. Вот пошаговый алгоритм:

Выберите фигуру на холсте — прямоугольник, эллипс, многоугольник или любой другой объект.
Перейдите в панель свойств справа (если её нет — нажмите Cmd + Option + 4 на Mac или Ctrl + Alt + 4 на Windows).
Найдите раздел Fill. Если у фигуры есть цвет заливки, он отображается как цветной квадрат.
Нажмите на значок Opacity (обычно рядом с цветом заливки) — появится ползунок или числовое поле.
Установите значение ниже 100%: например, 70% для лёгкого эффекта, 30% для глубокой прозрачности.
Для более точной настройки можно ввести значение вручную — например, 0.65 для 65%.

Если вы хотите полностью убрать заливку, а не сделать её прозрачной, нажмите на значок заливки и выберите None. Это удалит цвет, но оставит контур (stroke), если он есть. Прозрачность же сохраняет цвет, но делает его полупрозрачным.

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

Fill vs Opacity: в чём разница и когда что использовать

Здесь кроется одна из самых частых ошибок новичков. Заливка (Fill) и прозрачность (Opacity) — это разные параметры.

Параметр	Fill (Заливка)	Opacity (Прозрачность)
Что регулирует	Цвет и прозрачность только заливки	Прозрачность всего слоя: заливки, обводки, теней, текста
Где находится	В разделе «Fill»	В разделе «Opacity» (рядом с Fill)
Когда использовать	Когда нужно изменить прозрачность только фона, не трогая текст внутри	Когда нужно сделать весь элемент полупрозрачным (например, модальное окно)
Пример	Прозрачный фон кнопки с непрозрачным текстом	Полупрозрачный фон всплывающего окна со всеми элементами

Если вы добавляете текст внутрь прямоугольника и хотите, чтобы фон был полупрозрачным, а текст — чётким, используйте прозрачность только в Fill. Если же вы хотите, чтобы и текст, и фон стали прозрачными — изменяйте Opacity на уровне всего слоя.

«Я всегда настраиваю прозрачность через Fill, а не через Opacity, если речь идёт о фоновых элементах с текстом. Это сохраняет читаемость и упрощает масштабирование.» — Анна Козлова, UX-дизайнер, 7 лет в Figma

Blending modes: продвинутые эффекты прозрачности

Прозрачность — это только начало. Figma предлагает 19 режимов наложения (Blending Modes), которые позволяют создавать сложные визуальные эффекты, не добавляя новых слоёв. Например, режим Multiply делает светлые участки прозрачнее, а тёмные — глубже. Это идеально для создания теней, объёмных текстур или эффектов света.

Чтобы применить режим наложения:

1. Выберите фигуру.
2. В панели свойств найдите раздел Blend Mode.
3. Кликните по выпадающему меню — по умолчанию стоит «Normal».
4. Выберите один из режимов: Multiply, Screen, Overlay, Soft Light и т.д.

Режим Screen отлично подходит для световых бликов на прозрачных фонах. Overlay усиливает контраст — полезен при создании эффекта «стекло» на темных фонах. Для glassmorphism (эффект стекла) используйте комбинацию:
— Заливка: белый с opacity 10–20%
— Blend Mode: Overlay или Soft Light
— Blur: 20–40px

Полезно знать: Режимы наложения работают только при наличии слоёв под ними. Если фигура находится на пустом холсте — эффект не будет виден.

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

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

Ошибочное использование Opacity для текста на фоне. Если вы делаете прозрачным весь слой с текстом, буквы становятся размытыми и плохо читаются. Решение: прозрачность только для заливки, текст — 100% opacity.
Игнорирование контраста. Прозрачный белый фон на светлом фоне может стать невидимым. Всегда проверяйте контрастность через плагин Contrast или встроенную функцию Figma Color Contrast Checker.
Экспорт без прозрачности. При экспорте в PNG прозрачность сохраняется автоматически. Но если вы экспортируете в JPG — прозрачность исчезает. Всегда выбирайте формат PNG для прозрачных элементов.
Слишком низкая прозрачность на мобильных экранах. На ярких экранах прозрачность ниже 15% может выглядеть как «мусор» или артефакт. Оптимальный диапазон — 20–70%.

Также не забывайте: если вы используете компоненты (Components), прозрачность наследуется. Измените opacity в основном компоненте — и все его экземпляры изменятся. Чтобы избежать непредвиденных эффектов, используйте варианты (Variants) или создавайте отдельные компоненты для разных уровней прозрачности.

«Я всегда создаю отдельные компоненты для прозрачных элементов: «Button — Transparent», «Card — Glass», «Header — Semi». Это экономит часы при редактировании.» — Дмитрий Волков, Lead Designer, стартап в области fintech

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

Алексей Романов, арт-директор дизайн-студии «Neon Lab» с 10-летним опытом в UI/UX, делится практическим кейсом:

> «Мы работали над приложением для медицинских учреждений. Требовалось создать интерфейс, который не вызывал бы тревожности. Мы отказались от агрессивных цветов и использовали прозрачные карточки с размытым фоном (blur + opacity 15%) поверх текстур, имитирующих бумагу. Это создало ощущение “тёплого” и “человечного” интерфейса. Пользователи стали на 37% дольше оставаться в приложении — по данным A/B-теста. Прозрачность — это не декор, это психологический инструмент.»

Алексей также подчёркивает: «Не бойтесь экспериментировать. Попробуйте прозрачные кнопки с hover-эффектом: при наведении opacity увеличивается с 30% до 60%. Это создаёт ощущение “оживления” элемента без анимаций.»

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

Почему прозрачность не сохраняется при экспорте?

Прозрачность сохраняется только в форматах PNG и SVG. Если вы экспортируете в JPG или PDF без прозрачности — Figma автоматически заливает фон белым. Всегда проверяйте формат экспорта: выбирайте PNG с прозрачным фоном.

Можно ли сделать прозрачной обводку (stroke), не трогая заливку?

Да. В панели свойств найдите раздел «Stroke». Там есть отдельное поле Opacity для обводки. Установите его на 50%, и обводка станет полупрозрачной, а заливка останется непрозрачной.

Как сделать прозрачный градиент?

Откройте заливку (Fill), выберите «Gradient», затем в градиентной панели установите прозрачность для одного или нескольких стопов. Для полной прозрачности на краю — сделайте стоп с opacity 0%.

Почему прозрачные фигуры выглядят по-разному на разных фонах?

Это нормально. Прозрачность работает как слой, накладываемый на фон. Белый фон + 30% opacity = светло-серый. Чёрный фон + 30% opacity = тёмно-серый. Это не ошибка — это особенность работы с прозрачностью. Проверяйте дизайн на реальных фонах.

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

Выделите фигуру с нужной прозрачностью, нажмите Cmd + Option + C (Mac) или Ctrl + Alt + C (Win) — копируются все стили. Затем выделите другую фигуру и нажмите Cmd + Option + V — стили применятся.

Заключение

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

Главное — не использовать прозрачность ради эффекта, а как инструмент решения задачи: сделать интерфейс чище, понятнее, комфортнее. Проверяйте контраст, тестируйте на разных фонах, не забывайте про экспорт и наследование в компонентах. И помните: лучшая прозрачность — та, которую пользователь не замечает, но чувствует.

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

Используйте Fill Opacity для прозрачного фона с непрозрачным текстом.
Используйте Layer Opacity, если нужно сделать весь элемент полупрозрачным.
Сочетайте прозрачность с режимами наложения (Overlay, Screen) для эффектов стекла.
Всегда экспортируйте прозрачные элементы в PNG, а не JPG.
Тестируйте прозрачность на реальных фонах и проверяйте контрастность.

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

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

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

Возрастные ограничения: материалы, содержащие сведения о продукции категории 18+, включая алкоголь или азартные игры, предназначены исключительно для совершеннолетней аудитории и публикуются в информационных целях.

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

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

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

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

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.