20h

Para conclusão

2
Cursos

Crie interfaces escaláveis e consistentes

Design System é um conjunto de padrões, componentes e diretrizes que garante consistência, escalabilidade e eficiência no desenvolvimento de produtos digitais. Nesta trilha, você aprenderá na prática como estruturar esse ecossistema, utilizando inclusive inteligência artificial para otimizar processos de documentação e handoff.

Ao longo da jornada, vamos explorar desde a definição de estilos visuais até a entrega para desenvolvimento, passando por variáveis, componentes, microinterações e boas práticas que tornam a colaboração entre times mais fluida e organizada.

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?

  • Thiago Marques

    Principal UX Designer na Dell Technologies, com mais de 10 anos de atuação em Design Ops, UX Strategy e liderança de times de design. Foi também UX Research e Design Ops Lead na Hotmart, onde liderou a expansão da pesquisa e do design na empresa. Com mestrado em Engenharia de Software, é referência em design sistêmico, acessibilidade, métricas de experiência e formação de equipes de alta performance, com foco em pesquisas a relação entre a tríade de produto: Design, Desenvolvimento e Produto.

  • Thiago Marques

    Principal UX Designer na Dell Technologies, com mais de 10 anos de atuação em Design Ops, UX Strategy e liderança de times de design. Foi também UX Research e Design Ops Lead na Hotmart, onde liderou a expansão da pesquisa e do design na empresa. Com mestrado em Engenharia de Software, é referência em design sistêmico, acessibilidade, métricas de experiência e formação de equipes de alta performance, com foco em pesquisas a relação entre a tríade de produto: Design, Desenvolvimento e Produto.

  • Mateus Villain

    Senior Product Designer, especialista em design systems, professor e autor do livro Design System além do layout: Criação, estratégia e governança.

  • Mateus Villain

    Senior Product Designer, especialista em design systems, professor e autor do livro Design System além do layout: Criação, estratégia e governança.

Passo a passo
  1. 1 Construindo o produto

    Todo produto digital nasce para resolver problemas reais, e com um design system não é diferente. Ele funciona como uma base estratégica que ajuda equipes a criar produtos com mais consistência, agilidade e eficiência, reduzindo retrabalho e facilitando a colaboração entre design e desenvolvimento.

    Nesta etapa da trilha, você dará os primeiros passos na criação de um design system, entendendo seus conceitos, benefícios e principais processos. Além disso, aprenderá a estruturar padrões visuais, organizar estilos e construir um style guide que servirá de referência para todo o time.

    • Curso Design System: padronização e gestão de interfaces digitais

      12h
      • Compreenda a importância dos elementos estruturais de um design system
      • Explore o Figma para a criação de componentes e estilos
      • Aplique técnicas de documentação integrada para alinhar design e desenvolvimento
      • Implemente tokens e variáveis para garantir a consistência visual
      • Integre frameworks como Twitter Bootstrap e Material Design na construção de interfaces digitais
      • Melhore a governança e a manutenção contínua dos sistemas de design
  2. 2 Documentação

    Um design system vai além de componentes e padrões visuais. Para que ele seja realmente eficiente no dia a dia das equipes, é essencial contar com uma documentação clara, organizada e acessível, capaz de orientar o uso correto de cada elemento do sistema.

    Agora, nesse passo você aprenderá como documentar um design system, entendendo quais informações são indispensáveis, como estruturar boas práticas de uso e de que maneira tornar a comunicação mais eficiente entre times de design e desenvolvimento.

    • Curso Design system: Handoff e documentação com IA

      08h
      • Documente tokens de design: cores, tipografia, espaçamentos e elevações
      • Automatize a geração de especificações e handoffs a partir do Figma usando integrações com IA para reduzir tarefas manuais.
      • Estruture guidelines e exemplos Do's and Don'ts, incluindo cenários em Gherkin para facilitar testes e comunicação entre times.
      • Crie documentação interativa no Storybook com componentes exemplificados e foco em acessibilidade.
      • Integre definições do design system com o fluxo de desenvolvimento, alinhando componentes, exemplos e código em ferramentas como VS Code.
      • Valide a consistência visual e comportamental dos componentes para assegurar que a implementação reflita o design proposto.

Escola

UX & Design

Além dessa, a categoria UX & Design conta com cursos de Usabilidade e UX, Vídeo e Motion, 3D,e mais...

Conheça a Escola

Comece a estudar agora na maior escola de tecnologia do país

Conheça os Planos para Empresas