Create a Mobile, Tablet and Desktop Frame in Figma

Build Reusable Designs with Figma Components

Add a Reusable Figma Component to Multiple Frames

Create a Simple Icon with Figma Ellipse and Pen Tool

Duplicate Grouped Vectors to Create a Patterned Logo in Figma

Establish a Typography System in Figma with Text Styles

Create Figma Color Styles to Reuse Across Frames 

Reuse a Drop Shadow in Figma with Effect Styles

Prototype a Screen Transition in Figma

Export and Share Figma Frames

The Beginner's Guide to Figma

In this lesson, you will learn how to build a component in Figma, which is the equivalent to a "symbol" in Sketch. It's essentially a reusable piece of design. This will allow you to work more efficiently when designing your app.

https://app.egghead.io/api/v1/lessons/figma-build-reusable-designs-with-figma-components/subtitles

Instructor: [00:00] The first thing we're going to do is create a new frame called Components where we'll store all of our Components. Navigate to the Frame tool at the top and then click and drag a new frame above all of our other frames. Then double-click and call it Components.

[00:21] Let's go ahead and create our first Component. Click on the Rectangle tool at the top and then click and drag a button. On the right side, navigate down to Fill and change it to a color that you like. I'm going to use this dark blue.

[00:39] Next, let's change the border radius. Up at the top, you'll see Corner Radius. Let's change that to 6. Let's scroll down to the bottom and add an effect. We're going to add a drop shadow. Click on the Sun, navigate to Y, and let's change that to 2. Perfect. Let's close that.

[01:07] Let's click on the Text tool and add some text to our button. Let's say Click Me. Can't see it, so let's Select All. On the right side, let's go to Fill, change that to white.

[01:25] Next, let's increase the size to 18, then let's center it, and last, let's change it to uppercase. If you click these three dots, it will expand the Advanced Type menu. Under Transform, click Uppercase.

[01:48] The last thing we're going to do is touch it up a little bit by shrinking it, and then centering it. We can do that by holding Shift and clicking on the Backgrounds so that both layers are selected. If we come up to the top, we can horizontally center it and then vertically center it. Now it is perfectly centered.

[02:11] This looks pretty good to me. Let's go ahead and create a Component from it. To do that, make sure you have both layers selected. Up at the top, in the center, click the Create Component button. Congrats, you've created your first Component in Figma. Let's go ahead and name it.

[02:34] For good practice, let's go ahead and create one more Component. We're going to create an input field. Select the Rectangle tool, drag out a box. Let's change the fill to white. Let's add a stroke. I'm going to use a light grey. Let's round the corners too.

[02:57] Last, let's add some text. GIVE ME THE TEXT. It's in uppercase. We know how to change that by selecting All and going over to the three dots and then toggling the uppercase. Let's close that, left-align it. Let's move it a little bit. Perfect.

[03:23] Let's go ahead and turn that into a Component as well. Select the Rectangle layer, then hold Shift. Select the text layer so that both are selected and then go to the top and click Create Component. Let's name that Input.

[03:39] Great. Now we have two reasonable designs, also known as Components in Figma.

Build Reusable Designs with Figma Components

Share this video with your friends

Course

The Beginner's Guide to Figma