How to create and use effect styles in Figma

Oscar de la Hera Gomez
A flower that represents Figma with the text "Effect Styles" beneath it.

A step by step tutorial on setting up effect styles in Figma.

Step One: Create an Effect

A screenshot of Figma showing a frame with a drop shadow effect applied.

In Figma, either create and customize a new effect or select an object with an existing effect.

Step Two: Click Styles

A screenshot of Figma showing a frame with a drop shadow effect applied. Highlighted on the right sidebar is the four squares next to “Effects.” Click it to open the Styles menu.

On the right sidebar, click on the four squares to the right of Effects.

This is known as the Effects Styles menu.

Step Three: Click +


<p>A screenshot of Figma showing a frame with a drop shadow effect applied. Highlighted on the right sidebar is the + within the Effect Styles menu. Click it to create a new style based on the style that you selected or created in Step One.</p>
<p></p>

In the Effects Styles menu window that appears, click + to convert the existing effect into a reusable style.

Step Four: Name, Describe & Create

A screenshot of Figma showing a frame with a drop shadow effect applied. Highlighted is the create effect style window that appears when you click the + on the effects styles menu. We have highlighted the Name and Description inputs - fill these in, but note that it is only required that you give the effects style a name. Once you’re done, click Create Style on the bottom right of the create effect style window.

Name the style and optionally, add a description.

Once you're done click Create style.

Step Five: Use the Style

A screenshot of Figma showing that if you now open the effects style menu, the style that you created will appear and can be applied to another frame, image, text or path by selecting it.

Create or select another frame, image, text or path to which you would like to apply the effects style that you created.

Once selected, open the Effects Style menu and click on the style that you just created.

A screenshot of Figma highlighting that the style that we created in this tutorial has been applied to another frame.

If at any moment you want to edit the style, remove, delete or detach it, follow one of the tutorials linked below.

Looking to learn more about things you can do with Figma ?

Search our blog to find educational content on learning how to use Figma.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details