Skip to main content

Elevation

Elevation is a visual effect that makes an element look like it's floating above the surface (using the z-axis).

Guidelines​

The elevation effect is made using shadows to help lift an element into focus, it is a reference to the physical world. Elements may be stacked on top of each other but can’t pass through each other.

Styles​

There are six elevation effects to choose between:  None,  Raised,  Overlay,  Sticky,  Temporary nav and Above scrim.

Implementation in Figma​

How to add​

  1. Locate the layer in the Layers Panel that needs elevation applied.

  2. Locate the Design tab in the Inspector Panel.

  3. Under the Effects section, open the Style library menu to view the elevation styles.

  4. Choose a style by clicking on the elevation needed.