search

design-tokens / community-group

This is the official DTCG repository for the design tokens specification.
https://tr.designtokens.org
Other
1.56k stars 63 forks source link

Share your tools that support the DTCG format #211

Open c1rrus opened 1 year ago

c1rrus commented 1 year ago

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:

andrico1234 commented 1 year ago

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 commented 1 year ago

Cobalt CLI

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

Supported spec version(s)

PavelLaptev commented 1 year ago

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 commented 10 months ago

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

universse commented 10 months ago

Thanks @kaelig for mentioning this thread 🙌.

ThemingLayer

banner

ThemingLayer empowers team to craft digital experience that cater to diverse needs of their audience.

Supported spec version(s)

tmdvs commented 5 months ago

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 commented 2 months ago

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)