Skip to content

Projeto desenvolvido durante o Ignite Lab 03 - Do Figma ao React: Construção de design system com React | 2022

Notifications You must be signed in to change notification settings

guissimatheus/design-system-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

5171948 · Nov 20, 2022

History

31 Commits
Oct 14, 2022
Nov 19, 2022
Oct 28, 2022
Oct 28, 2022
Oct 14, 2022
Nov 20, 2022
Oct 12, 2022
Oct 18, 2022
Oct 28, 2022
Oct 12, 2022
Oct 14, 2022
Oct 12, 2022
Oct 12, 2022
Oct 12, 2022

Repository files navigation

Design System - React | Ignite Lab

Este projeto foi desenvolvido durante o Ignite Lab 03 - Do Figma ao React: Construção de design system com React da Rocketseat, ministrado pelo Diego Schell Fernandes. As aulas ocorreram do dia 10 a 12 de outubro de 2022.

Essa edição do Ignite Lab teve como objetivo demonstrar a utilidade do Figma para o desenvolvimento de designs de telas, sendo muito útil para a padronização de estilos e componentes e suas variantes, responsáveis por determinar os design tokens.

Além disso, foi ensinado como criar um Storybook a partir dos tokens para que o time de desenvolvedores possa visualizar todos os componentes e suas possíveis variações.

Extensões Recomendadas

  • PostCSS Language Support
  • Tailwind CSS IntelliSense

Instruções

Para executar o projeto e o storybook é necessário executar primeiramente o comando npm install.

Rodar o Projeto

  • npm run dev

Rodar o Storybook

  • npm run storybook

É possível executar o comando npm run test-storybook para testar os stories do Storybook, e até mesmo o comando npm run test-storybook -- --watch para rodar os testes no modo watch.

Página Colors no Figma

Para gerar uma nova página Colors atualizada no Figma, é preciso clicar com o botão direito dentro do frame, clicar em Plugins e procurar pelo plugin Color Stylesguide.

Links Úteis

  • transform - Transforma um SVG em um componente do React
  • Design no Figma dos componentes e tela

To-Do List

  • Arrumar README
  • Consertar CSS de SignIn no Preview do Storybook
  • Adicionar página com minhas informações de contato
  • Verificar o uso do Mock de API no GitHub
  • Melhorar mensagem de login