Logo do curso
Curso

Figma Code to canvas:

Protótipo de alta fidelidade com IA

Quero estudar na alura

6h

Para conclusão

13

Pessoas nesse curso

Certificado

De participação

Introdução_

O que você aprenderá_

  • Converta layouts do Figma em componentes React reutilizáveis a partir de prompts e geração de código.
  • Crie prompts estruturados em Markdown e JSON para ajustar respostas do Codex e outras IAs.
  • Automatize a criação de variantes, tokens e regras de nomenclatura por meio de workflows e automações.
  • Avalie e melhore a acessibilidade e a performance de interfaces com o apoio da IA.
  • Integre a IA ao fluxo de desenvolvimento (editores e ferramentas em nuvem) para gerar e refinar implementações.
  • Documente e organize componentes e tokens seguindo boas práticas de design system.

Público alvo_

Profissionais de produto digital — designers, desenvolvedores, PMs e POs — que desejam unir design e engenharia com IA para transformar layouts em código, automatizar workflows e melhorar acessibilidade e performance.

Mateus Villain

Mateus Villain

github

linkedin

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.

Curso atualizado em 28/04/2026

Ementa

  1. Organizando o ambiente

    • Apresentação
    • Conhecendo o Codex
    • Baixe e instale o Codex
    • Configurando a IA
    • Integração com código
    • Analisando o briefing do projeto
    • Projeto, ferramenta e briefing
    • O que aprendemos?
    • Nível de esforço no Codex
    • Faça como eu fiz: Configurando o Codex para usar com Figma
  2. Iniciando o projeto

    • Prompts estruturados
    • Ferramentas de mardown
    • Implementando o projeto do código ao Figma
    • Verificando problemas com IA
    • Placeholders em prompts
    • Falando com a IA do jeito certo
    • Faça como eu fiz: Implementando projeto do código ao Figma
    • O que aprendemos?
  3. Corrigindo problemas com IA

    • Criando os primeiros tokens
    • Melhorando componentes no Figma
    • Rules e Workflows
    • Fornecendo regras para a IA
    • Sombras no design
    • Faça como eu fiz: Tokens e componentes
    • O que aprendemos?
  4. Rules e workflows

    • Criando as primeiras rules
    • Rules
    • Criando workflows
    • Conectando tarefas com workflows
    • Variáveis em CSS com IA
    • Checklists de validação
    • Faça como eu fiz: Escrevendo as rules e workflows do projeto
    • O que aprendemos?
  5. Componentizando e atualizando o projeto

    • Componentes em React com IA
    • Melhorias no produto
    • Criando com IA a partir do Figma MCP
    • Complexidade e organização
    • Faça como eu fiz: Criando os componentes em React
    • O que aprendemos?
    • Conclusão

Descubra se esse curso é pra você! Leia as primeiras aulas

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

Conheça os planos
Escola

UX & Design

O universo de UX & Design é gigante. Crie diferentes layouts para plataformas digitais. Edite vídeos e desenvolva animações. Construa e expanda o seu conhecimento nas principais tendências do mercado. Conheça as principais ferramentas gráficas, como o Adobe Photoshop, Adobe Illustrator, Figma, Final Cut e outras!

Conheça a escola

Faça parte da nossa comunidade no discord!

Troque conhecimentos com a comunidade da Alura

Bônus PM3 Summit 2026

Alavanque sua carreira com até 40% off + Ingresso Live Access para o PM3 Summit 2026.

Conheça os Planos para Empresas