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.