2.9 Modal

In the Figmaster - Lessons Figma file, open the 2.9 Modal page.

Introduction

Modals focus the user's attention exclusively on one task or piece of information via a window that sits on top of the page content. In this chapter, we'll create two simple modals. One will be used for informing the user. The second one will be a specific variant of transactional modal used for destructive or irreversible actions.

Step 1. Normal Modal

Part 1. Header

  1. Create a text layer with the following properties:
  2. Text: Modal title.
  3. Text Style: Heading/S.
  4. Text Color: Neutral/100.
  5. Open the Assets Panel and search for Icon / X.
  6. Drop the icon on the right from the Modal title.
  7. Group the Modal title and an icon.
  8. Rename the group to Header.
  9. Add auto layout.
  10. In the auto layout panel, set the following properties.
  11. Spacing between items: 8 px.
  12. Alignment: Left - Center.
  13. Select the Modal title and set its Resizing width property to Fill container.
  14. Resize the group, so it's 432 px wide.

Part 2. Text

  1. Create a text layer with the placeholder text inside: Assertively synthesize diverse value after enterprise data. Authoritatively embrace enterprise "outside the box" thinking without excellent imperatives. Rapidiously scale multidisciplinary innovation before proactive total linkage.
  2. Resize it, so it's 432 px wide.
  3. Change its text style to Text M/Regular.
  4. Change its color style to Neutral/90.
  5. Place it 8 px under the Header group.

Part 3. Buttons

  1. Grab the Button component from the Assets Panel and place it on the canvas.
  2. Set the following properties: Button / Text Only / Normal / Outlined / Default.
  3. The button text should be Cancel.
  4. Duplicate it 8 px to the right.
  5. The button on the right should have the following properties: Button / Text Only / Normal / Primary / Default.
  6. The button text should be Confirm.
  7. Group the buttons and add an auto layout.
  8. Rename this group to Buttons.
  9. In the auto layout panel, set the following properties:
  10. Padding Top: 16 px.
  11. Alignment: Top - Right.
  12. Resize the group to 432 px and place it 8 px below the Text.

Part 4. Wrapper

  1. Select all three elements.
  2. Group them and add an auto layout.
  3. Rename this group to Modal / Normal.
  4. Select all three elements inside and set their width Resizing property to Fill container.
  5. Resize it to 432 px.
  6. Set the padding of Modal / Normal to 24 px (all sides).
  7. Add Fill color Neutral/10.
  8. Set corner radius to 4 px.
  9. Add Stroke of 1 px Neutral/40 Inside.
  10. Add Shadow 2 effect.

Step 2. Danger Modal

  1. Duplicate the Modal / Normal 48 px to the right.
  2. Rename the new copy to Modal / Danger.
  3. Grab the Icon / WarningCircle from the Assets panel and drop it inside the Header group.
  4. Change its color to Danger/Main.
  5. Select the Primary Button inside the Button group.
  6. Change its Type property to Danger.
  7. Select the placeholder Text inside the group.
  8. Group it and apply the auto layout.
  9. Rename the Group to Text.
  10. Set its Resizing (width) property to Fill container.
  11. In the auto layout properties:
  12. Direction: Vertical.
  13. Padding Left: 32 px.
  14. Select the Text inside and set its Resizing width property to Fill container.

Step 3. Component

  1. Select both Modals.
  2. Create multiple components.
  3. Combine as variants.
  4. Property 1 should be Status.

Great job! I think you are ready for a small test of your skills in creating simple components. In the next chapter, you will practice it. Let's move on!

PreviousNext