Ignite Lab #3 - Do Figma ao React

Evento disponibilizado pela RocketSeat

Tema: Design System com Figma, React e StoryBook

Projeto desenvolvido durante a semana de 10/10/2022 a 13/11/2022, onde pude ter contato com várias ferramentas para a construção de um Design System como, Figma, React, StoryBook e TailwindCSS.

A aplicação teve as seguintes etapas de construção:

• Projeto no Figma
• Design System - Criação dos componentes
• Documentação no Storybook
• Deploy automatizado com GitHub Actions
• Criação do Front-End em Vite
• Implementação de testes com Jest no Storybook.

Tecnologias e ferramentas utilizadas

• React.JS (Vite)
• TypeScript
• Radix UI
• Tailwind CSS
• Storybook
• Addon A11y
• Github Actions
• Jest
• MSW

Durante as aulas, pude conhecer como montar uma estrutura visual de um design system na prática com o Figma e como porta-lo para o código disponibilizando assim os dados para testes dos componentes via StoryBook, deploy automatizado com GitHub Actions e simulação do Front-End em Vite.

---

Projeto no Figma:

https://www.figma.com/file/YBOweIec7URKNExxWffzBz/Ignite-Lab-DS?node-id=0%3A1

Pagina de Login:

Instalação e uso

Clone o projeto e acesse a pasta

$ git clone https://github.com/filipeleonelbatista/design-sistem-bootcamp

Siga os passos abaixo:

# Instalar as Dependências
$ npm i

# Iniciar o Servidor em Modo de Desenvolvimento
$ npm run dev

# Iniciar o StoryBook
$ npm run storybook

Ferramentas Utilizadas

---

Vamos nos conectar 😉

   

Desenvolvido 💜 por Filipe Batista