Design System Pipelines demo
What is it?
A working demonstration for end-to-end build piplelines in Design Systems using Primer Primitives, Primer CSS and Primer React as the basis.
To demonstrate this working pipeline, a local webserver will render both react components and native HTML buttons to use the exact same design language as defined in the upstream CSS and design tokens.
Watch the demo here
https://www.loom.com/share/c16b2e77317b49a083713bde49d4c517
What does it do?
- Builds design tokens programmatically in multiple formats (associative maps, arrays, etc) supporting various compiler languages (
sass
,json
,typescript
etc) - Builds CSS stylesheets programmatically using design token output
- Builds React components that dynamically adapt to changes in design tokens and css stylesheets (above)
- Support for Figma API, to enable fully end-to-end, real-time build pipelines
- Supports using static, offline design token
.json
files as an alternative to Figma as a source of truth.
Try it out
Design tokens (JSON) as source of truth
$ yarn // install monorepo dependencies
$ yarn build // build tokens, css and react
$ yarn start // open docs
Figma as source of truth
-
Create a .env file with the following variables:
FIGMA_TOKEN=<enter your figma token here> FIGMA_FILE_ID=<enter your figma file here> USE_FIGMA_API=true
-
Run the following commands
$ yarn // install monorepo dependencies $ yarn build // build tokens, css and react $ yarn start // open docs
Tech stack
- Yarn workspaces, Turborepo, Lerna
- Design tokens: Figma API / JSON, StyleDictionary
- CSS: SASS, PostCSS
- React: Webpack, CSS-Modules, TypeScript
- Docs: Next.js
- Backend: TypeScript