Segundo dia -> Coding Dojo: Finalizar design tokens e inicia UIKit(componentes)

Verificar quais plataforma fazer o build

  • SASS
  • Json
  • Javascript

Verificar tokens faltando para criar componentes

  • Button
  • Header
  • Card

Criar estrutura do projeto

Criar componentes

  • Button
  • Header
  • Card

Extra: consumir componentes no projeto em Nextjs

Exemplos

https://storybook.js.org/tutorials/design-systems-for-developers/react/en/introduction/

------------------------------------

Primeiro dia -> Coding Dojo: Design Tokens

Estruturar projeto

  • Criar um monorepo
  • Separar pacotes
    • next
    • design tokens
    • ui-components

Pacote design tokens

Verificar quais plataforma fazer o build

  • SASS
  • Flutter
  • Json
  • Javascript

Montar tokens

  • colors
  • spacing
    • margin
    • padding
  • font size

Consumindo tokens

  • Realizar o build no Design tokens
    • colocar o build para ser realizado quando instalar as dependências
  • importar tokens na folha de estilo

Exemplos

Flutter

https://github.com/amzn/style-dictionary/tree/master/examples/advanced/flutter

Multi brand and Multi platform

https://github.com/amzn/style-dictionary/tree/master/examples/advanced/multi-brand-multi-platform

Auto Rebuild Watcher

https://github.com/amzn/style-dictionary/tree/master/examples/advanced/auto-rebuild-watcher