An awesome design system for your products and experiences!
Frontend POC application done with React.js which shows how design tokens can be generated from a Figma api and how the styles change simply by changing an id
We use the best tools to improve our workflow, allowing us to create an awesome library of components!
- ReactJs
- Type checking with PropTypes
- styled-components for styling components and application
- Compiling of modern JavaScript with Babel and bundling with Webpack
- Jest and Testing library for unit/ui testing
- Code linting using Eslint
This section should list any major frameworks that you built your project using. Leave any add-ons/plugins for the acknowledgements section. Here are a few examples.
- Learn to solve bugs using a complete React.js project project based on a town of dwarves being able to filter by different features and read information about a citizen
To get started you need to meet the prerequisites, and then follow the installation instructions.
-
Clone the repo
git clone https://github.com/ERNI-Academy/poc-frontend-react-design-tokens.git
-
Enter to directory
cd poc-frontend-react-design-tokens -
Install packages
npm install
-
Generate design tokens as variables
npm run tokens
-
Run project
npm start
The app will be oppened in your default browser with localhost:3000
-
Create two Figma projects or use https://www.figma.com/file/IGr2xoqcZX91CU7CDr4ZsI as example
-
Get the Figma ID from each project and modify it in Figma config file in the project
-
Watch the magic!
MIT © 2021 ERNI - Swiss Software Engineering
Please see our Contribution Guide to learn how to contribute.
(LICENSE) © 2022 ERNI - Swiss Software Engineering
Please see our Code of Conduct
David Carmona Maroto (https://www.linkedin.com/in/davidcarmonamaroto/)
Thanks goes to these wonderful people (emoji key):
 davidwalker2235 💻 🖋 📖 🎨 🤔 🚧 |
This project follows the all-contributors specification. Contributions of any kind welcome!