Как сделать размытие в фигме

Эффекты в фигме: внешняя и внутренняя тень, размытие слоя и фона

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

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

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

Если хотите изменить параметры тени, то нажмите на иконку солнца. Можно изменять значение тени по оси X и Y. Значение «Blur» означает размытие тени. Значение «Spread» означает распространение. Также можно изменять цвет и прозрачность, как показано на скриншоте выше.

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

Чтобы добавить внутреннюю тень к любому объекту, выберите его и нажмите на «+» напротив надписи «Effects». Вместо значения «Drop shadow» выберите из списка «Inner shadow», что переводится как внутренняя тень. Изменять параметры тени можно также как и у внешней тени, нажав на иконку солнца.

Как сделать размытие слоя в фигме

Чтобы добавить размытие слоя, объекта или изображения в фигме выберите нужный слой. Справа, напротив надписи «Effects» нажмите плюс. Кликните на пиктограмму с солнцем, чтобы увеличить или уменьшить размытие слоя.

Как добавить размытие фона в фигме

Чтобы добавить размытие фона в фигме, нажмите на иконку плюса напротив надписи «Effects». Выберите из списка Background blur. После этого внизу надписи Fill уменьшите прозрачность. Например поставьте 10%. В этом случае размытие фона будет работать.

Вы можете увеличить размытие нажав на иконку солнца в эффектах и увеличить цифру в большую сторону. В результате вы получите размытие фона под этим слоем. Чтобы увидеть размытие можно поместить вниз фотографию.

Почему у некоторых не работает функция Backround blur? Просто потому, что вместо изменения прозрачности внизу надписи «Fill» они изменяют прозрачность внизу надписи «Layer». Нужно изменить прозрачность именно в заливке, тогда все будет работать отлично.

Заключение

Итак, в этой статье вы узнали про эффекты в фигме и как с ними работать. Мы поговорили про внешнюю тень, внутреннюю тень, размытие слоя и фона. Если у вас возникли какие-то вопросы, то напишите об этом в комментариях ниже.

Как создать эффект стекла в Фигме

Раз уж я в своей работе перешла на Фигму, то буду иногда публиковать небольшие уроки по ней здесь в блоге. Думаю, многим будет интересно. Без воды, простые понятные руководства. И начну с простого урока, как легко создать эффект стекла в Фигме.

Эффект стекла в Фигме

(Все картинки в статье кликабельны)

Для начала создадим фрейм, допустим 800х500 пикселей и зальем его каким-нибудь цветом. Например зеленым.

Теперь внутри фрейма создадим прямоугольник или квадрат. Из него мы будем делать наше прозрачное стекло.

Я создам квадрат 300х300px белого цвета.

Добавим для этого слоя эффект Backgound Blur (размытие заднего фона).

Затем, нажав на «солнышко» выставим силу размытия на 15

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

Я добавлю мужичка под деревом на закате. Закат пока не видно )) Но это пока…

А теперь самое интересное. Чтобы появился эффект матового или полупрозрачного стекла, в Фигме достаточно изменить прозрачность заливки цвета слоя.

Выделяем наш квадрат и Fill (заливку) уменьшим со 100% до 10%

Главное не перепутать заливку с прозрачностью слоя. Если вы уменьшите процент в поле Layer, то такого эффекта не получится.

Теперь можно поиграться с параметрами чтобы сделать стекло более матовым или наоборот…

Дополнительные улучшения

Еще можем добавить немного реалистичности и объема. Скруглим углы у нашего квадрата. Я поставлю радиус 9.

Затем воспользуемся плагином Isometric. Уверена, что вы умеете искать и устанавливать плагины, поэтому этот момент объяснять не буду.

Запускаем плагин, выделяем наш квадрат и жмем любую из кнопок в окошке плагина.

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

Первый эффект вот с такими параметрами. Стекло приобретет объем.

Снова в эффектах нажимаем плюсик и добавим эффект падающей тени. Здесь уже цвет тени и ее размытие подбирайте на ваше усмотрение. Все зависит от вашего фона и задумки.

У меня в этот раз без особой идеи получилось вот так:

Главное, чтобы вам было понятно, как это работает. Если понравился урок, дайте знать в комментариях. В ближайшее время хочу рассказать, как создавать изометрию в Фигме самостоятельно без плагинов.

UX/UI Веб-дизайнер. Занимаюсь дизайном и разработкой сайтов для бизнеса более 6 лет. Связаться со мной можно через страницу Контакты

Тени и размытие в Figma: как настроить

Рассказываем о базовых эффектах и показываем, как за две минуты сделать «матовое стекло».

Иллюстрация: Meery Mary для Skillbox Media

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

Drop Shadow — внешняя тень, подходит для отделения объекта от фона. Inner Shadow — внутренняя, подходит для создания объёмных объектов:

Чтобы добавить тень, в разделе Effects нажмите на плюсик. По умолчанию Figma добавит обычную тень, но если нажать на надпись Drop Shadow, в выпадающем меню его можно изменить на Inner Shadow.

Базовые настройки у теней одинаковые, но работают они немного по-разному:

Смещение и размер у внешней тени могут быть какими угодно, так как явных границ у неё нет. У внутренней тени те же параметры ограничены самим объектом.

Также у тени можно изменить цвет и режим наложения. Работает это как в Photoshop — в зависимости от режима и цвета тень будет подстраиваться под фон:

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

Размытие

В Figma есть два вида размытия: Layer blur и Background blur. Настроить у них можно только уровень размытия, но работает он в этих режимах по-разному.

Чтобы добавить размытие, в разделе Effects нажмите на плюсик. Затем нажмите на надпись Drop Shadow и в выпадающем меню выберите Layer blur или Background blur.

Layer blur просто размывает слой целиком в зависимости от выбранного значения в настройках .

Background blur работает немного хитрее. Если просто указать у него уровень размытия, то ничего не произойдёт. Но если в пункте Fill снизить непрозрачность заливки, то фон под слоем с Background blur будет размыт:

Не путайте непрозрачность слоя ( Layer) и заливки ( Fill). Если вы снизите непрозрачность слоя, то эффект Background blur работать не будет.

Сочетание эффектов

В разделе Effects можно добавить сколько угодно разных эффектов: например, несколько теней и несколько размытий. Благодаря этому можно добиться интересных результатов. Для примера рассмотрим, как сделать эффект матового стекла.

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

Подробнее о том, как можно сочетать разные эффекты в Figma, читайте в нашей инструкции по морфизмам в интерфейсах:

Filter — обработка фото в Figma [Плагин]

Figma из коробки не особо заточена на ретушь фотографий. То есть, разумеется, изображение можно обтравить, откропить и настроить его базовые параметры вроде насыщенности, но фильтров как таковых по умолчанию в Фигме нет. В результате Figma не вполне может закрыть все потребности дизайнера, который, возможно, хотел бы уже отказаться от Photoshop.

Как и всегда, нас выручит плагин — Filter.

Filter позволяет добавить один или несколько из 33 предустановленных настроек, каждую из которых также можно кастомизировать.

Рассмотрим подробнее возможности этого дополнения

Яркость и контрастность

Фильтр Brightness Contrast позволяет отрегулировать яркость и контрастность изображения.

Оттенок и насыщенность

Настройка Hue Saturation позволяет настроить оттенок и насыщенность изображения.

Экспозиция

Настройка Exposure позволит вам настроить экспозицию изображения.

Сепия

Используйте фильтр Sepia, чтобы стилизовать изображение под старое фото в оттенках коричневого.

Denoise

Замечательный фильтр, убирающий шумы. На примере видно, что фильтр действует достаточно деликатно.

Сочность картинки

Параметр Vibrance позволит вам настроить сочность изображения. Схоже с Saturation, но действует несколько иначе.

Оттенки серого

Чтобы перевести изображение в оттенки серого, используйте Grayscale

Данный фильтр изменяет палитру изображения

Чернила

Ink стилизует изображение под работу красками

Анимация

Cartoon пытается сделать фото как в мультфильме

Штриховка

Фильтр Crosshatch «заштриховывает» исходное изображение

Увеличение резкости

Unsharp mask позволяет увеличить резкость (четкость) фотографии. Для применения надо настроить радиус и силу эффекта

