What is this playbook

If you’re here, chances are your Figma variables setup is getting… complicated. 

Maybe you’ve got themes. Maybe you’re juggling multiple brands or teams. Maybe things were going fine until someone asked, “Can we automate this into code?”

This guide is for you 🫵

We won’t just show you how to use Figma variables — we’ll help you structure, document, and scale them from canvas to code with Supernova. Whether you’re building a token system from scratch or cleaning up years of “we’ll fix it later,” this guide has you covered, learn how to:

✅ Set up Figma variables the right way
✅ Sync them cleanly into Supernova
✅ Turn them into production-ready code
✅ Document them like a pro
✅ Keep your system healthy as it grows

We’ll keep it practical, opinionated (in a helpful way 😏), and packed with shortcuts, pro tips, and real-world context.

👀 Who is this guide written for:

• Designers who own tokens and want a smarter variable setup
• UX engineers looking to connect design decisions to code
• Design system leads managing tokens across brands, themes, and platforms
• Anyone trying to scale Figma variables without losing their mind
  
  

✍️ You’ll need:

• A Figma account (with some variables set up — we’ll help you clean them up)
• Access to Supernova
• A little curiosity and a shared hatred of duplicating tokens manually 🙃
  

Let’s turn that variable chaos into a scalable, themeable, developer-ready token system.

Next stop → 1.1 Understanding the basics 🏃‍♀️