В мире дизайна интерфейсов постоянно появляются новые тренды, но некоторые из них становятся классикой. Один из таких вечных трендов — эффект матового стекла, который придает изысканность и глубину визуальному восприятию. В этом текстовом уроке мы погрузимся в процесс создания эффекта матового стекла в Figma, одном из самых популярных инструментов для UI/UX-дизайнеров. Вы узнаете, как с помощью простых шагов можно придать вашим проектам современный и стильный вид.
8 шагов, чтобы создать стекло в Figma
Следуйте нашим простым и понятным шагам, чтобы шаг за шагом освоить этот эффект. Погрузитесь в процесс с нами и узнайте, как легко можно воплотить в жизнь эффект матового стекла в ваших проектах с помощью Figma.
Создаём прямоугольник
Выберите инструмент Shape tool ➜ Ractangle.
Затем нарисуйте прямоугольник нужной формы.
Далее скруглите углы прямоугольника в правой панели настроек.
Мы поставили это значение на 30.
Меняем заливку на градиент
Переходим в панель настроек — Fill и в палитре цвета изменяем заливку с Solid на Gradient. Выбираем тип градиента (Linear).
Смещаем точку градиента
По умолчанию линейный градиент создаётся с двумя точками. Они отвечают за цвет и направление заливки. Цвета двух точек, делаем белыми. Сместите верхнюю точку в левый угол нашего прямоугольника и понизьте непрозрачность с 100% до 40%.
Вторую нижнюю точку сместите в нижний правый угол. Непрозрачность второй точки поставьте на 0%
Добавляем обводку
В панель настроек нажмите на + в разделе Stroke и выберите толщину со значением 4px.
Далее меняем заливку обводки. Нажмите на иконку черного цвета в блоке Stroke и в палитре цветов поменяйте сплошную заливку Solid на Gradient. А в выпадающем меню типов градиентов выберите Radial.
Смещаем точку градиента обводки
Нижнюю точку градиента перенесите в нижний левый угол, заделайте цвет цвет белым, а непрозрачность выставите на 0%.
Центральную точку оставляем в центре без изменений, с черной заливкой и с непрозрачностью 100%.
Добавляем вторую обводку и смещаем её градиент
Чтобы добавить вторую обводку, как и при первом добавлении жмем в панели настроек на + в разделе Stroke, толщину оставляем со значением 4px. Там же выставляем непрозрачность в 100%
Затем откройте палитру цвета и поменяйте сплошную заливку Solid на radial Gradient. Сделай две точки белого цвета. Центральную белую точку оставляем в центре с непрозрачностью 100%, а непрозрачности нижней точки меняем на 0% и перемещаем в левый верхний угол прямоугольника.
Добавляем эффект размытия
В панели настроек нажимаем на + в разделе Effects, появится дроп-меню. Раскройте его и выберите последний эффект Backgraund blur.
Откройте настройки эффекта нажав на его иконку. В настройках этого эффекта есть только степень размытия. Поставьте значение размытия на 50.
Эффект матового стекла в Figma готов!
Готово! У вас получился прямоугольник с эффектом матового стекла.
Размер прямоугольника, толщину обводки и скругления углов можно менять в зависимости от ваших параметров.
Разместите прямоугольник над любым изображением и наслаждайтесь потрясающим эффектом. Например можно воспользоваться одним из стикеров из нашей подборки бесплатных стикеров для Фигмы.
Мы рассмотрели, как с помощью Figma можно создать эффект матового стекла, который не только улучшает внешний вид вашего дизайна, но и делает интерфейс более функциональным, облегчая восприятие контента пользователями. Этот урок демонстрирует, что даже сложные визуальные эффекты доступны для реализации благодаря интуитивно понятным инструментам Figma. Мы надеемся, что вы сможете использовать эти знания для создания захватывающих и красивых дизайнов.
Также для ваших дизайнов мы отобрали набор бесплатных текстур в Фигма, которые вы можете использовать в своих проектах!