Делает картинку кислотной

Найти границы

Фильтр Edge Work выделяет все найденные границы в ЧБ.

Ксерокопия

BlackWhite делает изображение схожим с ксерокопией. В итоге остаются только полностью черный и полностью белые цвета

По контуру

Outline обводит детали изображения по контуру

Размытие через линзу

Частичное размытие

Фильтр tilt shift позволяет размыть все, кроме выбранной области. Для управления перемещайте две точки на превью. Для степени размытия измените значение Blur Radius, для более или менее плавного перехода в размытие измените Gradient Radius — чем выше значение, тем плавнее переход.

Triangle blur

Еще один тип размытия

Размытие в движении

Интересный эффект Zoom Blur, имитирующий размытие в движении. Для управление положением размытия переместите точку на превью.

Ночное освещение

Фильтр Night создан для получения эффекта скудного освещения

Инверсия цвета

Фильтр Invert Color применяет инверсию к цветам изображения

Прозрачный фон

Фильтр Alpha находит фон и делает его прозрачным

Ломография

Фильтр Lomo стилизует изображение под снимок фотоаппарата Lomo

Ночное видение

Фильтр Night Vision стилизует изображение под вид из прибора ночного видения — в черно-зеленых тонах

Выпуклость

Фильтр Bulge / Pinch делает искажение в виде выпуклости. Для настройки укажите радиус, силу изгиба (по оси Z) и выберите центр с помощью точки на превью

Водоворот

Фильтр Swirl создает загнутое искажение в виде водоворота

Туннель

Tunnel создает искажение на части изображение, имитирующее движение в туннеле

Фильтр Hexagonal Pixelate создает мозаику в виде сот

Квадратная плитка

Фильтр Quadrangular Pixel создает мозаику в виде квадратов

Color halftone

Фильтр создает блики в виде разноцветных кругов

Dot screen

Фильтр создает частичную видимость с «освещением» через точки

Вы можете использовать несколько фильтров сразу

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

Вы можете создавать свои пресеты, содержащие сразу несколько фильтров

По умолчанию плагин создает слой заливки для исходного элемента, но вы можете получать и новое изображение, указав Save as new image во вкладке Settings

Как пользоваться

Как установить Filter

Как устанавливать плагины Figma читайте здесь

Если вы можете более полно и грамотно описать действие фильтра, просим вас сделать это в комментариях.

Продвинутые эффекты в Figma: глитч, голограмма и неоновое свечение

Рассказываем, как разнообразить вёрстку с помощью стандартных средств графического редактора.

Иллюстрация: Оля Ежак для Skillbox Media

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

Рассказываем, как сделать эффекты глитча, голограммы и неоновую плашку. А ещё показываем плагин, который делает эффекты сам.

Глитч

Эффект глитча достигается за счёт смещения красного, синего и зелёного каналов RGB. Благодаря этому возникает ощущение, что картинка будто испорчена и её цвета исказились из-за программной ошибки.

В Figma этого эффекта можно добиться с помощью режимов наложения: Hue, Screen и Multiply.

Чтобы не делать всё каждый раз заново, этот эффект можно превратить в компонент и использовать его с одинаковыми настройками во всём документе:

Голограмма

Если у вас был компьютер или игровая приставка в середине нулевых, вы наверняка застали компакт-диски. Их обратная сторона переливалась от окружающего света, и за счёт этого поверхность выглядела красиво. Тот же эффект можно воспроизвести и в Figma с помощью градиентов и эффектов наложения Difference и Screen.

Этот эффект делается в два этапа: круг с цветным градиентом и дополнительные.

Круг с цветным градиентом

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

Неоновое свечение

Этот эффект используют довольно редко, так как в неправильных пропорциях он может превратить вашу вёрстку в один световой меч из «Звёздных войн». Если вы уверены, что вашу задачу может решить неон, то рекомендуем не делать его слишком насыщенным.

Этого эффекта в Figma можно добиться с помощью градиентов, и делается он в три этапа: плашка с рамкой, дополнительный свет и внешнее освещение.

Плагин Morph

