# 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.

Page: https://www.appetiteui.com/academy/glossary/variable-modes. Figma variable modes for light, dark and platforms. Also called Figma modes.

## At a glance

|  | iOS | Android (Material 3) | 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/min-touch-target` |
| Switch track width | 64 pt | 52 dp | `platform/switch/track-width` |
| Switch track height | 28 pt | 32 dp | `platform/switch/track-height` |

## 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.

## 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

1. [Figma Help: Modes for variables](https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables)

## Related

- Screens: [Settings screens](https://www.appetiteui.com/screens/patterns/settings)
- Docs: [Platform Bridge](https://www.appetiteui.com/docs/platform-bridge)
- Docs: [Colors](https://www.appetiteui.com/docs/colors)
- Article: [Dark mode with Figma variables, not duplicate frames](https://www.appetiteui.com/blog/dark-mode-figma-variables)
- Article: [How to design one app for iOS and Android in Figma](https://www.appetiteui.com/blog/design-one-app-for-ios-and-android-in-figma)
- Glossary: [Dark mode](https://www.appetiteui.com/academy/glossary/dark-mode)
- Glossary: [Semantic tokens](https://www.appetiteui.com/academy/glossary/semantic-tokens)
- Glossary: [Touch target](https://www.appetiteui.com/academy/glossary/touch-target)