Primeiras aulas do curso
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 37 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:
Todos os cursos, trilhas e certificados para evoluir.
7 dias para cancelar com reembolso
Aprenda mais rápido com IA, idiomas e imersões.
7 dias para cancelar com reembolso
TUDO DO PLUS, MAIS:
Aceleração de carreira: mentoria, vagas e prática guiada.
7 dias para cancelar com reembolso
TUDO DO PRO, MAIS:
