# Задание

26 янв. 2025

Эффект матового стекла в Figma

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

Эффект матового стекла в Figma

Почему Figma?

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

Открыть Figma

Шаг 1. Подготовка элементов макета

Начните с создания рабочей области, где будет размещена плашка с эффектом матового стекла.

  1. Выберите область для эффекта.
  2. Используйте инструмент Frame (горячая клавиша F) для создания области, которая будет содержать текст.
  3. Залейте фрейм белым цветом и добавьте внутрь текст. Для удобства используйте шрифт без засечек — он лучше читается на фоне эффекта.

Шаг 2. Настройки фрейма с текстом

  1. Выделите ваш фрейм.
  2. В правой боковой панели Figma найдите раздел Auto Layout, нажмите Resize to fit, чтобы фрейм автоматически подстроился под размер текста.
  3. Нажмите Add Auto Layout, чтобы упростить дальнейшую работу.
  4. Установите внутренние отступы (поля Padding), чтобы текст не прилегал вплотную к краям.

Шаг 3. Применение эффекта матового стекла

Теперь добавим эффект размытия для создания матового стекла:

  1. Выделите ваш фрейм.
  2. Перейдите в правую боковую панель и найдите раздел Effect.
  3. Выберите эффект Background Blur и установите значение размытия, например, 20px. Вы можете корректировать это значение позже.
  4. В разделе Fill настройте цвет заливки и его прозрачность: в разделе "Fill" выставляем прозрачность цвета на нужное вам значение, в нашем примере 20% и при необходимости корректируем цвет для лучшего считывания текста, создавая контраст текста и фона. Если текст плохо читается, увеличьте контраст между цветом текста и заливкой.

Шаг 4. Дополнительная стилизация

Сделайте ваш дизайн еще интереснее:

  • Градиентный фон: замените однотонный цвет на градиент. Это добавит глубины и динамичности.
  • Тень: добавьте легкую тень для текста или фрейма, чтобы создать эффект объема.
  • Блики и обводка: используйте светлую обводку или блики на краях фрейма для имитации стеклянной текстуры.


Эффект матового стекла — это универсальный прием, который подходит для разных проектов: от веб-дизайна до мобильных интерфейсов. Экспериментируйте с настройками, чтобы добиться уникального результата. Загрузите вашу работу на проверку и получите награду за свои усилия!

Удачи в создании и новых творческих побед!

Награда за выполнение:

+

100 sc

Получить в 2 раза больше опыта (Silvercoin)

Ваша выполненная работа:

Перетащите сюда файл или загрузите по кнопке

(Размер файла до 2 МБ, в форматах "jpg, png, gif, svg, ico, webp")

Популярные задания

51

Начать обсуждение

осталось 1000 из 1000 символов

Отправить

# Задание

11 фев. 2025

Как создать неоновый текст в Figma

Узнайте, как создать неоновый текст в Figma с этим простым пошаговым уроком. Добавьте яркие све ...

19

# Задание

21 янв. 2024

Награда за пост про Drawcon

Выполнив это простое задание, вы сможете продолжить заполнение своего инвентаря предметами, и п ...

92

# Задание

11 янв. 2024

Приведи друга за Руки дракона

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

105