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. Learn more →
Top 21 design-token Open-Source Projects
-
polaris
Shopify’s design system to help us work together to build a great experience for all of our merchants.
-
-
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.
-
-
-
-
design-tokens
🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format.
-
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.
-
awesome-design-systems
📒 A curated list of bookmarks, resources and articles about design systems focused on developers. (by klaufel)
-
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.
-
-
parsers
Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets — automatically.
-
-
-
-
-
-
figma-tokens-converter-cli
A CLI with utilities to simplify the process of Figma Design Tokens to Frontend.
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
We are delighted to announce that the interface of Ryviu account has been updated according to Shopify Polaris. Aligned with Shopify's top-tier standards for safety, performance, and functionality, these changes aim to simplify the process of importing and managing product reviews for your store.
Over the past few years, I've worked with React apps utilising various CSS-in-JS libraries, starting with styled-components, transitioning through emotion, Theme UI, and finally Stitches. I've also integrated MUI, Mantine, and Chakra in numerous client projects.
Project mention: Syncing Figma Variables and StyleDictionary with GitHub Actions | dev.to | 2023-08-03function 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) }) })
There are some great well established tools out there that do this, such as Theo and Style Dictionary but for this I turned to the sage advice of Andy Bell via buildexcellentwebsit.es and used Tailwind to run through the token JSON files and generate the CSS variables I can use in my styling.
The initiative is open for contributions from individuals and is not owned by a specific company or organization. It is sponsored by various entities and supported by the community, including organizations like Open UI, W3C, and the Design Tokens Community Group.
Project mention: Show HN: Specify 2.0 – Your design token engine | news.ycombinator.com | 2024-01-25
Project mention: Design System cookbooks, An open-source design system database | /r/Design | 2023-12-11Database: https://github.com/Design-System-Cookbooks/design-systems Website: https://www.designsystemcookbooks.com/
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
design-tokens related posts
-
Design Systems: From Atomic Design to a Global Solution
-
Show HN: Specify 2.0 – Your design token engine
-
Mirrorful – free and open-source React component library
-
Six new variables features launching today
-
The Future of CSS: Easy Light-Dark Mode Color Switching with Light-Dark()
-
Eleventy Style Guide Generator with WebC Component Support
-
My variables wishlist
-
A note from our sponsor - SurveyJS
surveyjs.io | 4 May 2024
Index
What are some of the best open-source design-token projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | polaris | 5,641 |
| 2 | theme-ui | 5,216 |
| 3 | style-dictionary | 3,650 |
| 4 | theo | 1,936 |
| 5 | community-group | 1,455 |
| 6 | Awesome-Design-Tokens | 1,124 |
| 7 | design-tokens | 905 |
| 8 | awesome-design-systems | 671 |
| 9 | storybook-design-token | 635 |
| 10 | huetone | 287 |
| 11 | a11y-color-tokens | 158 |
| 12 | ui | 148 |
| 13 | parsers | 111 |
| 14 | coolcss | 107 |
| 15 | design-tokens | 79 |
| 16 | design-tokens | 49 |
| 17 | tokens | 12 |
| 18 | design-systems | 12 |
| 19 | fd-design-system | 11 |
| 20 | figma-tokens-converter-cli | 8 |
| 21 | design-tokens | 0 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com