Тень в Фигме: как сделать красивый эффект от объекта в Figma

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

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

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

На панели инструментов необходимо выбрать пункт «Effects». Затем нажмите кнопку «+». Вы увидите надпись «Drop shadow» — это значит «Внешняя тень». Она установлена по умолчанию и подходит не для всех предметов. Например, если фигура большая и имеет яркий цвет, тень практически не будет видно. Попробуем выбрать другой вариант. 

Кликните на «Drop shadow», чтобы увидеть виды теней в Figma. В программе можно редактировать прозрачность, размытие, положение, цвет тени. Выбор настроек не займёт много времени, если вы будете знать, чем они отличаются друг от друга. Помимо уже описанной выше внешней тени есть тень внутренняя или «Inner shadow». Она падает внутрь объекта и делает его будто на уровень ниже, чем общий фон. 

Обучиться работе с Figma можно на онлайн-курсах. Проверенные варианты от tutortop:

• «Основы Figma» от Нетологии
• «Курс Figma» от Contented
• «Веб-дизайнер» от Eduson Academy
• «Профессия UX/UI-дизайнер» от Chulakov School

Параметры тени легко редактировать. Вам нужно нажать на кнопку с солнцем рядом с названием тени. Перед вами окажутся следующие пункты с похожими значениями:

• X = 0
• Y = 6
• Blur = 4
• Spread = 0
• Цвет = 99CDEA
• Прозрачность = 40%

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

Сохранение тени в Figma

В Фигме доступно сохранение стиля тени для использования его в дальнейших проектах. Нажмите на значок с четырьмя точками рядом с надписью «Effects», после — на плюс. После этого вы можете сохранить её — надо ввести название и выбрать «Create style». Теперь созданный и сохранённый стиль тени появится в правой панели при нажатии на четыре точки, внизу списка. 

Использовать тень просто и в других проектах. Слева выберите вкладку «Assets» и кликните по значку книги. Дальнейший путь — «Publish» — «Publish style only». При создании нового проекта и нажатии на иконку книги вы сможете активировать сделанные ранее стили.

Плагины для наложения тени в Фигме

Через плагины нарисовать тень для предмета ещё проще. Достаточно запустить его, выделить объект и получить готовый результат. Эти популярные плагины помогут создать красивую и ровную тень как для крупных предметов, так и для небольших деталей:

• Beautiful Shadows — подойдёт для плавных и мягких теней:
• Shadowkit — инструмент для работы с более сложными, многослойными тенями, удобно использовать для внутренних теней;
• SmoothShadow — помогает рисовать глубокие тени, есть специальные кривые линии для более точных настроек размытия, смещения, детализации.

Итоги

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