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

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

Использование панели эффектов как базовый способ

Самый простой и быстрый способ добавить тень в Figma - это использование панели «Effects». Всего несколько кликов отделяют вас от создания базового эффекта глубины. Это самый распространенный и простой метод. Рассмотрим основные шаги.

Выбор объекта

Выберите любой объект (frame, rectangle, text, group и т.д.), к которому вы хотите добавить тень. Затем перейдите к правой панели свойств, где расположены настройки внешнего вида. Найдите раздел с заголовком «Effects» - он находится ниже секций «Fill» (Заливка) и «Stroke» (Обводка). Чтобы добавить новый эффект, нажмите на значок плюса + внутри этого раздела.

Панель «Effects»

В правой колонке интерфейса найдите раздел «Effects» (ниже «Fill» и «Stroke»). Нажмите на плюсик + и выберите «Drop Shadow» (Тень) или «Inner Shadow» (Внутренняя тень).

Настройка параметров тени

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

• X (По горизонтали): Смещение тени по оси X. Положительное значение - тень справа, отрицательное - слева.
• Y (По вертикали): Смещение тени по оси Y. Положительное значение - тень снизу, отрицательное - сверху.
• Blur (Размытие): Самый важный параметр. Определяет, насколько тень размыта и "расплывается". Чем больше значение, тем мягче и больше тень.
• Spread (Распространение): Расширяет или сужает область тени до применения размытия. Положительное значение увеличивает тень, отрицательное - уменьшает. Важно: Этот параметр есть только в эффекте «Layer Blur» (для размытия слоя) и в некоторых случаях для «Drop Shadow». В стандартной тени его часто нет, но его можно имитировать (см. ниже).
• Color (Цвет): Кликните на цветной квадрат, чтобы выбрать цвет тени. Для реалистичных теней используйте черный или темно-серый с низкой непрозрачностью.
• Opacity (Непрозрачность): Определяет, насколько тень прозрачна. Редко когда нужна 100% непрозрачность. Обычно используется значение от 10% до 40%.

Типы теней и их настройки

В Figma есть три основных типа эффектов, связанных с тенями. Первый и самый популярный из них - Drop Shadow (Внешняя тень), который создает классический эффект объема, отбрасывая тень за пределами объекта. Два других - это Inner Shadow (Внутренняя тень) для создания иллюзии углубленности и Layer Blur (Размытие слоя), который часто используется для модельных окон и фоновых элементов.

Drop Shadow (Тень)

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

• Пример настроек для легкой тени: X: 0, Y: 2, Blur: 10, Color: #000000, Opacity: 10%.
• Пример для сильной тени (карточка): X: 0, Y: 10, Blur: 30, Color: #000000, Opacity: 20%.

Inner Shadow (Внутренняя тень)

Это тень, которая рисуется внутри границ объекта. Создает эффект вдавленности или "вырезания". Пример для вдавленной кнопки: X: 0, Y: 2, Blur: 4, Color: #000000, Opacity: 20%

Layer Blur (Размытие слоя)

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

 

В отличие от теней, Layer Blur не создает объема, а работает с прозрачностью и глубиной фокуса.

 

Сравним типы теней Drop Shadow и Inner Shadow. Данная таблица наглядно сравнивает эти два основных типа теней и поможет быстро сориентироваться в выборе нужного типа эффекта для конкретной задачи:

Параметр	Drop Shadow (Внешняя тень)	Inner Shadow (Внутренняя тень)
Назначение	Создает эффект приподнятости над поверхностью.	Создает эффект вдавленности или углубления.
Визуальный результат	Тень отбрасывается вовне, за границы объекта.	Тень отбрасывается внутрь границ объекта.
Типичное применение	Карточки, кнопки, всплывающие окна.	Поля ввода, выдавленные кнопки, вкладки.

 

Продвинутые техники

В CSS у box-shadow есть параметр spread. В Figma его нет в чистом виде для «Drop Shadow», но его можно сымитировать.

Использование «Inner Shadow»

1. Создайте копию вашего объекта (Ctrl+C / Ctrl+V).
2. Исходному объекту добавьте «Inner Shadow».
3. Установите Spread на максимальное значение.
4. Поставьте большое Blur (например, 30).
5. Поэкспериментируйте с X и Y (часто ставят 0).
6. У вас получится равномерная "полоска" по краям объекта. Это и есть аналог spread.

Использование Frame с Fill

1. Поместите ваш объект внутрь Frame.
2. У самого Frame уберите заливку (Fill) и обводку (Stroke).
3. К этому Frame примените эффект «Drop Shadow».
4. Увеличивая Blur, вы будете увеличивать и распространение тени вокруг вашего исходного объекта. Это самый простой и управляемый способ.

Создание множественных теней

Чтобы создать сложную, реалистичную тень (как в Material Design), нужно наложить несколько эффектов друг на друга:

1. В панели «Effects» просто нажмите + и добавьте второй, третий эффект «Drop Shadow» к одному и тому же объекту.
2. Настройте каждый с разными параметрами.

Пример для "плавающей" карточки:

• Тень 1 (мягкая и большая): X: 0, Y: 1, Blur: 30, Color: #000000, Opacity: 8%
• Тень 2 (более четкая): X: 0, Y: 4, Blur: 12, Color: #000000, Opacity: 12%
• Тень 3 (самая резкая): X: 0, Y: 10, Blur: 25, Color: #000000, Opacity: 15%

Рекомендации по созданию теней

1. Не используйте черный цвет (#000000). Используйте темные оттенки фона или акцентного цвета с низкой непрозрачностью (10-25%). Это сделает тени более естественными.
2. Создавайте стили. Если вы нашли идеальное сочетание теней для кнопок или карточек, создайте Effect Style. Кликните на иконку с четырьмя точками в разделе «Effects» и нажмите «+». Так вы сможете легко применять одни и те же тени ко всем элементам вашего дизайна.
3. Меньше - лучше. Слишком резкие и темные тени делают интерфейс "грязным".
4. Согласуйте направление света. Во всем интерфейсе тени должны падать в одном направлении (например, слева-сверху или снизу-справа). Это создает целостность.
5. Используйте тени осмысленно:

• Маленькое размытие (Blur) для элементов, которые находятся близко к поверхности (кнопки, поля ввода).
• Большое размытие (Blur) для элементов, которые "парят" высоко над поверхностью (модальные окна, всплывающие подсказки).

Краткий чек-лист:

1. Выбери объект.
2. Effects + Drop Shadow.
3. Настрой:

• X, Y - куда падает тень.
• Blur - насколько она мягкая.
• Color & Opacity - чтобы тень не была "мертвой".

 

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

 

Вывод

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