Как сделать красивую реалистичную тень любому объекту или тексту в фигме с помощью плагина или без

Аватар автора курса

Автор — Ян Агеенко

Дизайнер с 20-летним опытом работы. Арт-директор в собственной студии. Основатель Гильдии дизайнеров, автор книги «Как стать дизайнером с нуля»

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

Видео-версия урока

Выбрать плеер:

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

Тень можно добавить любому векторному и даже растровому объекту в фигме, а также тексту. Для этого нужно выделить слой и нажать на иконку плюсика на панели Effects на правой панели программы. При нажатии на иконку слева от появившейся тени, можно открыть её дополнительные настройки: Position (смещение по оси X и Y), Blur (Размытие), Spread (масштаб, работает только для прямоугольников), Color (цвет) и Opacity (непрозрачность):

Кроме падающей, внешней тени (Drop shadow) в выпадающем списке на панели Effects можно выбрать также и внутреннюю тень. Её настройки аналогичны.

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

Плагины для создания теней в фигме

Помимо ручного добавления теней для различных предметов в фигме, можно воспользоваться плагинами. Некоторые из них добавляют стандартные тени, но при этом подбирают настройки так, что тени смотрятся более красиво и естественно. К таким плагинам относятся например Beautiful Shadows и Pretty Shadows. Другие же, например Oblique генерируют тени самостоятельно и выдают результат в виде растровых или векторных картинок. И те и другие как правило предлагают довольно большой выбор различных вариантов.

Создание красивых теней для текста в фигме

Большая часть плагинов, добавляющих объем и тени к векторным объектам, работает и с текстами. Например, плагины i 3D, 3D vector или Roto. Но существуют и плагины, созданные исключительно для текстов. К ним относится FigText, позволяющий быстро делать 3д-эффекты.

Как нарисовать реалистичную тень для любого предмета в фигме

Добавить тень различным объектам в фигме также можно просто нарисовав эту тень с помощью инструмента перо или векторных фигур, и задав ей соответствующий градиент и/или размытие. Однако следует отметить, что этот способ требует определенных художественных навыков.

На первом примере я просто создал несколько эллипсов и добавил им эффект размытия (Layer Blur). На втором — нарисовал пером векторную фигуру, также добавил размытие и сделал градиент от более темного (непосредственно под объектом) до более светлого цвета, почти совпадающего с цветом фона.

Другие полезные уроки по фигме

Работа с файлами в фигме

Как создать, открыть, сохранить, скачать, экспортировать и удалить файл или проект в фигме

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

Как в фигме сделать и сохранить анимацию кнопок, текстов и картинок на сайте или в презентации

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

Как в фигме делать бесплатные мокапы телефонов, айфонов, ноутбуков и одежды с плагинами и без

Статья посвящена использованию мокапов в Figma — от базового понимания, зачем они нужны, до практических способов их создания и интеграции. Рассматриваются как самостоятельное изготовление мокапов, так и применение плагинов, ресурсов Figma Community и внешних инструментов, таких как Photoshop или онлайн-редакторы. Материал будет полезен дизайнерам, желающим профессионально презентовать свои работы в портфолио или клиентским проектам.