ГлавнаяУроки FigmaКак создать эффект стекла в Фигме
Лого yanakhodkina.com
Как создать эффект стекла в Фигме
time23.11.2019 #

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

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

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

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

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

Урок стекло в Фигме

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

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

Figma создание стекла

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

Уроки Figma - размытие

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

Стекло в Фигме

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

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

Figma уроки эффекты

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

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

Figma glass effect

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

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

Матовое стекло в Фигме

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

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

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

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

Плагин изометрия в Фигме

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

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

Фигма эффекты

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

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

эффект стекла в фигме. Урок

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

Нашли ошибку? Выделите фрагмент текста и нажмите CTRL+ENTER

Веб-дизайнер. В прошлом профессиональный фотограф-ретушер. Связаться со мной по вопросам сотрудничества можно через страницу Контакты

Яна Ходкина

Оставить свой комментарий:

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*Отправляя комментарий, вы даёте согласие на обработку персональных данных.

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: