Since I’ve switched to Figma in my work, I’ll occasionally publish short tutorials on it here on the blog. I think many will find it interesting. No fluff, simple, clear guides. And I’ll start with a simple tutorial on how to easily create a glass effect in Figma.
Glass effect in Figma
First, let’s create a frame, say 800×500 pixels, and fill it with some color. For example, green.
Glass lesson in Figma
Now, inside the frame, we will create a rectangle or square. From it we will make our transparent glass.
I will create a 300x300px square of white color.
Figma glass creation
Let’s add a Backgound Blur effect to this layer.
Figma Tutorials – Blur
Then, by clicking on the “sun”, set the blur strength to 15
Glass in Figma
Almost done. For clarity, let’s add some picture or text to the background to make the effect more noticeable.
I’ll add a guy under a tree at sunset. The sunset is not visible yet )) But that’s for now…
Figma lessons effects
And now the most interesting part. To create the effect of matte or translucent glass, in Figma it is enough to change the transparency of the layer color fill.
Select our square and reduce Fill from 100% to 10 %
Figma glass effect
The main thing is not to confuse the fill with the layer transparency. If you reduce the percentage in the Layer field , you will not get this effect.
Now you can play with the el salvador phone number library parameters to make the glass more matte or vice versa…
Frosted glass in Figma
Additional improvements
We can also add a bit of realism and volume. Let’s round the corners of our square. I’ll set the radius to 9.
Then we’ll use the Isometric plugin . I’m sure you know how to search for and install plugins, so I won’t explain this part.
We launch the plugin, select our square and click any of the buttons in the plugin window.
Plugin isometry in Figma
There is isometry. Now let’s make our glass a little thicker. To do this, select the group in which our isometric square is located and add a couple of effects to this group.
The first effect is with these parameters. The glass will gain volume.
Figma effects
Again, in the effects, click the plus sign the best shopify themes of 2024 and the most commonly and add a drop shadow effect. Here, select the color of the shadow and its blur at your discretion. Everything depends on your background and idea.
This time, without any particular idea, I got this:
glass effect in figma. Tutorial
The main thing is that you understand how job data it works. If you liked the lesson, let me know in the comments. In the near future, I want to tell you how to create isometry in Figma yourself without plugins.