Как в фигме сделать тень объекта

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

Как добавить тень в Figma

Добавить тень в Figma проще, чем кажется. Выберите любой объект — прямоугольник, иконку, текстовое поле или группу. Перейдите в панель свойств справа и найдите раздел «Shadow». Если вы видите только кнопку «+», значит, тень ещё не добавлена. Нажмите её — и сразу появится стандартная тень с параметрами по умолчанию: смещение X=0, Y=4, размытие=4, цвет #000000, прозрачность=25%.

Этого достаточно для базового эффекта, но для профессионального дизайна нужно глубже. Не забудьте, что тень работает только на уровне самого объекта — если вы хотите, чтобы тень была у группы, сгруппируйте элементы до применения тени. Иначе тень применится только к верхнему слою.

Чтобы быстро применить тень ко многим объектам одновременно, выделите их все — и настройки будут применены ко всем сразу. Это особенно удобно при работе с кнопками, карточками или элементами списка. Также можно скопировать тень с одного объекта на другой с помощью Ctrl/Cmd + C и Ctrl/Cmd + Shift + V («Вставить стили»).

Как работают настройки тени: смещение, размытие, цвет

Каждый параметр тени в Figma играет свою роль в восприятии глубины. Давайте разберём их по порядку.

Смещение (X и Y) определяет направление источника света. Если вы хотите, чтобы тень была под объектом — оставьте X=0, Y=4. Для бокового освещения — увеличьте X до 8–12, Y оставьте 0–4. Для эффекта «вспышки сверху» используйте отрицательное значение Y: например, X=0, Y=-3.

Размытие (Blur) отвечает за мягкость краёв. Маленькое значение (1–5) создаёт жёсткую, «резкую» тень — подходит для твёрдых поверхностей, как стекло или металл. Значения 8–16 — идеальны для мягкого освещения в интерфейсах. Более 20 пикселей — редко используется, так как выглядит неестественно, если только вы не создаете эффект дымки или тумана.

