Logo do curso
Curso

Figma:

Construindo um produto com IA e MCP

Quero estudar na alura

6h

Para conclusão

28

Pessoas nesse curso

Certificado

De participação

Introdução_

O que você aprenderá_

  • Converta protótipos do Figma em páginas HTML/CSS aplicando o MCP e agentes de IA.
  • Estruture interfaces responsivas usando auto layout, grids e variáveis de estilo.
  • Exporte e integre ícones SVG, bibliotecas de ícones e fontes para aprimorar o visual do projeto.
  • Defina e aplique tokens e variáveis globais de CSS para garantir consistência visual.
  • Aproveite recursos do VS Code e assistentes de IA para automatizar a criação de componentes e estilos.
  • Integre o projeto ao GitHub para versionamento e publicação colaborativa.

Público alvo_

Profissionais e entusiastas de design e desenvolvimento que desejam automatizar a transição do protótipo para o código. Indicado para product designers, front-end developers e times que usam Figma e querem acelerar entregas integrando MCP, agentes de IA, VS Code e GitHub.

Mateus Villain

Mateus Villain

github

linkedin

Product designer, instrutor de UX na Alura, pro player de Figma e especialista em Harry Potter.

Curso atualizado em 10/02/2026

Ementa

  1. MCP e integração

    • Apresentação
    • Definição e funcionamento do MCP
    • O que é MCP?
    • Ferramentas essenciais
    • Edição de código no VS Code
    • Faça como eu fiz: Conheça o MCP seu uso em IDEs
    • O que aprendemos?
  2. Construindo a base no Figma

    • Estrutura do projeto
    • Propriedades de cor
    • Escalas e bordas
    • Fluxo real com Figma MCP
    • Organização do arquivo
    • Faça como eu fiz: Construa o projeto no Figma
    • O que aprendemos?
  3. Estrutura do projeto

    • IDEs e IAs
    • Editores x Bloco de notas
    • Criando a estrutura
    • Conectando o MCP
    • Por que usar o GitHub?
    • Faça como eu fiz: VS Code, GitHub e Figma
    • O que aprendemos?
  4. Desenvolvendo com IA

    • Importando as variáveis e estilos
    • Desenvolvendo os componentes
    • MCP e leitura de arquivo
    • Criando a interface do projeto
    • Formato SVG
    • Faça como eu fiz: Importe variáveis e componentes
    • O que aprendemos?
  5. Agentes de IA

    • Workflow para criação de componente
    • O que são workflows?
    • Workflows no Antigravity
    • Publicando no GitHub
    • Faça como eu fiz: Crie workflows para agilizar processos
    • 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

Aprenda UI Design com esse e outros cursos, comece agora!

Conheça os Planos para Empresas