community-group
community-group copied to clipboard
design-tokens
Share your tools that support the DTCG format
Do you maintain a tool (or anything else - e.g. a software library) that supports reading and/or writing DTCG files? Then please add a link and some details as a comment here in the following format:
### [Name of your tool](https://website.of/your/tool)
Brief description of your tool (1-2 paragraphs). E.g. What does it do? Who's it for?
#### Supported spec version(s)
<!-- Add or delete as appropriate -->
* [Live draft](https://tr.designtokens.org/format/)
* [2nd editor's draft](https://second-editors-draft.tr.designtokens.org/format/)
* [1st editor's draft](https://first-editors-draft.tr.designtokens.org/format/)
🙏 Please only add things here that have already shipped support for the DTCG file format. If you are planning to support the format but haven't released it yet, that's awesome. However, please wait until you actually ship support before promoting your tool here.
♻️ If details change (e.g. you add more features to your tool), please edit your existing comment rather than adding a new one.
⚠️ The DTCG maintainers reserve the right to remove spammy or inappropriate comments.
Motivation
This list will hopefully be useful for:
- Letting tool makers promote their good work and get some well-deserved kudos 😄
- Providing the community with a list of tools they can use to play with DTCG files right now
- Giving the DTCG format editors visibility of how folks are using the format
Design Token Validator
Check that your design tokens adhere to the DTCG spec with this free open source Design Tokens Validator
To get started, paste the JSON for your design tokens, or upload a file directly. The site will then validate your tokens and present a list of helpful messages, which link to relevant parts of the spec, to help fix any problems.
Supported spec version(s)
Cobalt CLI
Cobalt is an open-source, MIT-licensed frontend toolchain that:
- can validate any DTCG tokens schema and give detailed errors
- has existing integrations for JavaScript, TypeScript, CSS/Sass, JSON and Tailwind CSS
- Used in production for several sites (Snyk and Tidepool)
- has a plugin system that can support any build target
- can bundle multiple tokens schemas together
- supports the modes extension for light & dark mode
Supported spec version(s)
TokensBrücke — Figma plugin
TokensBrücke is a Figma plugin that simplifies the process of converting Figma variables into design-tokens JSON. The plugin generates JSON files compatible with the latest DTCG specification.
Supported spec version(s)
@universse 👋🏻 It'd be great to see https://github.com/universse/theminglayer showcased here!
Thanks @kaelig for mentioning this thread 🙌.
ThemingLayer
ThemingLayer empowers team to craft digital experience that cater to diverse needs of their audience.
- Build themeable design system with built-in support for the three-tier token architecture
- Beyond dark mode — define conditional token values that adapt to user preference, system settings and platform capabilities
- Create component tokens with multiple visual and state variants
- Extensible via plugins, ThemingLayer integrates with any tech stack and workflow
Supported spec version(s)
Sketch
Sketch is Mac app for designers to create, team up, prototype, as well as a web app for everyone else to browse, give feedback, inspect, and handoff — in any browser. A complete design platform, made by a sustainable indie company since 2010.
You can export your Color Variables, Layer Styles, and Text Styles as Design Tokens from the web app. You can download your design tokens or create an always-up-to-date public link for them. (Read the docs)
