Updated
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.
Updated
On this page
In the kit
The components, drawn live from the kit’s tokens. Tap them: they behave as the Figma prototype does.
List, compact rows
Toggle with label
What does each system call it?
The same idea under its Apple, Material 3 and Appetite UI name.
| System | Name |
|---|---|
| Apple | Appearance (light and dark) and size classes |
| Material 3 | Color schemes (light and dark) and window size classes |
| Appetite UI | Modes of the Color Tokens and Platform collections |
What value does it take on iOS and Android?
Read from the kit’s Platform collection and its Material 3 pages, as the docs print them.
| Variable | iOS (ios-md) | Android |
|---|---|---|
platform/min-touch-target | 44 | 48 |
platform/switch/track-width | 64 | 52 |
platform/switch/track-height | 28 | 32 |
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.