ABOUT THIS EPISODE After design systems comes design API. Learn in this episode of our podcast how a design system can feed into a design API so that designers and developers don’t have to talk so muc

A proof-of-concept of an API for design decisions

Colors, spacing, font weights, and font sizes are all design tokens

pBy utilizing a collection of repeatable components and a set of standards guiding the use of those components, companies are changing the pace of creation and innovation within their teams./p

Transform CSS with the power of JavaScript. Auto-prefixing, future CSS syntaxes, modules, linting and more are possible with hundreds of PostCSS plugins.

Terms, Types, and Taxonomy to Describe Visual Style

Find out how Design Tokens can help you reduce CSS inconsistencies and close the gap between designers and developers.

CSS Variables are *really* cool, and they're incredibly powerful when it comes to React! This tutorial shows how we can use them with React to create dynamic themes. We'll see how to get the most out of CSS-in-JS tools like styled-components, and how our mental frame around media queries has been wrong all along.

Yesterday, I gave a ⚡ lightning talk on design tokens at the @ReactAmsterdam meetup. I’ve been to a few React Amsterdam meetups and there’s always a really good vibe so I was really happy I got to do a lightning talk on a subject I care about. There were about 200 people in the room […]

An addon for extracting Style Dictionary-friendly design tokens from a story.

During this live demo @th4is_ds and @jorenbroekema will explore how to bring the Design Tokens from Style-Dictionary into Figma via the Figma Tokens plugin. The magic is done with the use of the Open Source token-transformer 👉 https://www.npmjs.com/package/@divriots/style-dictionary-to-figma We're using Backlight to write the tokens 👉 https://backlight.dev/starterkits Play with Style Dictionary in your browser 👉 https://www.style-dictionary-play.dev/ Figma Tokens plugin 👉 https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens Learn how to use the Figma Tokens plugin in the workshop 👉 https://intodesignsystems.gumroad.com/l/cNVQD The future of Design Systems Conference 👉 https://intodesignsystems.gumroad.com/l/wzkix

Empower your front-end with a collaborative design system platform: code, design, stories, tests, documentation, versioning, npm release and more. Start now!

#FigmaTokens #DesignTokens #FigmaWant to learn more about Design Tokens in Figma?💥Learn how to create a token-based Design System in Figma with Jan Six from...

Figmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents. - mikaelvesavuori/figma...

A guide on how to build design systems that scale easily and sync with GitHub, with the help of a plugin called Figma Tokens.

A CLI toolkit for aiding design tokens adoption. Contribute to michaelmang/tempera development by creating an account on GitHub.

Learn how to effectively name your design tokens in a systematic and future proof way. Understand all key concepts used today.

Code: Thanos v.Fractal by CassieTheBunny using @frctl/fractal, @frctl/mandelbrot, @frctl/react, mono-fractal, react, react-dom, react-scripts, style-dictionary

From growing teams to enterprises, Specify's pricing plans work for every type of organizations.

A web application to create and share markdown based cheat sheets. Built with create-react-app.

Theo is a an abstraction for transforming and formatting Design Tokens - salesforce-ux/theo: Theo is a an abstraction for transforming and formatting Design Tokens

10 Tips to Architect & Implement Design Decisions for Everyone

Learn how to fully automate the process of exporting design tokens from Figma with Style Dictionary. You'll also learn about serverless functions and GitHub Actions along the way.

How to extract a design system from component libraries

Learn to package and import your design system into other apps

Now that you’ve built something useful, share it with the world

This article will review how to publish React components as an npm package with Babel 7 (the latest version at the time of writing) and…

An organized and frequently updated collection of Design System examples, resources, tools, articles and videos.

Design systems are essential for businesses looking to craft consistent, usable designs. Learn how to build your own, plus our favorite examples and more!

Go beyond Framer’s UI to create custom design solutions with code.