Using Figmagic (simplifying design token generation and asset extraction) with Webpack 5, React 16, Styled Components.
This repository is a demo of Figmagic. In this project you're going to see how a project running Webpack, React and Styled Components might use tokens. There are pre-compiled tokens available under /tokens
.
Figmagic Example Demo: On the left is a big Figma component assembled of a number of "Elements", Figmagic-compliant components that can be output into code. On the right is the React-composed version of those after just a few minutes of coding and closing elements correctly.
Note that this demo is not meant to fully style and do all of the things in the Figma document. I wanted to straddle a middle-of-the-road solution where I did the least work possible to get it working with React and style only a few of the most obvious and helpful elements, like setting disabled state on the button and checkbox.
Freshly pulled assets are under elements
, tokens
and graphics
. The modified elements are contained under src/elements
.
The Figmagic template design system is available at https://www.figma.com/community/file/821094451476848226. That's the file providing the tokens seen here.
yarn
or npm install
inside of the repository to install all dependenciesyarn start
or npm start
yarn figmagic:graphics
or npm run figmagic:graphics
yarn figmagic:elements
or npm run figmagic:elements
yarn figmagic:sync
or npm run figmagic:sync
yarn storybook
or npm run storybook
.env
in the root of your project (such as in this one, if you want to get started right away)yarn setup
or npm setup
figmagic
in your project directorynpm run figmagic -- --debug -f em
to set debug mode and grabbing fonts in em
unitsRead more on the Figma developer site if you need any further information.
These changes should outline all of the (mostly minor) amendments done to a set of freshly-pulled elements:
className=”Normal”
to Button so it picks the Normal style