Variable modes
A mode is one column of values in a Figma variable collection, such as Light and Dark. A frame set to a mode resolves every variable in it against that column.
Why it matters
Modes let one component serve light and dark, or iOS and Android, without copies, so a fix is made once.
They only work if every value that should move is a variable; one hard-coded color breaks the switch.
Variable modes on iOS and Android
Also called Figma modes. The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | Appearance (light and dark) and size classes | Color schemes (light and dark) and window size classes | Modes of the Color Tokens and Platform collections |
| Minimum touch target | 44 pt | 48 dp | platform/ |
| Switch track width | 64 pt | 52 dp | platform/ |
| Switch track height | 28 pt | 32 dp | platform/ |
In Appetite UI
The components, drawn live from the kit’s tokens. Tap them: they behave as the Figma prototype does.
List with Toggle, compact rows
In practice
Modes are how one component serves several contexts without copies: the same button reads light or dark colors, or iOS or Android geometry, from the mode its frame is set to.
Appetite UI uses two kinds. Color Tokens has Light and Dark. Platform has ios-md, ios-lg, android and the two iPhone Duo modes, so one switch on a frame moves a touch target from 44 to 48 and a switch track from 64 by 28 to 52 by 32.
Common mistakes
- Duplicating frames for dark mode instead of setting the mode.
- Putting values in a mode that never differ. A mode is for values that change together.
- Forgetting to pin the mode on a frame, so it inherits the wrong one from its parent.
Questions
What are variable modes used for in a mobile design system?
For anything that has more than one value for the same role: light and dark colors, iOS and Android geometry, a brand and the system defaults. A frame picks its modes, and every component inside resolves against them, so one component serves every case.
Which modes does Appetite UI use?
Color Tokens has Light and Dark. Platform has ios-md, ios-lg, android, ios-duo-outer and ios-duo-inner. Platform Bridge has Brand and System, which return either your brand values or the platform’s own published ones.
Sources
The pages the facts above rest on, each read October 31, 2026.