Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Reuse a Drop Shadow in Figma with Effect Styles

    Joe PreviteJoe Previte
    figmaFigma

    In this video, you will learn how to reuse Effects such as a drop shadow using Effect Styles in Figma.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: Let's create a frame where we'll store all of our effect styles. Select the Frame tool, then click and drag a frame. Let's name this Effects. We're going to create a drop-shadow effect.

    To create our effect style, we're going to select the Shape tools, select the Rectangle, and then draw a small rectangle. Holding SHIFT, you can make it a perfect square.

    Let's change this fill to white, and then let's add an effect, in this case, a drop-shadow. Let's click this on and adjust it a little bit. Let's decrease the y-value to two and increase the shadow to 30 percent. Great. Let's close that.

    Now let's turn this into a reusable style by clicking the four dots, clicking the plus, then naming this Drop-Shadow, and clicking Create. Great. Now we have a drop-shadow effect. Let's go ahead and try and use that.

    Let's try adding our drop-shadow to our input component. If we select it, we'll notice on the right that Figma tells us that this is an instance of the input component.

    Let's select Go To Master Component. Next, let's scroll down on the right to Effects, and click the four dots, and then select our drop-shadow. Great.

    Now if we go back to the original page that we were on, we'll see that our instance of the input component now has our drop-shadow. If we scroll down, we'll notice that all the other instances have now been updated as well.

    By taking advantage of Figma's effect styles, you can reuse things like a drop-shadow across components and other pieces in your project.