Если вы не хотите делать все эффекты самостоятельно, воспользуйтесь плагином Morph. С помощью него можно создавать отражения, глитчи, «стеклянные» плашки, делать градиенты и эффект неона.

10 топовых плагинов Figma, о которых вы не знали

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

Графики по вашим данным

Картинки в изометрии

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

Делает из любых объектов и даже фото палитру цветов

Palette поможет вам создать идеальную цветовую палитру с помощью машинного обучения от Colormind.

Вы можете щелкать по цветам, чтобы зафиксировать их при создании новых цветов и перетаскивать цвета, чтобы изменить их порядок.

С этим плагином вы сможете создавать мокапы прямо в Figma. В библиотеке есть тысячи качественных макетов Artboard Studio. С легкостью сможете преобразовать кадры Figma в макеты реальных продуктов одним нажатием кнопки. Каждый день библиотека пополняется новыми элементами.

Делает паттерны по сетке из ваших элементов

Pattern Hero позволяет размещать выбранные элементы или кадры в сетке для создания узоров. Такая фишка может помочь при создании паттерна для брендинга компании. Можно поэкспериментировать с различными комбинациями и сделать свой уникальный паттерн.

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

Плагин проверяет выделенный текстовый слой на наличие орфографических ошибок и предлагает их исправить

Добавляет разные стили к объектам

С помощью этого плагина вы сможете создавать классные эффекты, такие как Skeuomorph, Neon, Glitch, Reflection, Glass и т.д. Настраивается это все достаточно просто, прямо в Figma.

Этот плагин позволяет очень просто создавать рандомные кляксы, различных форм и цветов. Может помочь при оформлении сайта, создании собственного стиля либо графических материалов.

Направляет текст в различные линии и формы

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

Кстати, есть Телеграм-канал, где можно найти дизайн-плюшки 👇🏻

❤ Если тебе понравилась статья то поддержи ее лайком, а я продолжу делиться полезным о дизайне 🙂

Промотал вниз, чтобы убедиться, что в конце будет линк на телегу. Давайте еще 10 таких же постов

Не понимаю в чем проблема, если автор указывает ссылки на телеграм канал. Автору же надо как-то зарабатывать. Насколько я понимаю на vc нельзя как-либо монетизировать свой труд, кроме как с помощью донатов.

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

Если запретить людям так себя монетизировать, то в будущем мы будем видеть посты:
1. От любителей, которым все равно на то, что они пишут
2. От Бизнесов, которые будут писать предвзятые статьи, чтобы продвигать бренд
3. От штатных журналистов vc, либо журналистов других изданий, чьё мнение можно купить

БОльшую часть пользы на vc я получаю от независимых писателей/блогеров, которые оставляют ссылки на свой телеграм. Если мне пост не понравился, то я не подписываюсь, если понравился, то я подпишусь на его канал и буду за ним следить. У меня есть выбор. При этом такая реклама ненавязчива, как на Инстаграм или ютуб.

5 лайфхаков в Figma, которые помогут работать быстрее

Рассказываем, как изменить все одинаковые объекты на макете, за секунду найти нужный плагин и вдвое быстрее рисовать симметричные иконки.

OlyaSnow для Skillbox Media

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

Рассказываем о пяти простых лайфхаках, которые помогут вам быстрее работать в Figma.

Мгновенно изменить непрозрачность

Если вы не пользуетесь горячими клавишами в Figma, то, скорее всего, меняете непрозрачность слоёв примерно так: выделяете нужный объект, переводите курсор на панель настроек и в блоке Fill меняете непрозрачность. Это всё очень долго.

Чтобы не терять целую минуту на такое простое действие, пользуйтесь клавишами с цифрами от 1 до 0. Цифра 1 — 10% непрозрачности, 2 — 20% и так далее. Чтобы задать точное значение, быстро нажмите две любые цифры. Например, если нажать на 4 и 9, то непрозрачность слоя будет 49%.

Кстати, то же самое работает и в Photoshop.

Быстро найти нужный плагин или функцию

Если у вас установлено уже очень много плагинов и найти нужный в стандартном меню стало невозможно, воспользуйтесь внутренним поиском в Figma. Для этого нажмите на Ctrl (⌘) + P — откроется поисковая строка, которая ищет не только установленные плагины, но и стандартные функции редактора.

