Evento realizado do dia 10 a 14 de outubro onde construimos um Design System do Figma até o código.
#NeverStopLearning
A criação do Design System foi realizada ao passar de 03 aulas.
- Aula 01 | Estrutura visual do Design System
- Aula 02 | Do Figma ao React, criando aplicação
- Aula 03 | Testes automatizados
Aula 01, "Estrutura visual do DS"
Inicialmente, o start do projeto foi a criação Design System pelo Figma, onde foram introduzidos conceitos do UI Design como o padrão de tamanhos na escala 4px e sites como https://www.radix-ui.com/colors .
e https://tailwindcss.com/docs/customizing-colors para criar paletas de cores interessantes.
Após apresentação de conceitos criamos uma página inicial de login utilizando do autolayout e components figma.
Dessa forma, utilizamos do Plugin Figma Color Styleguide para obter nossa paleta de cores em uma página:
Aula 02, "Do Figma ao React, criando aplicação"
Durante essa aula criamos o projeto React com TailwindCss, ferramentas do RadixUI, phosphor icons, exportamos os Tokens do Figma para o projeto, iniciamos o StoryBook e criamos os componentes.
Aula 03 | Testes automatizados
Nessa aula realizamos o deploy do StoryBook no Github Pages.
Você pode acessar minha página StoryBook em: https://celinaaaaaa.github.io/IgniteLab-Rocketseat/ !
- Icones: https://phosphoricons.com/
- Logo React: https://worldvectorlogo.com/
- Checkbox: https://www.radix-ui.com/docs/primitives/components/checkbox