♻️ Refactor

Due to the high demand and popularity of the Glassmorphism plugin, it has been refactored from vanilla JavaScript to Preact for easier maintenance. This change was made to ensure that the plugin remains reliable and efficient for the thousands of users who use it on a daily basis. I chose Preact over React because it is a lightweight framework, making it more suitable for a smaller application.

💬 Why Glassmorphism?

• This plugin enables you to preview the effect in real-time directly within the canvas.
• This algorithm surpasses its predecessor, producing a more refined end result.

💫 Introduction

Glassmorphism is a popular design trend in user interface (UI) design that creates a frosted glass effect on elements such as buttons, panels, and cards. This effect is achieved by using blurred, semi-transparent backgrounds overlaid with elements that appear to be floating above the background. The result is a visually appealing, three-dimensional effect that creates a sense of depth and transparency in the UI design. Glassmorphism has gained popularity in recent years as it adds a modern, sleek look to UI designs.

🚧 Beta

Currently in beta.

🔓 Development

This plugin template uses Typescript and NPM, two standard tools in creating JavaScript applications.

First, download Node.js which comes with NPM. This will allow you to install TypeScript and other libraries. You can find the download link here:

https://nodejs.org/en/download/

Next, install TypeScript using the command:

npm install -g typescript

Finally, in the directory of your plugin, get the latest type definitions for the plugin API by running:

npm install --save-dev @figma/plugin-typings

🛤️ Inspiration

Glassmorphism in user interfaces

📋 License

MIT