/react-design-system

Introductory level design system made with figma and react

Primary LanguageTypeScript

Design System with React

This is a short project for educational purposes. Here I built a design system with Figma and React, it helps a lot to create patterns and to build an agile culture to the frontend development team. I utilized the Figma styleguide to build the React components and added it into a Storybook, where you can see the components as it exists on React with a simple design view. I also created a CI/CD pipeline with Github Actions to deploy the Storybook as a Github Page.

In this project, I used the following technologies:

  • Figma
  • React
  • Vite
  • Storybook
  • Radix UI
  • TailwindCSS
  • Github Actions
  • Github Pages

Design System Components

Figma Layout

Storybook

To run the project on your own machine you will have to clone this repo, use npm install to get all dependencies and npm run dev to run it locally.