Boas-vindas ao curso de Figma MCP da Alura. Caso ainda não nos conheçamos, permita-nos apresentar. Meu nome é Matheus Vilain, sou Product Designer Especialista em Design System e autor do livro "Design System Além do Layout" pela Casa do Código.
Audiodescrição: Matheus é um homem de pele branca, com cabelo, sobrancelhas, barba e olhos castanho-escuros. Seu cabelo é bem curto, enquanto a barba é longa, cobrindo praticamente metade do pescoço. Ele usa óculos de cor amadeirada e uma camisa bege. À sua frente, há um microfone sustentado por um braço articulado. Atrás dele, há uma estante com alguns livros, bonecos de Harry Potter, uma grade com crachás pendurados e uma planta costela-de-adão ao seu lado.
Neste curso, vamos aprender algo mais avançado, unindo nosso conhecimento prévio com inteligência artificial. Utilizaremos ferramentas como o ChatGPT e o Gemini para aprimorar nossas habilidades. O objetivo é pegar as interfaces que criamos no Figma, onde prototipamos, e transferi-las do ambiente de design para o ambiente de desenvolvimento.
Nas primeiras aulas, vamos criar uma interface e um protótipo extremamente simples, que poderemos reproduzir posteriormente no código, utilizando o próprio Figma MCP. Utilizaremos um editor de código, como o VS Code, que se comunicará com agentes de IA para ler automaticamente nosso arquivo no Figma. Dessa forma, ele conseguirá recriar todas as nossas variáveis, componentes e formar toda a interface do nosso projeto, sem a necessidade de criar elementos novos no código. O processo será de mapeamento e análise do que criamos no Figma, recriando tudo isso no código, utilizando 100% de IA.
Ao longo do curso, não faremos nada manualmente. Embora na prática, na vida real, seja possível realizar tarefas manualmente, neste curso trabalharemos exclusivamente com LLM e agentes de IA para utilizar o MCP e criar nosso produto. O interessante é que, após a criação, conectaremos com o GitHub para subir nosso projeto online, permitindo que outras pessoas possam ver, atualizar e escalar o projeto.
Esperamos que aproveitem este curso. Nos vemos no próximo vídeo, onde começaremos a discutir o conteúdo. Até lá!
Temos muitos tópicos para discutir ao longo deste curso. É um curso interessante, no qual vamos desenvolver muita prática. Inclusive, a maior parte deste curso é prática. Se este for o seu primeiro contato com o MCP, com essa tecnologia, trabalhando com IA, outras ferramentas, código ou FIGMA, é importante entender o que significa o MCP, para que ele serve e garantir que realmente compreendemos. Vamos explicar de forma clara e objetiva, tanto que este vídeo nem é tão longo. A ideia é que possamos entender e explicar para outras pessoas de maneira simples, sem entrar em detalhes técnicos. Não vamos nos aprofundar no que é o MCP, como ele é desenvolvido ou sua história. O foco é entender para que ele serve e como é utilizado.
Vamos falar sobre o MCP, que significa Model Context Protocol (Protocolo de Contexto de Modelo). O MCP não é uma IA, e essa é a primeira consideração importante. Ele trabalha com modelos de inteligência artificial. O objetivo do MCP é atuar como uma ponte entre um agente, um LLM (modelo de linguagem de inteligência artificial), e uma ferramenta que estrutura dados. Vamos usar o exemplo do Figma, que é a ferramenta que utilizaremos neste curso. O Figma possui um MCP, que será utilizado aqui. O MCP do Figma não age sozinho; ele precisa se conectar a alguma interface. Neste caso, utilizaremos uma IDE, um editor de código, para conectar o Figma MCP.
Haverá uma LLM no processo, um modelo de linguagem de inteligência artificial, que receberá nosso pedido, analisará o que precisamos e retornará a informação. Na prática, como isso funciona? Em uma IDE, usando o Figma MCP, conversando com uma LLM e acessando o arquivo, vamos buscar algo dentro do nosso Figma. Por exemplo, se quisermos criar uma página completa e desenvolvê-la com HTML e CSS, que são linguagens de marcação e estilo.
Para evitar realizar tudo manualmente, como abrir o editor, começar do zero, abrir o Figma, comparar estilos e cores, podemos utilizar um chat dentro de uma ferramenta de edição de código. O objetivo é buscar no Figma o que desejamos trabalhar. No Figma, selecionamos uma página que construímos e solicitamos que a LLM (Modelo de Linguagem Grande) desenvolva tudo para nós. A LLM analisará o Figma e tentará ser o mais fiel possível ao transferir isso para o código, atendendo aos requisitos que especificarmos.
Podemos fazer um prompt simples, como "crie isso para mim e coloque o frame no Figma, a página, o protótipo que queremos". Também podemos ser mais detalhistas, solicitando: "crie este protótipo para mim, lembrando de toda a estrutura de HTML e CSS, evite duplicar estilos, crie um design responsivo, e implemente acessibilidade tanto na parte visual quanto estrutural". Dessa forma, conseguimos ser extremamente detalhistas, transferindo tudo do protótipo para o código, agregando valor real e permitindo a interação dos usuários, além de realizar melhorias na IDE sem precisar retornar ao Figma.
Em resumo, teremos nosso editor de código, a IDE, onde conversaremos com a inteligência artificial, a LLM que selecionarmos. Todos os editores, como veremos no curso, possuem várias LLMs que podemos escolher. Podemos trabalhar com diferentes IAs, como o Gemini 3, Gemini 3 Pro, da OpenAI, do ChatGPT, e muitos utilizam o Cloud da Anthropic. Existem outras opções no mercado além dessas três grandes conhecidas.
Portanto, conversamos com a LLM dentro da IDE, fazemos um pedido, e ela acessa nosso MCP para buscar no Figma o que solicitamos, retornando de forma totalmente estruturada. Isso é muito mais prático do que integrar uma API do Figma ao nosso projeto e realizar toda a configuração. O MCP organiza e simplifica esse processo.
Nos vemos no próximo vídeo, onde exploraremos mais as ferramentas com as quais trabalharemos. Até lá!
Para seguirmos com o curso, é importante que tenhamos contas criadas em algumas plataformas e que outras estejam baixadas em nosso computador. Não será necessário baixar uma quantidade excessiva de programas, pois a ideia é que tenhamos apenas dois itens baixados no computador, enquanto o restante funcionará totalmente online.
O primeiro item necessário é uma conta no Figma. Não é necessário baixar o Figma no computador, pois ele pode ser utilizado diretamente no navegador online. No entanto, para aqueles que preferem, é possível instalar o aplicativo no computador, pois ele funciona da mesma forma.
O segundo item que precisamos instalar no computador é um editor de código. Existem vários editores de código disponíveis no mercado, desde opções pagas até gratuitas, de diversas empresas. Vamos recomendar três editores, dos quais provavelmente já ouvimos falar.
O primeiro é o Visual Studio Code, o mais famoso de todos, criado e mantido pela Microsoft. Todos os editores de código mencionados estão disponíveis para Windows, Mac e Linux, sendo este último muito utilizado por programadores. Esses editores são leves e não apresentam problemas de desempenho.
Outro editor muito famoso, especialmente no último ano, é o Cursor. Ele revolucionou a ideia de um editor de código que trabalha com inteligência artificial, oferecendo recursos específicos. O Cursor é uma duplicação do Visual Studio Code, pois utiliza o código aberto deste último como base, adicionando algumas funcionalidades extras.
O terceiro editor recomendado é o Google Antigravity, mais recente que os outros. Assim como o Cursor, ele também é uma duplicação do Visual Studio Code e possui uma aparência muito semelhante. O Antigravity oferece vantagens, como recursos integrados ao GemiNi, permitindo conexão com a conta Google para projetos mais avançados que utilizam inteligência artificial.
Durante o curso, utilizaremos dois desses editores: começaremos com o Visual Studio Code e, posteriormente, utilizaremos o Antigravity. Não há diferença prática entre o uso de cada um deles, pois todos entregam o mesmo resultado e possuem conexão prática com o Figma MCP. Portanto, qualquer um dos três editores pode ser utilizado ao longo do curso.
Em uma determinada parte do curso, vamos mudar para o Google Antigravity, pois ele possui recursos interessantes que queremos mostrar. Isso será útil para automatizar nosso fluxo de conversação com a inteligência artificial. Temos três opções, e você pode escolher qual delas deseja baixar.
Outra ferramenta que precisamos baixar é o Git. O Git é essencial para conectar nosso projeto local ao repositório online. Em vez de subir o projeto manualmente, como se fosse para um drive, utilizaremos o Git para transferi-lo para uma plataforma de repositório de código, como o GitHub. É importante esclarecer que muitas pessoas se confundem entre Git e GitHub. O Git é uma ferramenta que permite atualizações e envio do projeto local para uma plataforma online. Existem várias plataformas, como GitHub e GitLab, mas utilizaremos o GitHub.
O GitHub funciona como uma rede social, com atualizações e interações. Podemos criar projetos no computador e transferi-los para o GitHub, sem a necessidade de usar um drive. Por exemplo, meu site pessoal está disponível no GitHub, com todo o código e estrutura livre para consulta e uso.
Se você não tem experiência com Git ou GitHub, não se preocupe. O download do Git é simples, basta escolher o sistema operacional e seguir o processo de instalação padrão. Vamos aprender a trabalhar com essas ferramentas ao longo do curso. A Alura oferece diversos cursos e formações sobre front-end, back-end, JavaScript, PHP e Node.js, que aprofundam o uso do Git. Se desejar entender melhor essa ferramenta, há muitas opções disponíveis.
As ferramentas mencionadas são: Figma, uma IDE ou editor de código (como VS Code, Cursor ou Google Antigravity), Git e GitHub. Instale e crie uma conta para utilizá-las. Nos vemos na próxima aula para colocar em prática o que aprendemos. Até mais!
O curso Figma: Construindo um produto com IA e MCP possui 135 minutos de vídeos, em um total de 36 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
Impulsione a sua carreira com os melhores cursos e faça parte da maior comunidade tech.
2 anos de Alura
Matricule-se no plano PLUS 24 e garanta:
Jornada de estudos progressiva que te guia desde os fundamentos até a atuação prática. Você acompanha sua evolução, entende os próximos passos e se aprofunda nos conteúdos com quem é referência no mercado.
Programação, Data Science, Front-end, DevOps, Mobile, Inovação & Gestão, UX & Design, Inteligência Artificial
Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.
No Discord, você participa de eventos exclusivos, pode tirar dúvidas em estudos colaborativos e ainda conta com mentorias em grupo com especialistas de diversas áreas.
Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.
Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.
Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.
Acelere o seu aprendizado com a IA da Alura e prepare-se para o mercado internacional.
2 anos de Alura
Todos os benefícios do PLUS 24 e mais vantagens exclusivas:
Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.
Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.
Para estudantes ultra comprometidos atingirem seu objetivo mais rápido.
2 anos de Alura
Todos os benefícios do PRO 24 e mais vantagens exclusivas:
Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.
Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.
Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.
Conecte-se ao mercado com mentoria individual personalizada, vagas exclusivas e networking estratégico que impulsionam sua carreira tech para o próximo nível.
