Design System Tokenizer
Build a Figma plugin that extracts design tokens and exports them to Tailwind config, CSS custom properties, and SCSS variables.
$2,500 + Badge
May 1, 2026
Overview
The gap between design and code is one of the biggest sources of friction in product development. Designers define colors, spacing, typography, and shadows in Figma — but developers have to manually translate those into code. This challenge is about bridging that gap automatically. Acme Corp maintains a design system used by 12 product teams. Every time our design team updates tokens in Figma, developers spend days updating code. We want a Figma plugin that exports tokens directly to the formats our engineers use. **What we're looking for:** - Figma plugin that reads styles, variables, and components - Export to multiple formats: Tailwind config, CSS custom properties, SCSS variables - Preview panel showing generated code before export - Diff view showing what changed since last export - Support for theming (light/dark mode token sets)
Evaluation Criteria
Technical Implementation
/40Quality of code, architecture, use of AI/ML techniques
Problem Understanding
/20How well the submission addresses the stated problem
Innovation
/20Creative use of AI, novel approach, differentiated solution
Documentation & Clarity
/10README quality, pitch clarity, demo explanation
Completeness
/10End-to-end functionality, working demo
Sign up to unlock the full challenge
Get the problem statement, starter files, and submission instructions.