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

Создать эффект матового стекла в Figma легко, и он может придать вашим проектам уникальный стиль. Следующая статья покажет вам, как это сделать.

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

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

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

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

1. Нарисуйте прямую линию

Нарисуйте линию, используя Инструмент «Линия» (L). Чтобы линия оставалась горизонтальной, во время рисования удерживайте клавишу Shift. Выберите цвет линии, щелкнув цветной квадрат под «Обводкой», когда линия выбрана.

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

Изменить толщину линии в настройках Обводки; Нажмите на значок с тремя горизонтальными линиями и увеличивайте, пока не достигнете желаемой толщины. Для закругленных кончиков щелкните раскрывающееся меню с горизонтальными линиями в меню «Обводка» и прокрутите вниз раскрывающегося меню, чтобы просмотреть параметры закругленных кончиков.

2. Нарисуйте круг

Нарисуйте маленький круг, используя Инструмент «Эллипс» (O). Удерживая клавишу Shift, рисуйте круг, чтобы он стал идеально круглым. Круг должен быть достаточно маленьким, чтобы его можно было использовать в качестве маркера, но достаточно большим, чтобы четко видеть эффект матового стекла.

Чтобы добавить цвет, выберите круг и используйте «Заливка» на правой панели инструментов. Вы можете использовать нейтральные цвета, например серый или бежевый, или более светлые цвета из цветовой палитры дизайна.

Затем измените непрозрачность рядом с параметром «Заливка» на любое значение от 40% до 70%. Вы хотите видеть рисунок за кругом, одновременно видя цвет, которым вы его заполнили.

3. Добавьте размытый фон

Это та часть, которая придает эффект размытия вашей фигуре. Выберите круг и перейдите в Эффекты. Эффект по умолчанию — «Тень», наведите на него курсор и щелкните появившуюся стрелку. Выберите «Размытие фона».

Чтобы увеличить или уменьшить размытие, щелкните значок рядом с надписью «Размытие фона» и измените число на желаемый эффект размытия.

Чтобы завершить индикатор маркера, переместите линию так, чтобы она совпала с краем круга. Выделите линию и круг, щелкните правой кнопкой мыши и выберите «Выбор группы». Теперь вы можете переместить или скопировать его, чтобы использовать в разных частях вашего дизайна.

Эффект размытия работает одинаково на любой части дизайна. Почему бы не превратить эту технику в творческую дизайнерскую задачу? Этот эффект обязательно станет отличной изюминкой дизайна.

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