Изменить всё одинаковое

Если макет готов уже наполовину, а вы вдруг поняли, что не используете стили, это можно быстро исправить. Для этого нажмите на иконку и в выпадающем меню перейдите в пункт Edit → Select all with same. Вы можете искать объекты с одинаковыми шрифтами, соотношениями сторон, параметрами заливки.

В зависимости от выбранного параметра Figma выделит вам все элементы, в которых они одинаковые.

Добавить линию под модулем с помощью тени

К сожалению, в Figma нет опции «добавить линию только с одной стороны объекта». Но зато вы можете сделать это самостоятельно с помощью теней!

Как добавить линию только с одной стороны

Положение линии регулируется с помощью значений X и Y:

Нарисовать симметричные иконки в два раза быстрее

Наверняка у вас бывало так, что при рисовании симметричной иконки с одной из половин постоянно есть проблемы: то линии кажутся мятыми, то точки стоят на разных уровнях. С помощью компонентов вы можете нарисовать лишь половину иконки, а вторую часть просто скопировать и поставить рядом.

Как рисовать симметричные иконки с помощью компонентов

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

Изображения в Figma: подробная инструкция по работе для новичков

Тема сегодняшней инструкции «Изображения в Figma». Разберемся как правильно работать с картинками и рассмотрим различные вопросы по этой теме от простого к сложному.

Оглавление статьи

Как вставить картинку в фигме

Вставить нужную картинку в Figma можно 4 разными способами.

С компьютера:

Выберете нужное изображение на вашем компьютере и поместите картинку в фигму простым перетаскиванием в ваш проект (зажав левую клавишу мыши).

С интерента:

Вы можете скопировать нужную картинку с любого сайта. Для этого наведите на нужную картинку и нажмите правую клавиши мыши. Выберите пункт «Копировать изображение». Перейдите в фигму и нажмите на клавиатуре 2 клавиши «Ctrl + V», чтобы его вставить.

Главное, если будете публиковать в интернете (например на сайте), то обязательно смотрите лицензию. Есть огромное количество сайтов, которые предоставляют изображения для коммерческих целей.

Сделать скриншот:

Можно вставить снимок экрана в Figma. Для этого нужно сделать скриншот. Это легко реализовать с помощью различных программ, таких как: «Lightshot», «Joxi».

Через плагины:

Чтобы не искать изображения можно воспользоваться плагинами. Один из популярных плагинов для вставки фотографий — Unsplash. C его помощью можно вставлять фотографии с популярного сайта unsplash.com. На нём размещены тысячи изображений, которые можно использовать в любых ваших целях.

Вставка изображений в фигуру (прямоугольник, круг)

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

3 способа вставить изображение в любую фигуру в Figma.

Через правую панель:

Чтобы вставить изображение в фигуру через правую панель сделайте следующее:

Через инструмент «Place images»:

Можно вставить несколько разных изображений в несколько фигур в фигме одновременно. Например: если в дизайне сайта галерея или портфолио. Можно вставить нужные картинки в эти раздел массово.

C помощью плагина:

Подробная инструкция по вставке изображений с помощью плагина Unsplash находится здесь.

Как обрезать изображения в Figma

Чтобы обрезать изображение в Figma воспользуйтесь инструментом «Crop image». Он находится в верхней панели по центру.

Как сохранить картинку в фигме на компьютер

Чтобы сохранить нужную картинку из фигмы на компьютер, воспользуйтесь инструментом «Export»:

Подробнее об экспорте в различных форматах, читайте в этой статье.

Как размыть фото в фигме

Чтобы размыть изображения в Figma сделайте следующие шаги:

Как отразить фото в фигме

По горизонтали:

Для отражения изображений по горизонтали в фигме, нажмите на горячие клавиши «Shift + H». Второй способ — нажать правую клавишу мыши и выбрать надпись «Flip horizontal».

По вертикали:

Чтобы отразить картинку в Figma по вертикали выделите её и нажмите на 2 горячие клавиши «Shift + V». Также можете нажать правую клавиши мыши и выбрать пункт «Flip vertical».

