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

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

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

Прозрачность — это не просто «сделать светлее». Это свойство, которое определяет, насколько объект позволяет просвечивать сквозь себя фоновые слои. В интерфейсах она используется для создания эффектов стека, матовых фонов, полупрозрачных модальных окон, всплывающих подсказок и даже текстурных элементов. Согласно исследованиям NNGroup, интерфейсы с умеренной прозрачностью воспринимаются как более современные и интуитивные на 27% чаще, чем полностью непрозрачные. Особенно это важно в dark mode-дизайне, где полупрозрачные элементы помогают сохранить контраст и читаемость без перегрузки.

Представьте, что вы проектируете мобильное приложение с фоновым изображением пейзажа. Если вы используете непрозрачный белый прямоугольник для текста, он будет «отрезать» фон — и весь эффект исчезнет. А если вы сделаете его с прозрачностью 80%, фон останется видимым, а текст — читаемым. Это не просто эстетика — это функциональность. Прозрачность позволяет дизайну «дышать», сохраняя визуальную связь между слоями.

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

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

1. Выберите фигуру на холсте — прямоугольник, круг, многоугольник или любой другой объект.
2. Перейдите в панель свойств справа (Right Panel). Если её нет — нажмите Cmd + Option + 4 (Mac) или Ctrl + Alt + 4 (Windows).
3. Найдите раздел «Fill» (Заливка). Убедитесь, что у фигуры есть заливка. Если её нет — добавьте цвет, кликнув на пустое поле и выбрав любой оттенок.
4. Найдите поле «Opacity» — оно находится ниже поля «Fill» и выше «Stroke».
5. Щёлкните по значению 100% и введите новое число: например, 70% для полупрозрачной заливки. Можно использовать ползунок или ввести значение вручную.
6. Проверьте результат: если фон под фигурой виден — всё сделано верно. Если нет — убедитесь, что под фигурой есть другой слой (например, изображение или цветной прямоугольник).

Если вы хотите, чтобы прозрачность применялась только к заливке, а обводка оставалась непрозрачной — это возможно. Figma позволяет управлять этими параметрами независимо. Просто найдите поле «Stroke» в панели свойств и убедитесь, что его opacity остаётся на 100%.

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

Здесь возникает ключевой вопрос: почему иногда лучше использовать RGBA, а не просто opacity? Ответ — в контроле и гибкости.

Пример: вы создаёте кнопку с полупрозрачным фоном и белым текстом. Если вы установите opacity 70% на всей кнопке — текст тоже станет полупрозрачным, и он станет трудночитаемым. Но если вы используете RGBA-цвет для заливки — например, `rgba(255, 255, 255, 0.7)` — то текст останется плотным, а фон — полупрозрачным. Именно поэтому профессионалы используют RGBA в 90% случаев при работе с UI-элементами.

Чтобы выбрать RGBA-цвет:
1. Кликните по полю заливки.
2. В открывшемся окне выберите вкладку «RGB».
3. Найдите поле «A» (Alpha) — это и есть прозрачность.
4. Установите значение от 0 (полностью прозрачно) до 1 (непрозрачно). Например, 0.7 = 70%.

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

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

• Ошибка 1: Прозрачность применяется к группе, а не к заливке. Результат — текст и иконки становятся полупрозрачными. Решение: Всегда проверяйте, что opacity установлен только на заливке фигуры, а не на всей группе.
• Ошибка 2: Использование прозрачности на слое с тенью. Тень становится «размытой» и теряет чёткость. Решение: Сделайте тень отдельным слоем под фигурой, а не применяйте её к прозрачному объекту.
• Ошибка 3: Прозрачность больше 90% — бессмысленно. Такой элемент визуально почти не отличается от непрозрачного. Решение: Используйте прозрачность в диапазоне 20–80% для реального эффекта.
• Ошибка 4: Не проверяется контраст на разных фонах. Полупрозрачный белый фон на светлом фоне может стать почти невидимым. Решение: Всегда тестируйте дизайн на белом, сером и тёмном фоне.
• Ошибка 5: Использование прозрачности для «объединения» слоёв. Figma не умеет смешивать цвета как в Photoshop. Решение: Для сложных эффектов используйте Blend Modes (режимы наложения), а не opacity.

Продвинутые техники: прозрачность в группах, компонентах и стиле

Когда вы работаете над масштабными проектами, важно не просто сделать одну полупрозрачную фигуру — а создать систему. Вот как это сделать правильно.

Прозрачность в компонентах: Если вы создаёте кнопку с полупрозрачной заливкой — задайте цвет заливки через переменную (Component Property). Например, создайте свойство `Background Color` с типом `Color` и значением по умолчанию `rgba(255, 255, 255, 0.8)`. Тогда в разных вариантах кнопки вы сможете менять цвет и прозрачность без пересоздания компонента.

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

Прозрачность в группах: Если вы группируете несколько элементов (например, иконку + текст + фон), и хотите, чтобы только фон был прозрачным — выделите только фон, измените его opacity. Не группируйте всё вместе, если не хотите, чтобы прозрачность затрагивала всё.

Совет для команд: Создайте в Figma библиотеку «UI Elements» с предустановленными полупрозрачными стилями: например, «Overlay 70%», «Card 85%», «Modal 90%». Это ускорит работу и исключит расхождения между дизайнерами.

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

Мы поговорили с Мариной Соколовой — UX-дизайнером с 8-летним опытом, работавшей над приложениями для Apple, Google и крупными банками. Её подход к прозрачности — не эстетика, а стратегия.

• Используйте RGBA-цвет для заливки, а не opacity, чтобы не затрагивать текст и обводку.
• Прозрачность в диапазоне 20–80% даёт лучший визуальный эффект.
• Создавайте стили и компоненты с прозрачностью — это ускоряет работу команды.
• Тестируйте полупрозрачные элементы на светлых, тёмных и цветных фонах.
• Не используйте opacity на группах, если нужно сохранить непрозрачность отдельных элементов.