# What is Variables?

Named values for colors and spacing stored in Figma that can switch instantly between modes like Light and Dark. They connect design directly to code tokens.

## In real work

Use color variables for every fill. No hardcoded hex. The design needs to work in both Light and Dark mode.

## Related terms

- [Component](https://prompthausapp.com/learn/component.md)
- [Instance](https://prompthausapp.com/learn/instance.md)
- [Variants](https://prompthausapp.com/learn/variants.md)
- [Auto Layout](https://prompthausapp.com/learn/auto-layout.md)
- [Hierarchy](https://prompthausapp.com/learn/hierarchy.md)

## How is this different from Googling it?

Google gives a definition. Prompthaus pairs each term with how it shows up in standups, PRs, prompts, and design reviews—then quizzes you until the word sticks. One term a day on iPhone.

- Category: Design
- HTML: https://prompthausapp.com/learn/variables
- App Store: https://apps.apple.com/us/app/prompthaus-ai-vocabulary/id6776314407