Integrando GitHub Copilot ao Figma usando MCP

Crie páginas e sistemas web utilizando o visual definido no Figma através da integração de Copilot com MCP

Boas-vindas

• Para quem é este curso: Desenvolvedores de nível intermediário que já estejam familiarizados com o GitHub Copilot, com conceitos básicos de GitHub e com desenvolvimento web. Você deverá ter uma conta Free ou superior no Figma para acompanhar o hands‑on.

• O que você vai aprender: Criar páginas e sistemas web utilizando o visual definido no Figma através da integração de Copilot com MCP

• O que você vai construir: Uma página web básica seguindo o modelo desta página do Figma: Figma Community File

• Pré‑requisitos:

  • Conta ativa no GitHub com acesso ao Copilot (qualquer plano)
  • Conta no Figma (Free ou superior)
  • Node.js instalado
  • Visual Studio Code com a extensão do Copilot
  • Acesso a este repositório

• Duração: Aproximadamente 1 hora e 30 minutos, divididos em 5 etapas guiadas.tHub Copilot ao Figma usando MCP

Boas-vindas

• Para quem é este exercício: Desenvolvedores web interessados em integrar design do Figma com desenvolvimento usando GitHub Copilot

• O que você vai aprender: Como usar o Model Context Protocol (MCP) para conectar o GitHub Copilot ao Figma e automatizar a criação de código a partir de designs

• O que você vai construir: Uma aplicação web completa baseada em designs do Figma, utilizando o GitHub Copilot para gerar código automaticamente

• Pré-requisitos:

  • Conhecimento básico em HTML, CSS e JavaScript
  • Familiaridade com GitHub e GitHub Copilot
  • Conta no Figma com acesso a designs

• Duração: Este exercício leva menos de 2 horas para ser concluído.

Neste curso você vai configurar um ambiente de desenvolvimento com suporte a MCP, ativar o Figma MCP server, integrar o GitHub Copilot ao seu design e gerar código de UI a partir de um arquivo Figma. Ao final, terá um componente ou página funcional e poderá aplicar o mesmo fluxo em outros projetos.

Você irá seguir estas 5 etapas guiadas:

1. Configurar o ambiente de desenvolvimento com suporte ao Model Context Protocol (MCP)
2. Ativar e configurar o Figma MCP server
3. Integrar o GitHub Copilot ao seu design do Figma
4. Gerar código de UI automaticamente a partir do arquivo Figma
5. Criar um componente ou página funcional completa

Como começar este exercício

Basta copiar o exercício para sua conta, depois dê à sua Octocat favorita (Mona) cerca de 20 segundos para preparar a primeira lição e então atualize a página.

Está com problemas? 🤷

Ao copiar o exercício, recomendamos as seguintes configurações:

• Para proprietário, escolha sua conta pessoal ou uma organização para hospedar o repositório.

• Recomendamos criar um repositório público, pois repositórios privados usam minutos do Actions.

Se o exercício não estiver pronto em 20 segundos, verifique a aba Actions.

• Veja se há um job em execução. Às vezes, pode demorar um pouco mais.

• Se a página mostrar um job com falha, por favor, envie uma issue. Parabéns, você encontrou um bug! 🐛