A partir de hoje, você pode gerar arquivos de design do Figma pelo Codex usando o servidor MCP do Figma. O servidor MCP foi criado para facilitar o trabalho nos dois sentidos: levar interfaces funcionais à tela de design do Figma e trazê-las de volta ao código com a mesma facilidade. Assim, você pode desenvolver suas melhores ideias, não apenas as primeiras.
O aplicativo Codex para desktop foi criado especificamente para programação agêntica. Ele oferece uma interface focada em gerenciar vários agentes em paralelo em diferentes projetos, acompanhar o progresso sem perder o contexto e integrar ferramentas externas. Essa fluidez é familiar para quem usa o Figma, onde as equipes trabalham com a mesma facilidade. A tela de design foi pensada para explorar e iterar. É um espaço onde as melhores ideias têm lugar para tomar forma. Ao conectar a tela de design do Figma ao Codex, esse espírito de exploração passa a fazer parte do fluxo de desenvolvimento, oferecendo aos usuários uma nova e poderosa maneira de criar desde protótipos até aplicativos em produção.
Começar um aplicativo a partir de um design
Um dos principais casos de uso do servidor MCP do Figma é obter contexto de arquivos do Figma e usá-lo na geração de código. O servidor MCP do Figma pode capturar informações de arquivos do Figma Design, Make e FigJam e repassá-las ao Codex como parte do processo de desenvolvimento.
Para começar, abra o arquivo do Figma que servirá de base para seu aplicativo. Escolha um quadro, clique nele com o botão direito e selecione “Copiar como” e “Copiar link para seleção”.
Essas URLs de seleção apontam diretamente para um quadro ou node na tela de design do Figma. As seleções podem conter um único elemento ou um conjunto de componentes, mas, em essência, são os dados de origem que um agente usará para gerar código. Elas podem vir de arquivos do Figma Design, Make ou FigJam. Depois de obter a URL, abra o Codex e selecione um projeto novo ou existente. A partir daí, você pode dar instruções ao Codex com um prompt como:
help me implement this Figma design in code, use my existing design system components as much as possible.Prompts como esse instruem o agente a chamar a ferramenta get_design_context do servidor MCP do Figma. Essa ferramenta ajuda a extrair informações essenciais de design dos arquivos do Figma, como layouts, estilos e informações sobre componentes, e fornece esse contexto ao Codex para gerar código.
Além de extrair informações de design, o servidor MCP do Figma oferece várias outras ferramentas úteis. Para ver a lista completa, consulte nossa documentação.
Do código à tela de design
Depois de iterar no código, você vai querer levar seu design de volta à tela de design para comparar fluxos, explorar alternativas e validar suas hipóteses. O servidor MCP do Figma facilita trazer essas telas de volta ao Figma sem precisar recriá-las manualmente a partir do navegador. Com a ferramenta generate_figma_design, você pode transformar uma interface em execução em quadros totalmente editáveis do Figma em segundos, levando interfaces reais e funcionais diretamente à tela de design para explorar mais possibilidades e colaborar.
Primeiro, você precisará renderizar a interface do seu aplicativo. Isso pode ser feito localmente ou por meio de um servidor web acessível publicamente. Em seguida, peça ao Codex que ajude a gerar um novo arquivo de design do Figma.
O Codex orientará você nas seguintes etapas:
- Decidir entre criar um novo arquivo do Figma ou usar um existente.
- Definir em qual workspace colocar o arquivo.
- Configurar o aplicativo para capturar a interface.
- Abrir seu aplicativo em uma nova sessão do navegador.
Quando o aplicativo recarregar, você verá uma nova barra de ferramentas na parte superior da página com as seguintes opções:
Tela inteira: Capture a renderização de toda a tela exibida no momento e envie-a 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 inspecionar as novas camadas de design
Depois de capturar todas as informações que deseja transferir para o Figma, você pode abrir o arquivo ou voltar ao Codex. A URL do arquivo do Figma estará esperando por você no Codex.
Lá e de volta outra vez, uma história de MCP
Agora que você criou seu aplicativo e configurou seu arquivo de design, está tudo pronto para iterar. Aqui, você pode aproveitar ao máximo o que a tela de design do Figma oferece, incluindo:
- Adicionar componentes do sistema de design
- Atualizar estilos, fontes e cores para usar variáveis
- Ajustar layouts e adicionar instruções em anotações
- Criar diferentes interações e estados vazios
- Colaborar em diversas variações e explorar possibilidades
Depois de refinar a interface, você pode seguir as mesmas etapas descritas no início deste artigo para trazer essas alterações de volta ao seu aplicativo pelo servidor MCP.
Quando o código e a tela de design estão conectados, você pode transitar com fluidez entre execução e exploração. Esse processo de ida e volta revela todo o potencial do servidor MCP do Figma com o Codex: a capacidade de começar de qualquer ponto e criar experiências relevantes e de alta qualidade em aplicativos, sem abrir mão da velocidade.
Para saber mais sobre o servidor MCP do Figma, consulte nossa documentação ou comece instalando o servidor MCP do Figma diretamente no aplicativo Codex para desktop.