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

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

Как добавить тень в Figma: пошаговая инструкция

Добавление тени в Figma — простая операция, но требует понимания контекста и правильной настройки параметров. Процесс начинается с выбора объекта: это может быть прямоугольник, текст, фигура, компонент или даже группа элементов. После выделения объекта откройте правую боковую панель и убедитесь, что выбран режим «Design».

Перейдите к разделу «Effects». По умолчанию он скрыт, если эффекты не применялись. Чтобы добавить тень, нажмите кнопку «+» рядом с надписью «Shadow» или «Add Effect». Система предложит два типа: Drop Shadow (внешняя тень) и Inner Shadow (внутренняя). Выберите нужный вариант, и откроются параметры настройки.

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

1. Выделите объект на холсте.
2. Откройте панель «Design» справа.
3. Найдите блок «Effects» и нажмите «+ Shadow».
4. Выберите тип тени: Drop Shadow или Inner Shadow.
5. Настройте параметры: Offset, Blur, Spread и цвет.
6. При необходимости добавьте несколько слоёв теней для сложных эффектов.

Параметры тени: что значат и как настроить

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

X Offset определяет смещение тени по горизонтали. Положительное значение сдвигает тень вправо, отрицательное — влево. Это имитирует направление источника света. В UI-дизайне стандартом считается свет сверху слева, поэтому X Offset часто устанавливают в диапазоне от -1 до -4 пикселей.

Y Offset задаёт вертикальное смещение. Чем больше значение, тем дальше «парит» объект над фоном. Например, карточка с Y Offset = 8 px будет казаться выше, чем элемент с Y Offset = 2 px. Этот параметр напрямую связан с восприятием глубины.

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

Spread меняет размер тени относительно исходного объекта. Положительное значение увеличивает тень, отрицательное — уменьшает. При Spread = +2 px тень будет шире объекта, что может имитировать проекцию при близком расположении к поверхности. Отрицательный Spread создаёт эффект «вдавленности», особенно в сочетании с Inner Shadow.

Цвет тени — не всегда чёрный. В современных дизайн-системах часто используют тёмно-серые или даже цветные оттенки (например, синеватый серый для холодного освещения). Прозрачность задаётся через альфа-канал (A), и для естественного вида рекомендуется использовать значения от 10% до 30%.

Виды теней: Drop Shadow и Inner Shadow

Figma поддерживает два основных типа теней: внешнюю (Drop Shadow) и внутреннюю (Inner Shadow). Они служат разным целям и применяются в зависимости от задачи.

Drop Shadow — самый распространённый тип. Он создаётся вокруг объекта и имитирует его тень на фоне. Используется для карточек, кнопок, плавающих действий (FAB), модальных окон. Эффект помогает отделить элемент от фона и показать его приоритет.

Inner Shadow, напротив, рисуется внутри границ объекта. Он создаёт впечатление, что элемент «вдавлен» или имеет объём. Часто применяется в дизайне кнопок-переключателей, полей ввода, рамок или декоративных вставок. Например, при нажатии кнопки можно временно заменить Drop Shadow на Inner Shadow, чтобы передать тактильное ощущение.

Оба типа можно комбинировать. Допустим, у вас есть кнопка с лёгкой внешней тенью и внутренней тенью по краям — это создаёт эффект выпуклости. Такой приём популярен в skeuomorphic и neumorphic дизайнах.

Для управления несколькими эффектами Figma позволяет добавлять их слоями. Вы можете иметь одновременно несколько Drop Shadows и Inner Shadows на одном объекте. Это полезно для создания многоуровневых теней, как в Material Design, где каждый уровень z-axis имеет свою комбинацию параметров.

Советы по использованию теней в дизайне

Тень — мощный инструмент, но её чрезмерное или неуместное применение может испортить дизайн. Вот проверенные практики, которые помогут использовать тени эффективно.

Поддерживайте иерархию. В дизайн-системе должно быть чёткое правило: чем выше уровень элемента, тем сильнее его тень. Например, фоновые карточки — 1 уровень (лёгкая тень), модальные окна — 3 уровень (глубокая тень), тултипы — 5 уровень (очень сильная). Это создаёт предсказуемость и облегчает навигацию.

Используйте стили теней. Figma позволяет сохранять комбинации параметров как «Effect Styles». Создайте стили для каждого уровня тени (Shadow Level 1, Level 2 и т.д.) и применяйте их по всему проекту. Это обеспечивает консистентность и ускоряет работу.

Не злоупотребляйте размытием. Чрезмерно размытые тени теряют форму и создают ощущение грязи. Оптимальное значение Blur зависит от размера объекта: для маленьких элементов (иконки, чипсы) — 2–4 px, для крупных (карточки, окна) — 8–16 px.

Учитывайте контекст. На тёмном фоне тень должна быть светлее, а не тёмнее. В таких случаях используйте светлые оттенки серого с низкой непрозрачностью (например, #FFFFFF, A=10%). Это называется inverted shadow и критически важен для dark mode.

Ошибки, которые стоит избегать

Даже опытные дизайнеры иногда допускают типичные ошибки при работе с тенями. Знание этих ловушек поможет сделать ваш дизайн профессиональнее.

Первая — слишком много слоёв теней без системы. Добавление трёх и более Drop Shadows ради «эффектности» часто приводит к визуальному шуму. Каждая тень должна служить цели: либо указывать на уровень, либо имитировать свет, либо подчеркивать взаимодействие.

Вторая — игнорирование производительности. Хотя Figma — векторный редактор, чрезмерное количество сложных эффектов может замедлять работу, особенно в больших файлах. Это особенно актуально при экспорте в код: CSS-свойство box-shadow с множественными значениями требует ресурсов браузера.

Третья — использование чёрной непрозрачной тени. Абсолютно чёрный цвет (#000000) с непрозрачностью 100% выглядит неестественно. В реальном мире тени редко бывают полностью чёрными. Всегда снижайте непрозрачность до 10–30% и используйте серые оттенки.

Четвёртая — несоответствие направления света. Если в одном интерфейсе одни тени смещены влево, другие — вправо, это нарушает визуальную логику. Зафиксируйте одно направление света (обычно X: -2, Y: 4) и придерживайтесь его по всему проекту.

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

Мы поговорили с Дмитрием Смирновым, старшим дизайнером в компании, разрабатывающей enterprise-интерфейсы, и попросили его поделиться практиками использования теней.

«За последние пять лет я видел множество проектов, где тени были либо не нужны, либо уничтожали читаемость. Главное правило: тень не должна отвлекать. Она — фоновый актёр, а не главный герой. В наших системах мы используем всего три уровня теней: Base, Elevated и Modal. Каждый соответствует конкретному поведению элемента.

Мы также внедрили автоматизацию: через плагин Figma Sync Effects проверяем, используются ли стандартные стили. Если дизайнер создаёт новую тень вручную — система предупреждает. Это помогает держать качество на высоком уровне.

И последнее: тестируйте тени на разных экранах. То, что выглядит идеально на Retina-дисплее, на бюджетном мониторе может превратиться в серую кашицу. Размытие должно быть достаточным, но не чрезмерным.»

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

Заключение

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

• Тень добавляется через панель «Effects» в режиме Design.
• Drop Shadow и Inner Shadow решают разные задачи — используйте их осознанно.
• Сохраняйте стили теней для единообразия в проекте.
• Избегайте чёрных непрозрачных теней и несогласованного направления света.
• Тестируйте эффекты на читаемость и производительность.