<?xml version="1.0" encoding="utf-8"?>

Building a clear elevation scale in Figma

Building a clear elevation scale in Figma

An elevation scale starts by turning shadows into reusable effect styles in Figma. Each level is saved with specific offset, blur, spread, and color values so depth stays consistent across components. Structuring these styles as a simple sequence makes it easy to apply the right level without manually adjusting shadows.

The scale becomes clearer when each level has a defined purpose. Lower levels often support base surfaces, mid levels hold cards or containers, and higher levels represent overlays and modals. Linking these styles to components through tokens keeps the hierarchy stable and prevents designers from creating one off shadows.

Keeping all elevation styles grouped in the Figma library makes the system easy to maintain. When a value changes, every component using that style updates automatically. This alignment between design tokens and code tokens helps teams keep depth predictable across screens and platforms.[1]

Improve your UX & Product skills with interactive courses that actually work