👋 Get weekly insights, tools, and templates to help you build and scale design systems. More: The Design System Guide / Podcast / My Linkedin
The highest-performing teams don't manually transfer design decisions into code. They automate it.
But in most organizations this is the reality:
Designers create designs in Figma
They share Figma files with developers or export JSON manually
Developers manually implement these values in code
When designs change, the whole process repeats
This approach costs teams hundreds of hours annually and introduces inconsistencies that undermine brand quality.
Why automation matters?
🕣 Time savings: Changes deploy in minutes instead of days
📉 Error reduction: Eliminates human copying errors completely
☺️ Mental bandwidth: Frees designers and developers to focus on higher-value work
📊 Scalability: Systems grow without a proportional effort increase
I've found the ROI on implementing token automation typically exceeds 300% within 2 years for mid-sized teams.
What are the options?
➡️ Custom automation script
Tailored scripts for extracting and transforming tokens based on team needs.
➡️ Tokens Studio plugin
Manage tokens with the Figma plugin with code sync capabilities.
➡️ Figma API
Programmatic access for custom integrations with design files.
Let's check how you can automate design tokens from design → code.
Transform After Build
1: Figma
— — — in between Custom plugin or script
2: JSON Tokens converted to standardized JSON format for machine readability and technology independence.
3: Git Version control enables change tracking, collaboration, and rollback capabilities.
4: Validation Ensures tokens conform to expected schema and naming conventions.
5: Lint Catches stupid mistakes before they bite you.
6: Test Do the tokens actually work? Validates tokens meet requirements across different use cases.
7: Build Transform the raw into the ready. Package it up.
8: Distribution Makes tokens available via NPM, CDN, and API.
9: Transformer One source, many outputs. (CSS, iOS, Android, documentation).
Pros:
Single source of truth for all design tokens
Complete end-to-end visibility of the process
Multiple distribution channels for different needs
Feedback loop enables continuous improvement
Cons:
Less efficient - requires a complete build before transformation can occur
Potentially slower pipeline as transformation happens later in the process
Overkill for smaller projects
May lead to redundant processes
Transform-Within-Build Phase
Same pipeline with emphasis on the transformer's role in processing tokens before the build step. This approach is more common.
Figma → Tokens Studio (TS) → JSON → Git
Pros:
Easier to test since it focuses on a specific segment of the pipeline
Enables real-time local testing → faster feedback cycles
More efficient development
Cons:
More configuration to implement correctly
Learning curve for designers for Tokens Studio
Figma API
Pros:
Runs automatically without requiring manual interaction inside Figma.
Ensures tokens stay in sync with design updates.
Can fetch the latest tokens at predefined intervals (e.g., every night)
No need for plugins
API-based workflows are scalable
Can run in server environments, Docker, or cloud functions
Cons:
Requires coding & setup (more resources)
More detailed view from Figma to Tailwind
Remember that this example shows one possible path from Figma to Tailwind CSS. It may require modifications based on your team's specific tools and workflows.
Phase 1: Figma
Phase 2: Variables Import Variables to Tokens Studio
Phase 3: Tokens Studio Plugin that structures Figma variables into standardized token format.
Phase 4: JSON
Phase 5: GitHub
Phase 6: CI/CD Every change triggers automatic processing and delivery.
Phase 7: Style Dictionary The universal translator. Takes raw JSON tokens and spits out whatever format each platform needs.
Phase 8: CSS Variables Tokens become CSS custom properties. Instant theming power for your web projects.
Phase 9: Tailwind Tokens plug into your development workflow, ready to use.
As mentioned in the start, if you don’t want to use Tokens Studio, you can manually export JSON (for example, Design Tokens Manager) and then add it to GitHub. 🫠
I hope you have an overview of automated workflow now. 🙌 Aaaandd, what’s your process? 😅
💎 Community Gems
Documenting Web Components With Storybook
James Ives
🔗 Link
Double click: When coding becomes conversation
Figma
🔗 Link
The End of Programming as We Know It
Tim O’Reilly
🔗 Link
❤️ People to follow
This week, I would like to introduce you to Valentin Grudnik. He is currently leading design system at Better. He was just guest in my podcast. Our conversation blew my mind with how small their team is and how much they are capable to do (even in healthcare industry with many restrictions). 🙌
Better shares a lot of their insights on blog as well. For example about design tokens, building a design system for digital solutions in healthcare and many more.
🔗 Follow Valentin on Linkedin
Hello Romina, thank you very much for the detailed post, very valuable information there.
I was curious about the Validation + Lint + Test steps, within the CI/CD Pipeline stage; how those should work? Is it about automation tools? Is there any human intervention? What does it imply that it "Validates tokens meet requirements across different use cases"?
It would be awesome if you can expand a little bit on those items.
Thank you again, and look forward for your next posts!