How Do You Add Glass Effects in Figma?

Figma is a popular tool for creating user interface designs for web and mobile applications. It has a wide range of features that allow designers to quickly and easily create high-quality visuals. One of these features is the ability to add glass effects to your designs. Glass effects can be used to add a glossy, reflective look to your design, which can make it stand out from the crowd.

So, how do you add glass effects in Figma?

The first step in adding glass effects in Figma is to create a rectangle shape. If you are working with an existing design, you can use the selection tool or the lasso tool to select the shape you want to use for your glass effect. Once you have selected the shape, open up the “Effects” tab on the right side of your screen. Here, you will find a variety of different options for adding glass effects to your design.

Once you have opened up the Effects tab, click on “Glass” and then adjust the settings as needed. You can choose from a variety of different types of glass including Frosted, Light Reflective, and Refraction. The settings will allow you to adjust how reflective or transparent each type of glass appears.

Once you have adjusted all of your settings, click “Apply” and then select which layers should receive your new glass effect. You can apply it to any layer that contains shapes or text elements in order to give those elements a glossy look.

That’s all there is to it! With just a few simple steps, you can easily add realistic looking glass effects in Figma. This feature makes it easy for designers to create stunning visuals that stand out from the competition.


Adding glass effects in Figma is an easy process that allows designers to quickly create realistic looking visuals with just a few clicks. With its wide range of options and adjustable settings, designers are able to customize their designs with unique reflective and transparent elements that make them stand out from the crowd.