Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/luismda/design-system-react

Design system completo desenvolvido com Storybook.
https://github.com/luismda/design-system-react

Last synced: 1 day ago
JSON representation

Design system completo desenvolvido com Storybook.

Awesome Lists containing this project

README

        

# Design System React




Figma logo
React logo
Storybook logo



Esse projeto foi desenvolvido no evento Ignite Lab da Rocketseat, na qual
o objetivo foi construir um Design System completo do Figma ao React.



No Figma foi construído o layout da aplicação, definindo os principais tokens de cores, tamanhos e espaçamentos, além da criação dos componentes e suas variações.



Já no React, utilizando o Tailwind CSS e o Radix UI, foi desenvolvido todos os componentes do Design System construído no Figma, bem como a documentação deles dentro do
Storybook. Além disso, com o Jest e o Testing Library em conjunto com o MSW (Mock Service Worker) foi criado um teste automatizado da aplicação dentro do Storybook.



De modo geral, a criação de um Design System se torna necessária, visto que, dessa forma, cria-se uma padronização dos layouts, não apenas cores, mas até mesmo os
espaçamentos utilizados. Ainda, integrando isso com uma documentação de componentes o processo de desenvolvimento de uma nova interface se torna mais simplificado, visto
que é possível se basear no já está pronto mantendo sempre o mesmo padrão, assim, evitando divergências nas telas da aplicação.

📌 Projeto no Figma



📌 Projeto com Storybook


#NeverStopLearning 🚀