Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Share your tools that support the DTCG format #211

Open
c1rrus opened this issue Mar 29, 2023 · 7 comments
Open

Share your tools that support the DTCG format #211

c1rrus opened this issue Mar 29, 2023 · 7 comments

Comments

@c1rrus
Copy link
Member

c1rrus commented Mar 29, 2023

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)

![Logo or screenshot of your tool](https://link.to/the/image)

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
@andrico1234
Copy link

andrico1234 commented Jun 15, 2023

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.

image

Supported spec version(s)

@drwpow
Copy link
Contributor

drwpow commented Jul 28, 2023

Cobalt CLI

Cobalt is an open-source, MIT-licensed frontend toolchain that:

Supported spec version(s)

@PavelLaptev
Copy link
Contributor

TokensBrücke — Figma plugin

preview

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)

@kaelig
Copy link
Member

kaelig commented Dec 28, 2023

@universse 👋🏻 It'd be great to see https://github.com/universse/theminglayer showcased here!

@universse
Copy link

Thanks @kaelig for mentioning this thread 🙌.

ThemingLayer

banner

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)

@tmdvs
Copy link

tmdvs commented Jun 3, 2024

Sketch

Design Tokes in the Sketch web app

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)

Supported spec version(s)

@nclsndr
Copy link

nclsndr commented Sep 17, 2024

Design Tokens Format Module definitions

A npm package providing implementation agnostic JavaScript/TypeScript definitions from the Design Tokens Format Module specification, for library developers and tooling creators.

In short, it exposes constants (fontWeights, strokeStyleLineButt...) and TS types to avoid repeating them in every projects.

Supported spec version(s)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants