A comprehensive guide to syncing design tokens between Figma Token Studio and your application. 📚 Reading Time: ~15 minutes (but you save hours in the future with it)

🚀 TL;DR - Quick Setup

Want to get started in 5 minutes? Here's the express route:

1. Install Token Studio plugin in Figma
2. Connect to GitHub (one-time setup in Token Studio)
3. Copy the starter files to your project. (code blocks in the file)
4. Run npm install and npm run tokens:watch
5. Design in Figma → Changes appear in code automatically! ✨

📋 Prerequisites

Before we dive in, make sure you have:

• Node.js 16+ installed (check with node --version)
• npm or yarn package manager
• Git installed and basic knowledge
• A GitHub account (for Token Studio sync)
• Figma account with Token Studio plugin access

🧱 What Are Design Tokens?

Design tokens are the smallest pieces of a design system—think colours, font sizes, spacing, border radii, shadows, etc.—stored in a standardised format that both designers and developers can use. Instead of hardcoding values like #00b140 for a colour, you use a semantic token like **color-primary-500**.

Design tokens act as the single source of truth for all your design decisions, ensuring perfect consistency between what designers create in Figma and what developers build in code.