What You Will Learn

• Solving the "Manual Palette Problem" with automation.
• How to build a mapping system (Primitives -> Semantics) using the Figma API.
• The technical architecture of a design-to-production pipeline.

Design systems are powerful, but they can be tedious to maintain. The theory is great, but manually creating hundreds of color shades and variables is a chore.

If you are following a manual process, you likely face these pain points:

1. Tedious Palette Generation: Spending hours tweaking lightness curves.
2. Mapping Hell: Manually creating hundreds of Figma variables.
3. Sync Issues: Typing hex codes into VS Code and hoping you didn't typo one.

This is where automation saves the day.

We built a custom Figma plugin that automates the entire color creation and token generation process. This post walks you through what it does, how it works, and why we built it.

How to Find the Plugin

Use the Variables To TypeScript plugin to follow along with this guide.

Step 1: Search for the Plugin
Press Cmd + / in Figma and search for "Variables To TypeScript".

Step 2: Launch

What Does the Plugin Do?

The plugin is a complete DesignOps Platform inside Figma. It doesn't just export code; it manages the entire lifecycle of your design system tokens.

1. Algorithmic Theming (The “Themes” Tab)

Instead of manually picking 50 shades of blue, you define a single base color, and the plugin generates a mathematically perfect scale using HSL adjustments. You can preview these themes instantly in the "Themes" tab.

This ensures your colors are not just "vibes"—they are systems.

2. Visual Token Management (The “Tokens” Tab)

Managing tokens in the native Figma UI can be clunky. Our plugin provides a dedicated "Tokens" view where you can see:

• Grid View: A high-level overview of how your semantic tokens (like accent1/border) look across Light and Dark modes.
• List View: A detailed list for precise auditing.

You can edit values directly, and the plugin maintains a robust History Stack (Undo/Redo) so you never lose work.

Grid View for Context:
Click any cell to open the Search Dropdown, allowing you to quickly reference other tokens or select from your mode definitions.

List View for Precision:
Hover over any row to reveal quick actions like Fill and Stroke, letting you apply tokens to selected layers instantly.

3. Direct GitHub Integration (The “GitHub” Tab)

This is the game-changer. Most plugins give you a JSON file that you have to manually copy-paste into your repo.

Variables To TS connects directly to your GitHub repository. It acts like a developer on your team:

1. Connects to your repo via a Personal Access Token.
2. Creates a Branch for the updates.
3. Pushes the latest token code.
4. Opens a Pull Request.

This means a designer can update a color in Figma and push a PR without ever touching the command line.

4. Code Generation (The “Export” Tab)

If you prefer the manual route, you can always inspect the generated TypeScript or CSS code directly in the plugin. It generates strongly typed const objects that are ready to be imported into your app.

Why Build a Custom Plugin?

You might ask: "Why not just use Tokens Studio?"

Tokens Studio is fantastic, but it's a general-purpose tool. By building a custom plugin for our specific stack, we can enforce opinions (like our specific HSL logic) and streamline the workflow (like one-click PRs) in a way that generic tools cannot match.

It’s about owning your tools so they work for you, not against you.

Takeaway

This plugin bridges the final mile. It turns a static Figma file into a living, breathing part of your codebase.

• Designers stay in Figma (but commit to Git).
• Developers stay in VS Code (and just merge PRs).
• The System stays in sync automatically.

What’s Next?

In the final part of this series, we look at the future. We'll explore how your new Design System acts as an "API" for Artificial Intelligence, allowing you to use tools like Cursor and Claude to generate perfect, on-brand code automatically.

Read Part 7: Design Systems for AI ->

Explore More:

• Live Demo App
• Part 1: Why You Need a Design System