Design Token Kit @DesignTokenKit

New Design Token Kit plugin version is out🚀. Added automatic checks for token architecture: layers, references, and structure rules💪. Catch token model issues earlier, right inside the workflow. #DesignTokens #Figma

Design Token Kit plugin now supports Android export🚀. You can export Figma Variables and Styles not only to DTCG, CSS, SCSS, Tailwind v4, and SwiftUI — but also to Android-ready token output. One more step from design tokens to real product code. #DesignTokens #Figma #Android

Design Token Kit is now available on Figma Community🚀. Export Figma Variables to DTCG tokens and keep your design tokens closer to a real validation and conversion pipeline. Check it out on @figma: figma.com/community/plug… #DesignTokens #Figma

New article is out: “Utility-First CSS. New Name, Old Problem”. A look at how the same old styling problem keeps coming back with a new syntax and a new name. medium.com/p/utility-firs… #CSS #Frontend

Design Token Kit v1.7.1 is out🚀. Added SwiftUI source generation. Generate base and theme token sets as Swift code using nested enums or an additional Theme struct layer. Design tokens can now move from DTCG / HRDT into iOS UI code💪. #DesignTokens #SwiftUI #DTCG

We built the Design Token Kit website using our own tokens🚀. The full pipeline is used in practice: tokens → validation → CSS output → UI → documentation. Dogfooding the toolkit is the best way to find what really works💪. design-token-kit.github.io #DesignTokens

It is hard to review design tokens only as JSON. Design Token Kit can generate a static showcase for: - colors - spacing - radius - shadows - semantic roles - component mappings - themes Useful for docs and review. design-token-kit.github.io #DesignSystems #DesignTokens

Design tokens are useful when they reach the product. Design Token Kit converts DTCG / HRDT tokens to CSS variables: dtokens convert tokens.json --outform css Structured tokens in. CSS variables out. #CSS #DesignTokens #Frontend

Validate tokens from a file🚑: dtokens validate tokens.json Or from stdin: cat tokens.json | dtokens validate --stdin Design Token Kit works in local scripts, CI, and automation💪. #CLI #DesignTokens #OpenSource

Design Token Kit v1.5.0 is out🚀. New in this release: SCSS output support via convert --outform scss💪. It also supports multi-theme conversion, generating separate SCSS files per theme. DTCG / HRDT tokens in. SCSS out. #DesignTokens #SCSS #DTCG

Raw DTCG JSON is powerful, but not always easy to write by hand. Design Token Kit also supports HRDT YAML: a human-readable format that is converted to DTCG before validation. Readable input. Standard output. #DesignTokens #YAML #DTCG dev.to/dbychinsky/des…

Why DTCG?🧐 Because design tokens should be portable data, not random variables. DTCG gives tokens: - clear types - references - predictable structure - validation rules Design Token Kit uses DTCG as the core format💪 . #DesignTokens #DTCG

Design Token Kit v1.4.0 is out🚀. Added Tailwind CSS v4 output support. Try it with npm: dtokens convert tokens.json --outform tailwind-v4 --out ./tokens.tailwind.css DTCG / HRDT tokens in. Tailwind v4 CSS out. #DesignTokens #TailwindCSS #DTCG

@rdbuilds7 Hi! Design Token Kit helps work with design tokens in the DTCG format. Store design rules in a machine-readable way, validate them, and convert them to CSS or other UI formats. github.com/design-token-k… #DesignTokens #DTCG

Design tokens can be valid JSON and still fail in practice. A file can have: - broken references - circular aliases - type mismatches - bad layer references 💪Schema checks shape. 💪Design Token Kit checks the token system. #DesignTokens #DTCG

@tempoimmaterial @kaelig Exactly. We tried many tools but found nothing for our needs. So we chose the DTCG standard and built our own tool. It controls the LLM perfectly: the agent runs validation and fixes the code until there are zero errors. This is "fail fast" in action!

@jshguo Well said. A design system is not just generated variables. It is structure, rules, and relationships. Good tools can help shape and maintain that.

@claudeai The LLM output still fails to adhere to the required schema, so I’ve built a custom validation tool to enforce the output format.

@DesignTokens We compared a few token formats, and DTCG feels like the closest thing to a real standard right now. Not perfect, but a common structure for tools and automation is very useful.👏

More about what works today. We focused on the boring but important parts: ✅ Check: schema / validate / lint ✅ Detect: broken refs, cycles, type mismatches ✅ Lint: layers, raw values, empty groups ✅ Convert: DTCG JSON, HRDT YAML, DESIGN.md ✅ Generate: CSS, showcase, stats