Devsart / react-design-system

Introductory level design system made with figma and react

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

About

Introductory level design system made with figma and react


Languages

Language:TypeScript 86.9%Language:JavaScript 10.0%Language:HTML 2.9%Language:CSS 0.3%