figma · braza shows you
how to add dark mode in figma
braza walks you through the hidden variables panel and the 'modes' columns so light/dark swaps with one click.
the clean way to do dark mode in figma is color variables with 'modes' - define each color once, give it a light value and a dark value, and your whole design flips with a click. the variables panel is tucked away and intimidating, so here's the walk-through.
or do it yourself
- 1with nothing selected, in the right panel find 'local variables' and click the icon to open the variables window.
- 2create a color variable (e.g. 'bg/surface') and give it your light value.
- 3click '+ add mode' in the top-right of that window to add a 'dark' column, then set the dark value for each variable.
- 4select your frames and apply the variables to fills/strokes instead of raw hex colors.
- 5select the top frame, and in the right panel switch its mode from 'light' to 'dark' - everything flips at once.
let braza do this with you
braza is a tiny on-screen guide that points at the right buttons and talks you through it, on windows and mac.
downloadcommon questions
where is the variables panel in figma?
click on empty canvas, then in the right design panel open 'local variables' (the small grid/database icon) to manage colors and modes.
do i need a paid plan for modes in figma?
you can create variables on any plan, but multiple modes (like light + dark) require a paid seat in many setups - figma limits modes on the free tier.