Formações Front-end Next.js e Tailwind: construindo um design system

Formação Next.js e Tailwind: construindo um design system

Desenvolva um Design System com Next js, Tailwind CSS e Storybook

* Esta formação faz parte dos nossos cursos de Front-end

Quero Estudar na Alura

39h

Para conclusão

Cursos

Vídeo extra

Artigos

Formação Next.js e Tailwind: construindo um design system

Nesta formação aprenderemos o que é e como construir um Design System usando as tecnologias mais populares de desenvolvimento web. Você mergulhará no mundo do Design Atômico e aprenderá construindo um projeto prático com Next.js e Typescript.

Ao concluir esta formação, você terá as habilidades necessárias para criar e manter Design Systems eficazes, economizando tempo e esforço em projetos futuros.

Clique aqui e acesse o Tech Guide para acompanhar sua evolução e matricule-se na formação para planejar à sua trilha de estudos com acesso direto pelo Dashboard.

Em caso de dúvidas, acesse o Fórum ou interaja com a comunidade no Discord.

Vamos mergulhar!?

Por que estudar esta formação?

Guia de aprendizado
Conteúdos pensados para facilitar seu estudo
Do básico ao avançado
Formação completa para o mercado
Você dentro do mercado
Do zero ao sonhado emprego em sua área de interesse

Comece essa formação agora mesmo e capacite-se para seu próximo projeto!

Conheça os planos

Com quem você vai aprender?

Neilton Seguins
Sou graduado como Bacharel em Ciência e Tecnologia e em Engenharia Mecânica. Atuo como Instrutor de Desenvolvedor de Software na Alura e possuo experiência com desenvolvimento usando JavaScript/TypeScript, React js, Next js e Node.js. Amo compartilhar conhecimento, pois acredito que a educação é transformadora e quero mudar a vida de pessoas através da educação assim como consegui mudar de vida. Também amo ouvir e tocar música, ler livros e mangás e assistir séries.
Neilton Seguins
Sou graduado como Bacharel em Ciência e Tecnologia e em Engenharia Mecânica. Atuo como Instrutor de Desenvolvedor de Software na Alura e possuo experiência com desenvolvimento usando JavaScript/TypeScript, React js, Next js e Node.js. Amo compartilhar conhecimento, pois acredito que a educação é transformadora e quero mudar a vida de pessoas através da educação assim como consegui mudar de vida. Também amo ouvir e tocar música, ler livros e mangás e assistir séries.
Vinicius Cardozo
Sou um engenheiro de software e líder técnico com mais de 10 anos de experiência, especialista em Javascript e tecnologias correlatas, com habilidades para liderar equipes multifuncionais e criar ambientes colaborativos. Além disso, sou apaixonado por ensino e compartilhamento de conhecimento. Atuo como instrutor, criador de conteúdo e palestrante em eventos de tecnologia. Em resumo, sou um programador apaixonado pelo que faz e por desenvolver as pessoas que se conectam comigo!
Vinicius Cardozo
Sou um engenheiro de software e líder técnico com mais de 10 anos de experiência, especialista em Javascript e tecnologias correlatas, com habilidades para liderar equipes multifuncionais e criar ambientes colaborativos. Além disso, sou apaixonado por ensino e compartilhamento de conhecimento. Atuo como instrutor, criador de conteúdo e palestrante em eventos de tecnologia. Em resumo, sou um programador apaixonado pelo que faz e por desenvolver as pessoas que se conectam comigo!
Mateus Villain
Product designer, instrutor de UX na Alura, pro player de Figma e especialista em Harry Potter.
Mateus Villain
Product designer, instrutor de UX na Alura, pro player de Figma e especialista em Harry Potter.

Passo a passo

1 Criando as bases do Design System
Neste primeiro passo você explorará em detalhes a configuração inicial da aplicação, criação de design tokens no Tailwind CSS, permitindo uma padronização consistente dos estilos em toda a aplicação e conhecerá a metodologia do Atomic Design. Além disso, você aprenderá a utilizar o Headless UI e o classnames para deixar seus componentes acessíveis, lidar com estilos dinâmicos e ter uma base de componentes reutilizáveis.
- Curso React: criando um Design System com TailwindCSS
  12h
- Artigo Design Systems: Entenda o que é e confira Exemplos | Alura
- Alura+ Atomic design
- Curso React: evolua o seu Design System com TailwindCSS
  10h
- Site Design Systems - Hipsters #170 - Hipsters Ponto TechHipsters Ponto Tech
2 Documentação e versionamento
Neste segundo passo, você irá aprimorar sua documentação no Storybook. Conhecerá plugins, organização de pastas e estórias, testes com o Chromatic e publicará essa documentação na Vercel. Além disso, você irá aprender como publicar seu design system como uma biblioteca de componentes, conhecerá breaking changes, versionamento semântico e conhecerá mais sobre licença e documentação técnica.
- Curso React: eleve o nível da sua documentação no Storybook
  08h
- Artigo Versionamento Semântico (SemVer): uma breve introdução | Alura
- Curso React: versione e publique o seu Design System
  06h
- Artigo Simplificando o controle de versão com Conventional Commits | Alura
- Artigo Changelog: o guia do desenvolvedor para documentar e compreender alterações de software | Alura