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

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

Основные параметры тени в Figma

Каждая тень в Figma состоит из нескольких регулируемых параметров, которые определяют её внешний вид и поведение. Эти параметры находятся в правой боковой панели, в разделе Effects. После выбора объекта (фрейма, фигуры, текста или группы) вы можете добавить один или несколько эффектов тени.
Параметры тени включают:

• X Offset — горизонтальное смещение тени. Положительное значение сдвигает тень вправо, отрицательное — влево.
• Y Offset — вертикальное смещение. Определяет, насколько тень «падает» вниз (или вверх, если значение отрицательное).
• Blur — степень размытия краёв тени. Чем выше значение, тем мягче и рассеяннее выглядит тень.
• Spread — изменение размера тени. Положительное значение увеличивает тень равномерно во все стороны, отрицательное — уменьшает.
• Color — цвет тени. По умолчанию используется чёрный с прозрачностью, но можно задать любой цвет и уровень непрозрачности (Alpha).

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

Цвет и прозрачность тени

Хотя большинство дизайнеров используют чёрные или серые тени, современные подходы допускают использование цветных теней — особенно в креативных проектах. Например, синеватый оттенок может передать холодную атмосферу, а коричневатый — деревянную текстуру.
Ключевой момент — уровень прозрачности (Alpha). Реалистичная тень редко бывает 100% непрозрачной. Обычно достаточно 15–30%. Это делает переход мягче и естественнее.

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

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

1. Откройте Figma и создайте новый файл или откройте существующий проект.
2. Выберите инструмент Rectangle, Ellipse или любой другой и нарисуйте фигуру на холсте.
3. Выделите созданную фигуру с помощью курсора.
4. Перейдите в правую панель и найдите секцию Effects. Она находится под вкладками Design и Prototype.
5. Нажмите на значок + рядом с Effects и выберите Drop Shadow.
6. Появится первый слой тени с параметрами по умолчанию: X=0, Y=4, Blur=8, Color=чёрный, Alpha=15%.
7. Настройте параметры вручную, перетаскивая ползунки или вводя значения.
8. При необходимости добавьте вторую тень, нажав + Add Effect — это полезно для сложных эффектов, например, двойной тени.

Добавление внутренней тени (Inner Shadow)

Кроме внешней тени (Drop Shadow), Figma поддерживает Inner Shadow — тень внутри объекта. Этот эффект часто используется для создания эффекта углубления, как будто элемент «вдавлен» в поверхность.
Чтобы добавить Inner Shadow:

• В том же блоке Effects нажмите + Add Effect.
• Выберите Inner Shadow.
• Настройте X, Y, Blur и Spread так же, как и для Drop Shadow.
• Обратите внимание: Inner Shadow работает только на замкнутых формах. Если объект имеет прозрачные участки, эффект может отображаться некорректно.

Виды теней и их использование в дизайне

Тени в UI-дизайне выполняют не только декоративную функцию. Они помогают пользователям понять, какой элемент активен, какой находится выше по z-оси, и как объект взаимодействует с окружением.
Основные типы теней и их применение:

• Мягкие тени (Soft Shadows) — используются в минималистичных интерфейсах. Имеют высокое значение Blur и низкую непрозрачность. Подходят для карточек, модальных окон и панелей.
• Жёсткие тени (Hard Shadows) — с минимальным размытием и чёткими границами. Применяются редко, чаще в монохромных или плоских дизайнах для акцента.
• Двойные тени — комбинация двух Drop Shadow. Одна — короткая и плотная (блик), вторая — длинная и размытая (основная тень). Создаёт эффект объёма.
• Цветные тени — используются в брендинге, анимациях и игровых интерфейсах. Например, фиолетовая тень может подчеркнуть футуристический стиль.

Пример использования двойной тени

Представьте, что вы проектируете Floating Action Button (FAB). Чтобы он выглядел объёмно, добавьте две тени:

1. Первая тень: X=0, Y=2, Blur=4, Spread=0, Alpha=20%. Это имитирует близость к поверхности.
2. Вторая тень: X=0, Y=8, Blur=20, Spread=0, Alpha=10%. Делает объект «парящим».

Такой подход соответствует Material Design от Google, где используются многоуровневые тени для передачи z-высоты.

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

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

• Чрезмерное размытие — тень становится слишком большой и теряет форму. Решение: ограничьте Blur значением 24 px, если объект меньше 300 px.
• Высокая непрозрачность — тень выглядит искусственной и «приклеенной». Используйте Alpha не выше 30% в стандартных интерфейсах.
• Несоответствие направлению света — в одном макете тени падают в разные стороны. Установите единый источник света (обычно сверху слева).
• Тень на прозрачном фоне — при экспорте PNG без фона тень может «потеряться». Всегда проверяйте экспорт на белом и тёмном фоне.

Проверка тени на разных фонах

Тень должна хорошо смотреться на любом фоне. Рекомендуется тестировать её на:

• Светлом фоне (например, #FFFFFF)
• Тёмном фоне (например, #121212)
• Градиенте или изображении

Если тень теряется на тёмном фоне, попробуйте уменьшить её непрозрачность или использовать более светлый цвет (например, тёмно-серый вместо чёрного).

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

Реалистичная тень — это не просто эффект, а часть визуальной иерархии. Она должна подчиняться законам физики и логике интерфейса.

• Используйте принцип единого источника света. Если в интерфейсе «свет» падает сверху слева, все тени должны быть смещены вниз и вправо.
• Чем выше объект, тем длиннее и размытее его тень. Карточка на уровне 1 может иметь Y=2, Blur=4, а всплывающее окно — Y=12, Blur=24.
• Не бойтесь экспериментировать с цветом. На жёлтом фоне чёрная тень может выглядеть слишком резко — попробуйте серую с оттенком фона.
• Сохраните тени как стиль. В Figma можно создать Effect Style, чтобы применять одинаковые тени во всём проекте.

Как создать Effect Style для тени

• Настройте тень на любом объекте.
• Нажмите на значок шестерёнки рядом с названием эффекта (например, «Drop Shadow»).
• Выберите «Create effect style».
• Введите имя, например: «Card Shadow Medium» или «Floating Button Large».
• Применяйте этот стиль к другим объектам через выпадающий список.

Экспорт теней и работа в команде

Тени корректно экспортируются в PNG, JPG и SVG (для SVG тень преобразуется в фильтр). Однако есть нюансы:

• При экспорте в SVG с тенью может увеличиться размер файла из-за использования фильтров.
• В некоторых старых браузерах SVG-фильтры могут отображаться некорректно.
• Для разработчиков лучше предоставлять параметры тени в виде текста: X, Y, Blur, Color — чтобы они могли воссоздать эффект в CSS.

Передача теней разработчикам

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

• Плагины вроде Stark или Design Lint, которые автоматически документируют эффекты.
• Специальные комментарии в Figma с указанием значений тени.
• Библиотеку компонентов с готовыми стилями теней.

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

По её словам, лучшие практики включают:

• Ограничение количества уровней теней — максимум 3–4 в одном интерфейсе.
• Использование теней только там, где есть реальная разница в z-оси.
• Тестирование теней на устройствах с низкой контрастностью (например, на солнце).

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

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

Заключение

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

• Тень добавляется через Effects → Drop Shadow или Inner Shadow.
• Настройте X, Y, Blur, Spread и Color для нужного эффекта.
• Создавайте Effect Styles для консистентности.
• Проверяйте тени на разных фонах и при экспорте.
• Передавайте параметры тени разработчикам в понятном формате.