Designing Dark Mode in Figma: Best Practices and System Tricks

Dark mode is more than a trend—it’s a usability choice, a branding element, and increasingly, an expected feature in modern digital products. Designing it well takes more than inverting backgrounds and changing text to white.

In this guide, you’ll learn how to build a well-structured, accessible, and system-friendly dark mode in Figma using variables, tokens, and components. Whether you’re working on a design system or a one-off UI, these best practices will keep your design flexible, consistent, and scalable.

🌙 Why Dark Mode Matters

Dark mode offers real user benefits:

Reduces eye strain in low-light environments
Conserves battery on OLED screens
Feels modern and sleek
Provides users with choice and control

But poorly designed dark mode can reduce readability, introduce contrast issues, and increase maintenance cost. That’s where Figma comes in.

🔧 Step 1: Set Up Color Variables by Theme

Instead of designing dark mode manually, use Figma Variables to define color tokens:

color/background/default
color/text/primary
color/border/subtle
color/ui/surface

Assign each variable a Light Mode and Dark Mode value via modes (e.g., Light, Dark).

💡 Pro tip: Prefix with a system like mode/ or theme/ for clarity if you have many.

🎛 Step 2: Apply Variables to Components

Design all your components using these variables:

Buttons use color/background/button and color/text/button
Cards use color/ui/surface
Tooltips use color/text/muted and color/background/tooltip

This ensures that when you switch the variable mode to “Dark,” your entire UI switches seamlessly—without rebuilding anything.

🧩 Step 3: Create a Component Playground with Dark Mode Preview

Make a preview page that uses all your components and lets you toggle between Light and Dark Mode:

Use a frame as a container
Set a background color using color/background/default
Nest components inside
Switch variable mode using Figma’s Variable Mode Switcher

Now you can visually debug and tweak color balance without hunting through individual designs.

🎨 Step 4: Rethink Contrast and Elevation

Don’t just swap colors. Design intentionally for dark environments:

Increase text weight slightly for readability
Use higher contrast between surfaces
Use elevation (shadows or color steps) to distinguish UI layers
Consider using accent colors for key actions, but tone them down slightly in dark mode

Tools like Adobe Color Contrast Checker can help verify accessibility.

🔁 Step 5: Link Text, Icon, and Border Colors to Tokens

Don’t hardcode #FFFFFF or #1A1A1A—use color/text/primary or color/icon/default. This makes every design:

Easier to maintain
Easier to swap between themes
Consistent across the system

Bonus: it helps developers map design to code more easily, especially when using design tokens in the codebase.

🔍 Step 6: QA Your Dark Mode for Edge Cases

Test for things like:

Transparent overlays that disappear on dark backgrounds
Shadows that don’t show up well
Images or illustrations with white backgrounds
Scrollbars and focus rings

Add a QA checklist page to your Figma file with real-world scenarios.

🧠 Extra Tips

Use boolean properties to swap icons or UI elements for dark mode only if needed
Use Figma’s Prototype mode to let stakeholders switch between light and dark in a single preview
Add a label/tag in your components that says “Dark Mode Ready” to maintain standards

📦 Plugin Power-Ups

Themer – Swap between light/dark theme styles quickly
Batch Styler – Update styles in bulk
A11y Color Contrast Checker – Spot accessibility issues in both themes

✅ Final Takeaways

Dark mode is easier than ever to implement in Figma—but only if you think system-first:

Use variables and tokens
Design components to adapt
Validate with previews and real use cases
Keep accessibility and contrast in mind

➡️ Next up: “Design System Templates in Figma: What to Include (and What to Avoid)“