Эффект матового стекла в «Фигме» – это тренд. Для наглядности сделаем такой эффект на примере простой фигуры. Создадим новый фрейм и поместим на него какую-нибудь картинку или иконку, чтобы эффект стекла был заметен.
![Создаем новый фрейм в «Фигме» Создаем новый фрейм в «Фигме»](/upload/medialibrary/b84/s3ezeg6bfgmghy5ejexnznfjzbpnomfy/1.webp)
![Добавляем во фрейм любую фоновую картинку Добавляем во фрейм любую фоновую картинку](/upload/medialibrary/2db/jitmuwnwwbphfj813qbomafxpdmrxgw7/2.webp)
Сверху наложим любую фигуру, к примеру, прямоугольник. По умолчанию фигура задается цветом #C4C4C4, его и оставляем. Справа в блоке Fill задаем прозрачность цвету – 1 %, а в блоке Effects задаем Background blur 50 %.
![Задаем параметр Background blur фигуре, которая будет с эффектом стекла Как сделать эффект стекла в «Фигме»](/upload/medialibrary/1fe/u7nc5vynwyrmw73yvi66d6orhsj6zkhd/3.webp)
Затем накладываем тени на наш объект в том же разделе Effects – жмем плюсик и добавляем Inner Shadow три раза с разными параметрами.
Первый: с Blur 65 %, по оси Y -80, цвет #D4D4D4, прозрачность 20 %.
Второй: с Blur 40 %, по оси Y 1, цвет #E2E2E2, прозрачность 20 %.
Третий: с Blur 16 %, по оси Y 4, цвет #E9E9E9, прозрачность 20 %.
![Задаем три раза эффект Inner Shadow с разными параметрами Как сделать эффект стекла в «Фигме»](/upload/medialibrary/d66/chg3fw1evwjt35pbu9gnyfgma55ul3ns/4.webp)
С тенями можно «играться» по-разному, в зависимости от того, какой эффект нужен. В данном случае получается такой результат:
![Как сделать эффект стекла в «Фигме» Как сделать эффект стекла в «Фигме»](/upload/medialibrary/197/m1jxnw8t5ou9cdltqievml4yl5oizzy8/5.webp)
Как сделать эффект неонового стекла
Создадим фрейм и также разместим на нем любую фигуру. Цвет оставляем у фигуры изначальный – #C4C4C4. Прозрачность задаем 1 %, а Background blur ставим на 100.
![Добавляем эффект Background blur Добавляем эффект Background blur](/upload/medialibrary/89b/a5bljpvzd9hxy0m7y1k25woeh4joycfh/6.webp)
Теперь задаем внутреннюю тень (Inner Shadow) три раза с разными параметрами.
Первый: с Blur 40 %, по оси Y 1, цвет #E3DEFF, прозрачность 20 %.
Второй: с Blur 18 %, по оси Y 4, цвет #9A92D2, прозрачность 30 %.
Третий: с Blur 100 %, по оси Y 98, цвет #CAACFF, Spread -48, прозрачность 30 %.
![Добавление внутренних теней на фигуру Фигма – добавление теней на фигуру](/upload/medialibrary/93f/xpqs47kjx60z9phzbh7fq5yn0xbkkwu2/7.webp)
Затем добавляем еще три параметра Inner Shadow.
Первый: с Blur 68%, по оси Y -82, цвет #604490, Spread -64, прозрачность 30 %.
Второй: с Blur 11%, по оси Y 7, цвет #FFFFFF, Spread -4, прозрачность 100 %.
Третий: с Blur 56%, по оси Y 39, цвет #FFFFFF, Spread -36, прозрачность 50 %.
![Добавляем 7 эффектов с внутренней тенью на фигуру с разными параметрами. Как сделать эффект стекла в «Фигме»](/upload/medialibrary/485/qqg1dqz3k1v5fzviib86763vqu9636cu/8.webp)
Всего получается 7 заданных эффектов. Можно экспериментировать с цветами, тенью и ее интенсивностью.
![Итоговый результат Как сделать эффект стекла в Фигме](/upload/medialibrary/74b/sony8vfbkc070bg423gvsheriylgn74h/9.webp)
Как сделать голографический эффект
Создаем новый фрейм, на нем располагаем любую фигуру. Справа в блоке Fill заполняем фигуру радиальным градиентом – выбираем Radial.
![Заполняем фигуру радиальным градиентом Фигма – радиальный градиент](/upload/medialibrary/756/ffps5eik23de1vc7hm4yp5m8eyjz1p30/10.webp)
В палитре ниже жмем на цветовую дорожку и таким образом добавляем новые цвета в градиент. Создаем всего 6 цветов: #22AADD, #E1F664, #FEB0FE, #ABB3FC, #5DF7A4, #58C4F6.
![Добавляем цвета в градиент Добавляем цвета в градиент](/upload/medialibrary/85d/7zo2hq95olueh24v60tnioypkygzgsrc/11.webp)
Читайте также: Как сделать градиент в «Фигме»? Инструменты и полезные плагины
Затем в блоке Fill жмем плюс и создаем еще одну заливку цветом. Способ заливки выбираем Angular, затем жмем на капельку рядом (Blend mode) и выбираем Difference.
![Измененяем метод наложения (blend mode) Figma – работа с градиентами](/upload/medialibrary/a14/jrxhpcv8x02npsqsk006lop5wg065vjo/12.webp)
Как на прошлом шаге, создаем на цветовой дорожке еще несколько шагов в градиенте и чередуем черный и белый цвет, как на скриншоте ниже.
![Меняем метод наложения (blend mode) на Difference Figma – работа с градиентами](/upload/medialibrary/c05/v2b79dvnpgcf3xvf1j3ghwcpw15yk6js/13.webp)
Затем дублируем предыдущий шаг, только в Blend Mode ставим Screen. В результате у нас получится 3 разных цветовых слоя в блоке Fill.
![Заполняем фигуру тремя разными градиентами в блоке Fill Figma – голографический эффект](/upload/medialibrary/39b/mxfm96ii21syujzvxdns88o6su23rfmm/14.webp)
В целом мы уже получили голографический эффект, но можно добавить немного шума с помощью плагина Noise. Он устанавливается бесплатно из Community «Фигмы».
Выбираем из списка плагинов Noise, подбираем необходимые для себя параметры, жмем галочку и получаем готовый слой с шумом.
![Добавление шума на фигуру Голографический эффект в Фигме](/upload/medialibrary/e06/zygx1yz9z73c65m9dusuq0cclbxh7kmr/15.webp)
Накладываем его на наш эффект, уменьшаем прозрачность до 50 %.
![Итоговый результат – голографический эффект с шумом Как создать голографический эффект в Фигме](/upload/medialibrary/a0b/spamb5a6gyih12866dd8bran9h87urk0/16.webp)
Читайте также: Как сделать анимацию в Фигме – простая инструкция
Готовые текстуры для «Фигмы»
Самый простой и быстрый способ подобрать ненавязчивый бесшовный фон – обратиться к сервисам с паттернами. К примеру, toptal.com. Там собрано множество готовых паттернов, которые можно посмотреть в работе сразу на сайте – на странице каждого показывается, как он будет выглядеть на фоне в дашборде, презентации или landing page.
![Toptal – сервис с готовыми паттернами для «Фигмы» Toptal – сервис с готовыми паттернами для «Фигмы»](/upload/medialibrary/240/yqxgn0kqzjupjicpocdms2hwn2vp5orf/17.webp)
Также фоны с разными эффектами можно бесплатно скачать на сайте freepik.com. Напишете интересующий вас фон на английском языке в поиске, к примеру, эффект дерева или бумаги. Останется выбрать понравившийся и скачать его.
![Поиск фонов и паттернов с эффектом дерева на freepik.com Поиск фонов и паттернов с эффектом дерева на freepik.com](/upload/medialibrary/ccc/33529zqt3urdgjpfyxx0782fh9lmh87c/18.webp)
![Фон с эффектом бумаги на freepik.com Эффект бумаги для Фигмы](/upload/medialibrary/45b/3cj4s5zwbrc5a8fsla3fy5uazlh08efa/19.webp)
Также Community «Фигмы» предлагает для установки плагин Pattern Hero, в котором можно создать разнообразные текстуры самостоятельно.
Для этого достаточно на фрейме создать любую фигуру – квадрат, круг, треугольник или что-то другое, добавить ей заливку, градиент и тени, если необходимо. Затем открыть в меню Plugins -> Pattern Hero.
![Открытие плагина Pattern Hero в «Фигме» Фигма – паттерны в плагине Pattern Hero](/upload/medialibrary/a2f/18dwe0uc9dy14qps2ux9n55vwm06z4gd/20.webp)
Откроется окошко с созданием паттерна из созданной нами фигуры. Нам предлагается на выбор пункты: Rows (Строки), Columns (Столбцы), Padding (Отступ), Repeat Nodes (Повторение фигуры), Shuffle Nodes (Расположение фигур вразброс, если используем для создания паттерна несколько фигур), Group Nodes (Сгруппировать фигуры).
![Плагин Pattern Hero для «Фигмы» в работе Плагин Pattern Hero для «Фигмы» в работе](/upload/medialibrary/815/l614nhtr0q23a3xvxy324xm384k063ag/21.webp)
После выставления необходимых параметров жмем Create Pattern. В данном случае у нас создалась группа из кружочков с 10 строками, 10 столбцами и расстоянием 5.
![Создание повторяющихся фигур с помощью Pattern Hero Создание повторяющихся фигур с помощью Pattern Hero](/upload/medialibrary/c63/n3uifvvl9c17il0ydil41t8h2pxmt4n3/22.webp)
Затем у этой фигуры можно изменить размер, положение, поворот, цвет в зависимости от того, какого эффекта хочется достичь.
![Пример использования паттерна, созданного при помощи Pattern Hero Пример использования паттерна, созданного при помощи Pattern Hero](/upload/medialibrary/2f3/ic0lx4xhwopi8ucggeuke0j0y34ymxgb/23.webp)