Awesome-Design-Tokens VS style-dictionary

Compare Awesome-Design-Tokens vs style-dictionary and see what are their differences.

Awesome-Design-Tokens

A list of resources on all things to do with Design Tokens (by sturobson)
design-tokens design-system design-systems
Source Code
Suggest alternative
Edit details

style-dictionary

A build system for creating cross-platform styles. (by amzn)
Style Styleguide design-systems Cross-Platform design-tools Build system Build Tool design-tokens style-tokens
Source Code
amzn.github.io
Suggest alternative
Edit details
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
Awesome-Design-Tokens style-dictionary
1 5
1,126 3,668
- 1.9%
5.3 6.3
2 months ago 2 days ago
JavaScript
The Unlicense Apache License 2.0
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

Awesome-Design-Tokens

Posts with mentions or reviews of Awesome-Design-Tokens. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2021-09-15.

style-dictionary

Posts with mentions or reviews of style-dictionary. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2023-08-03.
  • Syncing Figma Variables and StyleDictionary with GitHub Actions
    2 projects | dev.to | 3 Aug 2023
    function getStyleDictionaryConfig(brand) { return { source: [`tokens/brands/${brand}/*.json`, 'tokens/globals/**/*.json'], platforms: { /** * Available platforms: https://amzn.github.io/style-dictionary/#/config?id=platform */ web: { transformGroup: 'web', buildPath: `build/web/${brand}/`, files: [ { destination: 'tokens.scss', format: 'scss/variables', }, ], }, }, } } /** * Build the tokens for each brand. * {@see - Example based on https://github.com/amzn/style-dictionary/tree/main/examples/advanced/multi-brand-multi-platform} */ ['microsoft', 'xbox'].map(function (brand) { ['web'].map(function (platform) { const StyleDictionary = StyleDictionaryPackage.extend( getStyleDictionaryConfig(brand), ) StyleDictionary.buildPlatform(platform) }) })
  • Specify VS Style Dictionary
    2 projects | dev.to | 25 Oct 2022
    Check out the official examples projects provided by Style Dictionary. In our case, we just used the basic example 👍
  • Any wait to generate a full JSON of tailwind?
    1 project | /r/tailwindcss | 18 May 2022
    Did you know about Style Dictionary https://github.com/amzn/style-dictionary Its a tool that creates Design Tokens for different platforms using a JSON file. Sounds similar to what you are trying to achieve.
  • This is my favorite Github issue 🦎
    1 project | /r/webdev | 17 Mar 2022
  • Introduction to Variabless
    2 projects | /r/css | 2 Aug 2021
    Cool. Can you compare this to https://github.com/amzn/style-dictionary?

What are some alternatives?

When comparing Awesome-Design-Tokens and style-dictionary you can also consider the following projects:

theo - Theo is a an abstraction for transforming and formatting Design Tokens

community-group - This is the official DTCG repository for the design tokens specification.

a11y-color-tokens - Generate accessible UI colors from your base color tokens.

storybook-design-token - Display design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks.

polaris - Shopify’s design system to help us work together to build a great experience for all of our merchants.

Awesome-Design-Tools - The best design tools and plugins for everything 👉

awesome-design-systems - 📒 A curated list of bookmarks, resources and articles about design systems focused on developers.

variabless - JS & CSS - A Match Made in Heaven 💎

cmake-js - CMake.js - a Node.js native addon build tool

What-is-Entry-Webpack-5 - What is Entry - Webpack 5

Awesome-Design-Tokens vs theo style-dictionary vs theo Awesome-Design-Tokens vs community-group style-dictionary vs a11y-color-tokens Awesome-Design-Tokens vs storybook-design-token style-dictionary vs community-group Awesome-Design-Tokens vs polaris style-dictionary vs Awesome-Design-Tools Awesome-Design-Tokens vs awesome-design-systems style-dictionary vs variabless style-dictionary vs cmake-js style-dictionary vs What-is-Entry-Webpack-5