A partir de hoje, você pode usar o servidor MCP do Figma para gerar arquivos de design do Figma diretamente no Codex. O servidor facilita o trabalho nos dois sentidos. Você pode levar uma interface em funcionamento para a área de criação do Figma e trazer o design de volta para o código com a mesma facilidade. Assim, pode explorar ideias além da primeira e desenvolver as melhores.
O aplicativo do Codex para desktop foi desenvolvido especificamente para programação agêntica. Sua interface permite gerenciar vários agentes em paralelo em diferentes projetos, acompanhar o progresso sem perder o contexto e integrar ferramentas externas. Quem trabalha em equipe no Figma já conhece essa fluidez. A área de criação foi pensada para explorar possibilidades e refinar o design a cada versão. Ali, as melhores ideias têm espaço para ganhar forma. Ao conectar a área de criação do Figma ao Codex, você ganha a mesma liberdade para explorar durante o desenvolvimento e uma nova maneira de criar desde protótipos até aplicativos para produção.
Como começar um aplicativo a partir de um design
Um dos principais usos do servidor MCP do Figma é obter contexto dos arquivos do Figma e usá-lo para gerar código. O servidor MCP do Figma pode extrair informações de arquivos do Figma Design, do Make e do FigJam e enviá-las ao Codex durante o desenvolvimento.
Para começar, abra o arquivo do Figma que servirá de base para o aplicativo. Clique com o botão direito do mouse no quadro desejado, selecione “Copiar como” e depois “Copiar link para a seleção”.
Cada URL de seleção aponta diretamente para um quadro ou node na área de criação do Figma. A seleção pode conter um único elemento ou um conjunto de componentes. É a partir desses dados que o agente vai gerar o código. Você pode fazer a seleção em arquivos do Figma Design, do Make ou do FigJam. Com a URL em mãos, abra o Codex e escolha um projeto novo ou existente. Em seguida, dê uma instrução ao Codex com um prompt como este:
Ajude-me a implementar este design do Figma em código. Reutilize os componentes do meu sistema de design sempre que possível.Com um prompt como esse, o agente chama a ferramenta get_design_context do servidor MCP do Figma. Ela extrai dos arquivos do Figma informações essenciais sobre o design, como layouts, estilos e detalhes dos componentes, e fornece esse contexto ao Codex para gerar o código.
O servidor MCP do Figma também oferece ferramentas para outras tarefas além da extração de informações de design. Para ver a lista completa, consulte a documentação.
Do código à área de criação
Depois de refinar a interface no código, você pode levar o design de volta à área de criação para comparar fluxos, explorar alternativas e validar hipóteses. Com o servidor MCP do Figma, é fácil trazer essas telas de volta ao Figma sem precisar recriar manualmente o que aparece no navegador. Com a ferramenta generate_figma_design, você transforma uma interface em funcionamento em quadros totalmente editáveis do Figma em segundos. Assim, a equipe pode explorar em mais detalhes a interface real e trabalhar nela em conjunto, diretamente na área de criação.
Primeiro, renderize a interface do aplicativo. Você pode fazer isso localmente ou em um servidor web acessível ao público. Em seguida, peça ao Codex que ajude a gerar um novo arquivo de design do Figma.
O Codex vai orientar você nas etapas a seguir:
- Escolha entre criar um arquivo do Figma ou usar um arquivo existente.
- Escolha em qual espaço de trabalho o arquivo ficará.
- Configure o aplicativo para capturar a interface.
- Abra o aplicativo em uma nova sessão do navegador.
Quando o aplicativo recarregar, uma nova barra de ferramentas aparecerá na parte superior da página com as seguintes opções:
Tela inteira: Capture tudo o que aparece na tela e envie a captura para o arquivo do Figma.
Selecionar elemento: Escolha um componente ou elemento específico da página para capturar.
Abrir arquivo: Abra o arquivo do Figma para examinar as novas camadas do design.
Depois de capturar tudo o que deseja transferir para o Figma, você pode abrir o arquivo ou voltar ao Codex. A URL do arquivo do Figma já estará disponível no Codex.
Uma viagem de ida e volta com o MCP
Agora que você criou o aplicativo e preparou o arquivo de design, pode começar a refinar a interface. Na área de criação do Figma, você pode:
- Adicionar componentes do sistema de design
- Ajustar estilos, fontes e cores para que usem variáveis
- Ajustar layouts e acrescentar instruções em anotações
- Criar diferentes interações e estados vazios
- Trabalhar em equipe para criar variações e explorar alternativas
Quando terminar de refinar a interface, siga as mesmas etapas descritas no início deste artigo para incorporar as alterações ao aplicativo por meio do servidor MCP.
Com o código conectado à área de criação, você pode alternar com facilidade entre implementar ideias e explorar possibilidades. Esse percurso de ida e volta permite aproveitar todo o potencial do servidor MCP do Figma com o Codex. Você pode começar de onde quiser e criar aplicativos que ofereçam uma experiência relevante e de alta qualidade, sem perder velocidade no desenvolvimento.
Para saber mais sobre o servidor MCP do Figma, consulte a documentação. Para começar a usá-lo, instale o servidor MCP do Figma diretamente no aplicativo do Codex para desktop.