1.6 Shadows (Elevation)

In the Figmaster - Lessons Figma file, open the 1.6 Shadows (Elevation) page.

Introduction

In this chapter, you'll learn how to create shadow styles for our design system. We'll use them in the components in the next Module.

Elevation

The elevation is the relative distance between two surfaces along the z-axis. It's used to show surfaces at different elevations. For example, elevation:

  1. Allows surfaces to move in front of and behind other surfaces, such as content scrolling behind app bars.
  2. Reflect spatial relationships, such as how a floating tooltip's shadow indicates it is separate from a text below.
  3. Focus attention on the highest elevation, such as a dialog temporarily appearing in front of other surfaces.

For the Figmaster Design System, we'll use three styles of elevation:

  1. Shadow 1 will be used for the first level action components.
  2. Shadow 2 will be used for all popups and modals.
  3. Input Shadow will be used in inputs and text areas.

Creating these three shadow styles will be enough to handle all components in our design system. For the more robust design systems, you might need more shadow styles. However, after this chapter, you will learn the basics, and you will be able to create more styles without problems.

Step 1. Creating Shadow 1

  1. Press R to open the rectangle tool.
  2. Click somewhere in the Step 1, 2 & 3 frame to create a rectangle.
  3. Set it's fill color to Neutral / 10 Style and it's stroke to 1 px Neutral / 50.
  4. Make sure that the rectangle is selected. In the panel on the right, click on the "+" icon in the Effects section.
  5. The drop shadow effect has appeared below. Click on the sun icon to open the effect properties.
  6. Set the following values:
  7. X to 0.
  8. Blur to 2.
  9. Y to 1.
  10. Spread to 0.
  11. Color to 000000 12%.
  12. Close the effect properties panel.
  13. In the Effects section, click on the styles icon (four dots).
  14. In the Effect Styles popup, click on the "+" icon to create a new style.
  15. Name it Shadow 1 and click Create style button.

Step 2. Creating Shadow 2

This step will be very similar to the previous one. Try to create Shadow 2 style with the following values:

  1. X = 0.
  2. Blur = 8.
  3. Y = 4.
  4. Spread = 0.
  5. Color = 000000 10%.

Step 3. Creating Input Shadow

  1. Press R to open the rectangle tool.
  2. Click somewhere on the canvas to create a rectangle.
  3. Set it's fill color to Neutral / 10 Style and it's stroke to 1 px Neutral / 50.
  4. Make sure that the rectangle is selected. In the panel on the right, click on the "+" icon in the Effects section.
  5. The drop shadow effect has appeared below. Change it to Inner shadow by clicking on the 'Drop shadow' label and choosing it from the menu.
  6. Click on the sun icon to open the effect properties.
  7. Set the following values:
  8. X to 1.
  9. Blur to 2.
  10. Y to 2.
  11. Spread to 0.
  12. Color to 000000 12%.
  13. Close the effect properties panel.
  14. In the Effects section, click on the styles icon (four dots).
  15. In the Effect Styles popup, click on the "+" icon to create a new style.
  16. Name it Input Shadow and click Create style button.

Summary

You're doing great! Now, we'll be able to use these styles for our components. We're almost done with the Style Guide module. In the next chapter, I will show you how to create a simple icon component library.

PreviousNext