How to Use Figma Variables for Theming

Open the Local Variables panel by clicking the clock icon in the right sidebar or pressing Ctrl+Alt+V (Cmd+Opt+V). Click 'Create variable' to start.

Choose a variable type: Color (for fills/strokes), Number (for spacing, radius), String (for text content), or Boolean (for on/off states). For theming, start with Color variables.

Name your variables semantically: 'Primary/500', 'Background/Default', 'Text/Heading'. Avoid specific color names like 'Blue' so you can change the actual color later.

Set values for your 'Light' mode collection. Click the color swatch and choose your light theme colors. These are your default values.

Add a 'Dark' mode: Click the '+' next to 'Mode 1' and rename it to 'Dark'. Click the variable value and set dark theme colors. Figma will automatically switch based on the selected mode.

Apply variables to your designs: Select an object, click the fill color, then click the variable icon (looks like a crosshair). Choose your variable (e.g., 'Primary/500').

Switch between themes globally: In the top toolbar, click the theme dropdown (shows 'Light' or 'Dark'). All objects using variables will update instantly. This is perfect for client presentations.