Forum Discussion
How to Create Glassmorphism Effect in Figma
Hi everyone,
We created a short guide on how to create the glassmorphism effect in Figma and we thought that it might be useful for you too!
As we learned in the previous ELH challenge, the glassmorphism effect looks like a frozen glass with a blurred background as you can see in the example below.
Here you can find short instructions on how to create the glassmorphism effect in Figma (it's a free online design tool) - https://fastercourse.com/how-to-create-glassmorphism-effect-in-figma/
I also attached the Storyline 360 file with the above example where you can place your newly created file from Figma and see how it looks.
I hope this might be useful for someone and if you have any questions, let me know :)
Wow! This is gorgeous, Karlis! Thanks for sharing the story file with the community!
Sure, no problem! I hope it might be helpful for someone 🙂
Helpful to me Karlis, thank you!
This is incredible! Thank you!!
Incredible example! Thank you very much for sharing this. May I ask how you added the video in the background? I assume you placed it in a frame in Figma and exported it as an MP4 file with the blurred card on it. I'd like to do the same and would appreciate an explanation. Many thanks!
- Hi! Actually we made the video in Adobe After Effects, where we created the card on the top layer, and the video in the bottom. There are quite a few steps for this, but you can easily find a tutorial on Youtube. Regarding Figma, if you have the Professional plan subscription, it is also possible, as you already mentioned. We didn’t have one at the time, so we used AE.
Hi! I get it now. Thank you very much for your explanation!
I am glad you liked our template! That is the whole point of this community :).
Definitely, many thanks!
Would love to hear what you think! https://community.articulate.com/discussions/building-better-courses/glassmorphism-challenge-weather-conditions-and-precautions
