Figma Design System


Full Usage Details https://figmadesignsystem.app/

Figma Design System Widget is an attempt to integrate design system concerns (ADA, color/typography sets) with Figma structures (styles, components) as well as explore how much of a design system build tool can be created entirely within Figma leveraging existing services (Font Awesome, Google Fonts, Github repos/NPM packaging).

This widget can build a significantly sized design system token set by dragging the widget on stage, choosing a name and building out the various parts of your system. From there, you can tokenize, transform (css, SCSS, Javascript, and Typescript), and deploy your design system all the way into a Github hosted NPM Package. It isn’t designed to be used for large production designs systems quite yet, but is perfect for small to medium sized projects or for just exploring your first design system.