Как сделать "шумный" дизайн в Figma?

"Шум" попал в тренды графического дизайна еще в 2021 г. и остается актуальным до сих пор. На самом деле сделать его очень и очень просто, ведь в Figma есть огромное множество полезных плагинов, которые облегчают работу в ней. Давайте же разберемся, как сделать "шумный" дизайн в Figma буквально за 3 шага.

1. Создадим область для наложения шума

Первое, что мы делаем, это конечно же - создаем фрейм (я создам 1920*1080). Окрасим его в цвет (я сделаю темно серый) и добавим туда рандомных векторных фигур, также окрасив их.

Вот наш выполненный первый шаг
Вот наш выполненный первый шаг

2. Добавим "мыла"

Приступим к добавлению небольших эффектов.

Для этого выделим все наши векторные фигуры, зайдем во вкладку Effects.

Нажмем на "+", выберем "Layer blur" и в характеристиках выставим число от 100 и дальше, чтобы наши векторные фигуры размылись.

Вот, что у нас получилось
Вот, что у нас получилось

3. Наложим "шума"

Шум мы будем накладывать с помощью специального плагина под названием "Noise".

При нажатии на этот плагин у нас появляется окошко, сейчас я расскажу, что значат все эти ползунки

Как сделать "шумный" дизайн в Figma?

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

2. Density - количество точек. Чем их больше, тем "шумнее" будет область.

3. Contrast - контрастность точек.

4. Scale - увеличение точек. Чем сильнее мы увеличим этот показатель, тем менее явными будут точки.

5. Invert - инвертировать "цвет" точек.

Теперь настраиваем наши показатели, я буду трогать только density, поставлю ее где-то на треть и жму на галочку.

Мы получаем квадратик "шума", дальше нам нужно растянуть его до размеров нашего фрейма (если изначально вы не выставили его размеры).

Поставив шум на фрейм, мы можем заметить, что картинка начала просто пестрить черными точками, но это нельзя назвать шумом. А теперь будет магия - в режимах наложения мы выбираем "Overlay".

Как сделать "шумный" дизайн в Figma?

И вот! Мы получили наш "шумный" дизайн

Надеюсь, статья была вам полезна, мне будут приятны ваши лайки и комментарии❤

Окошко благодарностей
Спасибо!
44
1 комментарий

Прикольный тьюториал!! =))

2
Ответить