Glassmorphism from Figma
Introduction 🤔
Glassmorphism is a UI trend that has been gaining popularity over the last few years. This style has been used in various major products like Windows Vista, Apple Ios 7, Redmi MIUI 12.0 etc making this effect more popular and more mainstream. Main characteristics of this effect are,
· Transparency (like frosted glass).
· Multi-layered approach with objects floating in space.
· Multi colours to highlight the blurred transparency.
· A subtle light border on the translucent object.
I think now you have a basic idea about what glassmorphsim is. Then let’s move on to designing this effect using Figma.
Prerequisites ❓
In this article, I will not talk deeply about Figma; therefore it would be best if you knew about it before moving along with the article. If you have worked with Figma before, then it’s great!😄 You can skip the next part. But for those who do not have an idea about Figma, I strongly recommend you watch this video before moving forward.
Let’s download a nice background 🐱💻
As I mentioned in the ‘Introduction’ you need a multicoloured background to highlight the blurred transparency look of glassmorphism. For that, in this article, I am going to use a mesh gradient which I downloaded from the following link. FYI you can use any one of the mesh gradients you like.
Creating Glassmorphsim using Figma 👨💻🐱🚀
Now we are all set to create the glassmorphsim effect using Figma.
Step 1️⃣
Import the downloaded mesh gradient to your Figma file.
Step 2️⃣
Create a rectangle with the dimension of 3441 x 1779 px and corner radius as 400 px.
Step 3️⃣
Apply a linear gradient (pick white and white transparent as the two colours) to the rounded rectangle as shown in the image below.
Step 4️⃣
Apply around 150 background blur to the rounded rectangle using ‘Effects’ as shown in the image below.
Step 5️⃣
Apply a subtle drop shadow as well. The drop shadow I have used is shown below.
Step 6️⃣
Finally, add a small stroke with the same linear gradient used in Step 3, and Voila now you have a glass card.
Now you can use the above steps to create the glassmorphism effect in your design. Also, If you like you can share your own design created using glassmorphism in the comment section.
Link to the design shown in the article 🐱👤
If you need to my design further, you can find that in the link below.
Conclusion ✌
This is the end of the article. Before I finish I want to say, if I have made any mistakes or if there is an easy way to do this, please add a comment below about it. If you find this article useful, feel free to share this among your friends and colleagues.
Thank you, And STAY SAFE! 👨⚕️👩⚕️