Как изменить прозрачность картинки

Чтобы изменить прозрачность изображения в Figma измените цифру с процентами в правой панели, внизу надписи «Fill».

Также можно нажать на клавиатуре на цифры. 1 — 10% прозрачности, 5 —50% и т.д. Если быстро нажать 2 цифры (например 34), то прозрачность изображения будет 34%.

Как наложить текст поверх картинки в Figma

Для того чтобы сделать текст с наложением на него какой-либо картинки в Figma необходимо:

Как вырезать объект в фигме на фото и удалить задний фон

Чтобы вырезать объект в фигме и затем удалить у фото задний фон, воспользуйтесь инструкцией, которую я подготовил в отдельной статье и видео уроке.

Как удалить фото в Figma

Чтобы удалить не нужное фото в фигме просто нажмите на клавишу bacspace на клавиатуре.

В этой статье мы разобрали как работать с изображениями в Figma.

Как сделать эффект стекла в «Фигме» всего за 5 минут

И бонус: где взять готовые текстуры.

Эффект матового стекла в «Фигме» – это тренд. Для наглядности сделаем такой эффект на примере простой фигуры. Создадим новый фрейм и поместим на него какую-нибудь картинку или иконку, чтобы эффект стекла был заметен.

Создаем новый фрейм в «Фигме»

Добавляем во фрейм любую фоновую картинку

Сверху наложим любую фигуру, к примеру, прямоугольник. По умолчанию фигура задается цветом #C4C4C4, его и оставляем. Справа в блоке Fill задаем прозрачность цвету – 1 %, а в блоке Effects задаем Background blur 50 %.

Задаем параметр Background blur фигуре, которая будет с эффектом стекла

Затем накладываем тени на наш объект в том же разделе Effects – жмем плюсик и добавляем Inner Shadow три раза с разными параметрами.

Второй: с Blur 40 %, по оси Y 1, цвет #E2E2E2, прозрачность 20 %.

Третий: с Blur 16 %, по оси Y 4, цвет #E9E9E9, прозрачность 20 %.

Задаем три раза эффект Inner Shadow с разными параметрами

С тенями можно «играться» по-разному, в зависимости от того, какой эффект нужен. В данном случае получается такой результат:

Как сделать эффект стекла в «Фигме»

Как сделать эффект неонового стекла

Создадим фрейм и также разместим на нем любую фигуру. Цвет оставляем у фигуры изначальный – #C4C4C4. Прозрачность задаем 1 %, а Background blur ставим на 100.

Добавляем эффект Background blur

Теперь задаем внутреннюю тень (Inner Shadow) три раза с разными параметрами.

Первый: с Blur 40 %, по оси Y 1, цвет #E3DEFF, прозрачность 20 %.

Второй: с Blur 18 %, по оси Y 4, цвет #9A92D2, прозрачность 30 %.

Добавление внутренних теней на фигуру

Затем добавляем еще три параметра Inner Shadow.

Добавляем 7 эффектов с внутренней тенью на фигуру с разными параметрами

Всего получается 7 заданных эффектов. Можно экспериментировать с цветами, тенью и ее интенсивностью.

Красиво и современно

Как сделать голографический эффект

Создаем новый фрейм, на нем располагаем любую фигуру. Справа в блоке Fill заполняем фигуру радиальным градиентом – выбираем Radial.

Заполняем фигуру радиальным градиентом

В палитре ниже жмем на цветовую дорожку и таким образом добавляем новые цвета в градиент. Создаем всего 6 цветов: #22AADD, #E1F664, #FEB0FE, #ABB3FC, #5DF7A4, #58C4F6.

Добавляем цвета в градиент

Как сделать градиент в «Фигме»? Инструменты и полезные плагины

Затем в блоке Fill жмем плюс и создаем еще одну заливку цветом. Способ заливки выбираем Angular, затем жмем на капельку рядом (Blend mode) и выбираем Difference.

Измененяем метод наложения (blend mode)

Как на прошлом шаге, создаем на цветовой дорожке еще несколько шагов в градиенте и чередуем черный и белый цвет, как на скриншоте ниже.

