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.
Light → Dark · one switch
Figma Variables enable instant theme switching through...
Write it in your own words in the app.
In real work
Use color variables for every fill. No hardcoded hex. The design needs to work in both Light and Dark mode.
In the illustration
The switch throws from Light to Dark; every named canister swaps to its Dark value at once and the whole sample screen inverts.
Move the twelve hard-coded colours in your design tool into variables with a light and a dark mode, and apply them to the onboarding frames.
Try it now
The fastest way to learn a word is to use it. Open this line in the agent you already work in and watch what it does. Change the tool to the one you use.
Go further
01Practice
Make it stick
One term a day, a short quiz, and sentence practice that checks your own words.
02Verify
Prove you know it
Pass the quiz and keep it in a Skills Wallet you can share with anyone who needs proof.
03Career
Find the work that uses it
See which roles lean on this vocabulary, and what they pay in year one.
Learn the next term tomorrow.
Google gives a definition. Prompthaus pairs each term with how it shows up in standups, PRs, prompts, and design reviews. Then it quizzes you until the word sticks. One term a day on iPhone.
