Как сделать эффект матового стекла, рваной бумаги или неонового свечения в фигме
Автор — Ян Агеенко
Дизайнер с 20-летним опытом работы. Арт-директор в собственной студии. Основатель Гильдии дизайнеров, автор книги «Как стать дизайнером с нуля»
Эта статья раскрывает методы создания различных эффектов в фигме от простого шума или тиснения до сложного ребристого стекла, мятой бумаги или неонового свечения. Вы научитесь применять тени, размытия и плагины для создания необычных и красивых эффектов. Для лучшего понимания рекомендую смотреть данный урок в видео-формате.
Содержание урока
- Видео-версия урока
- Эффекты тени, неонового свечения и тиснения в фигме
- Эффект обычного размытия и размытия фона в фигме (блюр)
- Как сделать эффект матового стекла в фигме
- Как сделать эффект ребристого стекла в фигме
- Эффект мятой бумаги в фигме с помощью наложения
- Эффект рваной бумаги в фигме с помощью карандаша
- Эффект шума или зернистости в фигма с помощью плагина
- Плагины для других эффектов в фигме
Видео-версия урока
Эффекты тени, неонового свечения и тиснения в фигме
Данные эффекты можно добавить с помощью стандартных эффектов на панели Effects в правой части интерфейса фигмы.
Тень (drop shadow) — это самый базовый эффект. Она создается автоматически при добавлении. Менять её параметры, такие как смещение по осям X и Y, размытие, цвет и прозрачность можно нажав на иконку эффекта.

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

Помимо падающей внешней тени (Drop shadow) в фигме есть также тень внутренняя. С её помощью, можно задать объекту тиснение и эффект объема (3д). Для этого нужно добавить темную и светлую внутренние тени с противоположными смещениями.

Эффект обычного размытия и размытия фона в фигме (блюр)
Два оставшихся стандартных эффекта связаны с размытием. Layer blur — это размытие самого слоя. Лучше всего этот эффект виден на картинках:

Бэкграунд блюр, в свою очередь, размывает не сам слой, а то, что находится под ним. ВАЖНО: чтобы этот эффект сработал, заливка (Fill) у слоя должна в диапазоне от 1 до 99 процентов. При 0 он вообще не будет виден, а при 100 под ним не будет видно другие слои.

Как сделать эффект матового стекла в фигме
По сути, бэкграунд блюр сам по себе уже создает видимость мутного прозрачного стекла. Усилить этот эффект можно немного скруглив углы, а также добавив тонкое внутреннее свечение и легкую тень:

Как сделать эффект ребристого стекла в фигме
Создать эффект рифленого стекла также довольно просто. Для этого необходимо создать несколько слоёв с размытием фона и поставить их впритык друг к другу:

С помощью стандартных эффектов (теней и размытия) можно сделать очень много интересного. Но кроме них существуют также и другие интересные эффекты, которые можно сделать с помощью других инструментов.
Эффект мятой бумаги в фигме с помощью наложения
Для того, чтобы сделать эффект мятой бумаги для фото в фигме, нам потребуется сама фотография, а также изображение бумаги (или любой другой текстуры). Оптимально для светлой фотографии подобрать или сгенерировать светлое изображение бумаги, и наоборот: для темной — темное.
Дальше просто размещаем слой с бумагой поверх слоя с фотографией и на панели справа выбираем нужный режим наложение. Как правило лучше всего срабатывает Multiply для светлых картинок и Screen для темных, однако в разных случаях бывает по разному, поэтому советую посмотреть все варианты и выбрать лучший.

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

Затем — двойным щелчком перейти в режим редактирования вектора, выбрать инструмент Перо и дорисовать остальную часть листа от одной крайней точки до другой. Чтобы линии были ровно под углом 90 градусов, зажмите Shift. Чтобы выйти из режима редактирования вектора, нажмите Enter или Esc. Потом добавьте вашей фигуре заливку (Fill) на панели справа и там же уберите обводку (Stroke). Для большей реалистичности можно также добавить легкую тень (Drop shadow).

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

Эффект шума или зернистости в фигма с помощью плагина
Шум в фигме можно сгенерировать в плагине Simple Noise. Найти его, как и все другие плагины, можно через панель инструментов. Сам плагин имеет несколько настроек — уже знакомые нам режимы наложения, непрозрачность, плотность, размер и форму зернистости.

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

Другие полезные уроки по фигме
Как в фигме сделать сетку и включить направляющие линии горячими клавишами
В этом уроке вы узнаете, какие бывают модульные сетки в фигме, как их включить или убрать, чем они отличаются между собой и от линеек с направляющими линиями. Также мы разберем горячие клавиши для работы с сетками и направляющими и узнаем, какие размеры лучше задавать при создании сетки для сайтов и мобильных приложений.
Плагины для изображений в фигме — бесплатные картинки и иконки, удаление фона, улучшение качества, перевод в вектор и 3д
Подборка посвящена плагинам программы фигма, предназначенным для работы с изображениями - фотографиями, картинками, 3д иллюстрациями и иконками. Вы узнаете, как в фигме заменить фотошоп, удалить фон, улучшить качество изображения, перевести его из пнг в вектор.
Как сделать кликабельную кнопку или ссылку в фигме
Интерактивные кнопки и ссылки — очень важный элемент любого сайта или приложения. Сегодня мы разберемся, чем они отличаются друг от друга, и конечно же научимся самостоятельно делать кликабельные кнопки и ссылки в прототипах фигмы.