Меняем метод наложения (blend mode) на Difference

Затем дублируем предыдущий шаг, только в Blend Mode ставим Screen. В результате у нас получится 3 разных цветовых слоя в блоке Fill.

Заполняем фигуру тремя разными градиентами в блоке Fill

В целом мы уже получили голографический эффект, но можно добавить немного шума с помощью плагина Noise. Он устанавливается бесплатно из Community «Фигмы».

Выбираем из списка плагинов Noise, подбираем необходимые для себя параметры, жмем галочку и получаем готовый слой с шумом.

Добавление шума на фигуру

Накладываем его на наш эффект, уменьшаем прозрачность до 50 %.

Итоговый результат – голографический эффект с шумом

Как сделать анимацию в Фигме – простая инструкция

Готовые текстуры для «Фигмы»

Самый простой и быстрый способ подобрать ненавязчивый бесшовный фон – обратиться к сервисам с паттернами. К примеру, toptal.com. Там собрано множество готовых паттернов, которые можно посмотреть в работе сразу на сайте – на странице каждого показывается, как он будет выглядеть на фоне в дашборде, презентации или landing page.

Toptal – сервис с готовыми паттернами для «Фигмы»

Также фоны с разными эффектами можно бесплатно скачать на сайте freepik.com. Напишете интересующий вас фон на английском языке в поиске, к примеру, эффект дерева или бумаги. Останется выбрать понравившийся и скачать его.

Поиск фонов и паттернов с эффектом дерева на freepik.com

Фон с эффектом бумаги на freepik.com

Также Community «Фигмы» предлагает для установки плагин Pattern Hero, в котором можно создать разнообразные текстуры самостоятельно.

Открытие плагина Pattern Hero в «Фигме»

Откроется окошко с созданием паттерна из созданной нами фигуры. Нам предлагается на выбор пункты: Rows (Строки), Columns (Столбцы), Padding (Отступ), Repeat Nodes (Повторение фигуры), Shuffle Nodes (Расположение фигур вразброс, если используем для создания паттерна несколько фигур), Group Nodes (Сгруппировать фигуры).

Плагин Pattern Hero для «Фигмы» в работе

После выставления необходимых параметров жмем Create Pattern. В данном случае у нас создалась группа из кружочков с 10 строками, 10 столбцами и расстоянием 5.

Создание повторяющихся фигур с помощью Pattern Hero

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

Пример использования паттерна, созданного при помощи Pattern Hero

5 полезных плагинов для Figma: наведение порядка

Как быстро удалить лишние слои, упорядочить макеты и переименовать все фреймы.

Иллюстрация: Оля Ежак для Skillbox Media

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

Рассказываем, какие плагины для Figma помогут вам сделать собственные иллюстрации.

Unused Styles Remover

Во время работы у вас могут остаться неиспользуемые стили шрифтов или цветов. Если вы делали только два макета, то удалить лишнее можно руками и довольно быстро. А если у вас несколько цветовых тем и 20 макетов, то вместе с ненужными стилями можно удалить и основные.

Эту проблему решает Unused Styles Remover — он анализирует весь документ и за вас удаляет те сохранённые стили, которые вы нигде не использовали.

Clean Document

Работа с документом превращается в ад, когда слои в нём никак не сортированы: группы из одного объекта, скрытые и ненужные макеты, плохая сортировка. Всё это поможет почистить плагин Clean Document.

Sort Layers

Этот плагин помогает быстро сортировать объекты на панели слоёв в том порядке, в котором они расположены на макете. Sort Layers полезен, если вы собираетесь показать клиенту файл в Figma как презентацию, — всё встанет на свои места, и вам не придётся долго искать нужное.

Rename It

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

Organize Layers

Помогает организовать варианты элементов интерфейса, чтобы каждый из них занимал своё место в иерархии. Чтобы он сработал правильно, все слои должны называться по следующей системе: «Название элемента / Значение первого свойства / Значение второго свойства / … / Значение десятого свойства».

Если вы не знаете, что такое варианты элементов интерфейса в Figma, советуем прочитать нашу предыдущую инструкцию: «Как делать варианты элементов интерфейса в Figma».