Цвет и прозрачность — ключ к реалистичности. Черный (#000000) с прозрачностью 25% — стандарт. Но в современных интерфейсах часто используют серые оттенки: #000000 с прозрачностью 15% или #000000 с 10% и добавлением лёгкого синего или фиолетового оттенка для холодного освещения. Для тёплого света — добавьте лёгкий оранжевый оттенок: #332211 с прозрачностью 12%.

Представьте, что вы смотрите на кнопку под углом 45 градусов. Тень должна быть чуть длиннее и мягче, чем если бы свет падал сверху. Эта логика помогает создавать последовательность в дизайне.

Как добавить несколько теней к одному объекту

Figma позволяет добавлять до 10 теней на один объект — это мощный инструмент для создания сложных эффектов. Например, вы можете добавить внутреннюю тень (внутреннюю тень в Figma называют «Inset Shadow») и внешнюю одновременно.

Чтобы добавить вторую тень, нажмите «+» в разделе «Shadow» ещё раз. Теперь у вас две настройки. Первую можно оставить как базовую внешнюю тень — например, X=0, Y=4, Blur=6, прозрачность=20%. Вторую — сделайте внутренней: нажмите на переключатель «Inset» рядом с параметрами. Установите X=0, Y=0, Blur=4, цвет — чуть светлее основного, например, #FFFFFF с прозрачностью 10%. Это создаст эффект лёгкого подсвечивания краёв — как у стеклянных кнопок в iOS.

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

Если вы добавляете 3–4 тени, старайтесь сохранять логику: одна — основная, остальные — акцентные. Например:
— Тень 1: внешняя, мягкая, для глубины
— Тень 2: внутренняя, для подсветки краёв
— Тень 3: короткая, жёсткая, для эффекта «выступа»

Такой подход встречается в интерфейсах Google Material Design 3 и Apple’s iOS 17.

Тени под разные сценарии освещения

Не все интерфейсы должны иметь одинаковые тени. Они зависят от контекста: мобильное приложение, веб-сайт, AR-интерфейс, темный или светлый режим.

Для светлого режима используйте тени с низкой прозрачностью (10–20%), цвет — #000000 или #111111. Смещение — Y=4–6, размытие — 8–12. Это создаёт естественное ощущение лёгкого поднятия элемента.

Для тёмного режима тени становятся сложнее. Черный на чёрном — невидим. Поэтому используйте тени с цветом #222222 или #333333, прозрачность — 25–40%. Смещение — Y=6–8, размытие — 10–16. Это компенсирует отсутствие контраста.

Для AR и 3D-интерфейсов — добавьте 2–3 тени с разными цветами и смещениями. Например:
— Основная тень: смещение X=5, Y=10, цвет #000000, прозрачность=30%
— Дополнительная: X=-3, Y=8, цвет #3333FF, прозрачность=15% — имитация отражения от синего экрана
— Внутренняя: Inset, Blur=3, цвет #FFFFFF, прозрачность=8%

Такой подход делает интерфейс «живым».

5 распространённых ошибок и как их избежать

Ошибки с тенями — одни из самых частых среди начинающих дизайнеров. Вот пять типичных проблем и способы их исправить:

• Тень слишком тёмная и резкая. Это создаёт ощущение «врезанного» элемента. Решение: уменьшите прозрачность до 15–20%, увеличьте размытие до 10–16.
• Тень не видна на белом фоне. Частая ошибка при экспорте. Решение: используйте серый цвет тени (#333333), а не чёрный. Он лучше контрастирует с белым.
• Тень применена к группе, а не к объекту. Если вы добавили тень к группе, но внутри есть прозрачные элементы — тень может «выходить» за границы. Решение: оберните группу в прямоугольник с белым фоном и применяйте тень к нему.
• Использование тени для выравнивания. Некоторые пытаются «поднять» элемент, просто увеличивая Y-смещение. Это нарушает иерархию. Решение: используйте отступы (padding) для позиционирования, а тень — только для визуальной глубины.
• Слишком много теней. 5+ теней на одном элементе — перегруз. Решение: ограничьтесь 1–2 тенями. Дополнительные эффекты — через градиенты или обводки.

Продвинутые советы от дизайнеров

Профессионалы используют тени как часть системы стилей. Создайте в Figma стиль тени (Style) — выделите объект с нужными параметрами, нажмите «Create Style» в панели свойств и назовите его, например, «Shadow/Card/Default». Теперь вы можете применять его к любому объекту одним кликом.

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

Ещё один приём — анимация теней. Хотя Figma не поддерживает анимацию в реальном времени, вы можете создать несколько состояний кнопки (обычное, наведение, нажатие) с разными тенями. Например:
— Обычное: Y=4, Blur=6
— Наведение: Y=6, Blur=10, прозрачность=30%
— Нажатие: Y=2, Blur=4, прозрачность=15%

Это создаёт ощущение «прижатия» — как в Material Design.

Используйте маски для теней. Если вы хотите, чтобы тень не выходила за границы контейнера — оберните объект и тень в группу, затем примените маску (Right-click → “Mask”). Это особенно полезно для карточек с закруглёнными углами.

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

Заключение

Тень в Figma — это не просто визуальный эффект. Это мощный инструмент для передачи глубины, иерархии и намерения. Правильно настроенная тень делает интерфейс ощутимым — пользователь не просто смотрит на экран, он «чувствует» пространство. Отсутствие теней или их некорректное применение — одна из главных причин, почему интерфейсы выглядят дешево и неуютно.

Не бойтесь экспериментировать. Начните с базовых значений: X=0, Y=4, Blur=8, прозрачность=20%. Потом адаптируйте под световой сценарий. Создавайте стили теней — они станут частью вашей дизайн-системы. И всегда проверяйте, как тень выглядит на разных фонах и в режимах светлой/тёмной темы.

• Используйте тени с прозрачностью 10–30% для естественного эффекта.
• Всегда проверяйте тени на чёрном, сером и белом фоне.
• Создавайте стили теней — это экономит время и обеспечивает согласованность.
• Не используйте больше двух теней на одном объекте без веской причины.
• Тень — это инструмент навигации, а не украшение.