Top.Mail.Ru
Заказать звонок
Телефон отдела продаж:
8 (800) 775-16-41
Наш e-mail:
mail@texterra.ru
Заказать услугу
Как сделать эффект стекла в «Фигме» всего за 5 минут Редакция «Текстерры»
Редакция «Текстерры»

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

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

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

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

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

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

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

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

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

Первый: с Blur 65 %, по оси Y -80, цвет #D4D4D4, прозрачность 20 %.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Третий: с Blur 100 %, по оси Y 98, цвет #CAACFF, Spread -48, прозрачность 30 %.

Фигма – добавление теней на фигуру

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

Затем добавляем еще три параметра 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 эффектов с внутренней тенью на фигуру с разными параметрами

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

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

Итоговый результат

Разработаем вам фирменный стиль
Подробнее

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

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

Фигма – радиальный градиент

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

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

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

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

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

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

Figma – работа с градиентами

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

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

Figma – работа с градиентами

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

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

Figma – голографический эффект

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

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

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

Голографический эффект в Фигме

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

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

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

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

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

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

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

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

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

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

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

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

Эффект бумаги для Фигмы

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

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

Для этого достаточно на фрейме создать любую фигуру – квадрат, круг, треугольник или что-то другое, добавить ей заливку, градиент и тени, если необходимо. Затем открыть в меню Plugins -> Pattern Hero.

Фигма – паттерны в плагине Pattern Hero

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

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

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

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

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

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

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

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

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

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

Сделаем для вас дизайн

или фирменный стиль компании с нуля

Подробнее
Поделиться статьей:

Новое на сайте

28 фев 2024
212
Топ новых инструментов и технологий в контент-маркетинге

Нейросети, чат-боты, короткие видео, обзоры — скорее всего, вы уже внедрили все эти технологии и форматы контент-маркетинга. Или нет?!

28 фев 2024
73 604
14 подсказок, как придумать тему статьи

Список тем, на которые я хочу написать, растет гораздо быстрее, чем готовые статьи. К примеру, сейчас у меня около двадцати свободных идей в Google Docs.

27 фев 2024
424
Главные нейросетевые тренды 2024 – отчет компании Deloitte

Ежегодный документ Tech Trends обещает повышение эффективности для компаний.

Смотреть все статьи

У вас есть деловой запрос? Давайте обсудим!

Оставьте свои контакты, мы свяжемся с вами в ближайшее время.

Нажимая на кнопку «Оставить заявку», вы подтверждаете свое согласие на обработку пользовательских данных

Спасибо!

Ваша заявка принята. Мы свяжемся с вами в ближайшее время.

Наш подход бустит продажи. Вы платите за результат!