Designing a modal

Now we'll create a composite component, which is a component comprised of other components.

Create a new page in Figma called "Modals" and add an art board.

A modal can contain several different elements but typically has a close button in the upper right-hand corner, some modal content, and an action to complete.

Let's build a dialog which informs the user that they can create an account to access more features.

It will contain a close button (X) in the top right corner, an illustration, a title (Sign up), and a paragraph containing the following text: "Sign up today to get access to all of our content and features!"

It will also contain a button at the bottom: a primary button (Sign up).

For the illustration we'll use Undraw.co which is my favorite website to grab illustrations from.

I'll use the "Mobile Login" illustration but feel free to choose any illustration. In the top right corner, add a shade from your primary color palette so it fits with your color scheme.

Save the illustration as an SVG and drag it into Figma.

Press "R" to draw a rectangle and give it a reasonable modal width and height. I chose a width and height of 800px by 580px.

Give the rectangle a background color of neutral-100 and click "Effects" to add a drop shadow.

Click the sun icon on the left to change the box shadow.

Give it a blur of 16, x of 0, and y of 5. Set the opacity to 20%.

Head over to the Noun Project and download the SVG version for a close icon. Drag that into Figma.

Give it the color neutral-400 and resize it to approximately 24px x 24px. Position in the top right corner, 40px from the top and right modal edges.

The illustration should be approximately 280px in height and be placed in the vertical center of the modal 64 from the top.

The illustration should be 32px from the title. The title should be an h3 and the header, paragraph, and button should be 16px from each other.

Next, I want you to create one more modal which uses some of the components we've made. I've also included a "Text Fields" page in the Figma kit which you can use for your mockups.

If you need inspiration I suggest Dribbble.