Guia: integrar o Figma em fluxos de trabalho com IA

Propósito

Permitir que os LLMs:

• Analisem e modifiquem designs no Figma.
• Gerem código a partir deles.

A quem se destina

Equipas de UX/UI que pretendem automatizar auditorias de acessibilidade, realizar testes de utilizador sintéticos e iterar designs com base em feedback automatizado.

Equipas de Frontend que precisam de acelerar a tradução de designs para código, especialmente quando trabalham com sistemas de componentes e frameworks modernos.

Equipas de Backend/DevOps que desenvolvem workflows automatizados e agentes de IA que requerem a integração da análise de designs no Figma e a geração de código a partir deles.

Equipas multidisciplinares que procuram reduzir o atrito na passagem de design para desenvolvimento, mantendo cada equipa nas suas ferramentas habituais.

Ferramentas

API do Figma

Requisitos

• Conta do Figma
• Gerar um token de acesso ou usar OAuth 2

Descrição

É a forma mais simples para um LLM analisar um design.

A API do Figma permite construir endpoints para solicitar ficheiros, imagens, versões de ficheiros, utilizadores, comentários, projetos de equipa e ficheiros de projeto. Devolve um JSON que podemos passar ao LLM para que o interprete.

Ao contrário dos MCPs, não precisamos de ter o Figma Desktop aberto para que um agente analise um design. Isto torna-o no método ideal para integrar o Figma em fluxos de trabalho de agentes de IA.

Instalação

Por se tratar de uma API, e não de um MCP, não existe uma instalação como tal. Podemos ver como funciona com um teste simples com o Cursor ou o VS Code:

1. Crie um token.
2. Diga ao seu agente para analisar um design no Figma executando um pedido curl a um endpoint.

Por exemplo, para o seguinte URL de um nó de um design:

https://www.figma.com/design/XG1EYHLnC7NdwGuYc7LmUf/MVC---WEB?node-id=6037-2235&t=AHpchSRAIyGCdoci-0

diga-lhe para usar:

curl -H 'X-FIGMA-TOKEN: {o seu token de acesso pessoal}'
'https://api.figma.com/v1/files/XG1EYHLnC7NdwGuYc7LmUf/nodes?ids=6037-2235'

Ao receber o prompt, o agente executará o pedido curl e obterá um JSON com os parâmetros do design. Depois, irá analisá-lo e gerar um texto com o conteúdo da sua análise.

Dev Mode MCP Server

Requisitos

• Dev ou Full seat nos planos Professional, Organization ou Enterprise.
• Um editor de código ou aplicação que suporte MCP Servers (VS Code, Cursor, Windsurf, Claude Code).
• Figma Desktop App

Descrição

Trata-se do servidor MCP oficial do Figma.

Habilita várias ferramentas de análise (5 à data de publicação deste post) que os agentes podem usar para gerar código a partir de um design.

As ferramentas que permitem "ver" um design são get_code e get_image. Ao contrário da API do Figma, get_code não devolve um JSON com os dados do design, mas sim uma tradução do design para React que o Dev Mode gera dinamicamente.

Isto facilita ao LLM a geração de código, mesmo que não seja React, já que a distância entre React e outro framework/linguagem é menor do que entre a informação do JSON e o nosso framework/linguagem.

get_image cria uma captura de ecrã do design selecionado e serve de apoio ao agente na hora de gerar código.

Instalação

1. Ativação no Figma Desktop App
2. Instalação no nosso editor de código (Cursor, VS Code, Windsurf, Claude Code, Outros)

Claude Talk to Figma MCP

Requisitos

• Claude Desktop
• Figma Desktop
• Bun instalado

Descrição

Servidor MCP de código aberto.

Habilita um conjunto amplo de ferramentas (43 à data de publicação deste post) que permite aos agentes analisar e também modificar designs no Figma.

As ferramentas que permitem "ver" um design devolvem um JSON com os seus dados. Isto permite aos LLMs analisá-lo através de "thinking aloud", avaliação crítica, teste de utilizador, auditoria de acessibilidade, auditoria de SEO, etc.

Com as ferramentas de modificação, o LLM pode depois aplicar as alterações propostas na análise.

Instalação

Siga as instruções da documentação oficial.

Partilhe a sua experiência

Se já está a integrar o Figma no seu fluxo de trabalho com IA, seja com estas ou outras ferramentas, adoraria conhecer a sua experiência:

• Como correu a instalação.
• Experiências e descobertas.
• Casos de uso reais.
• Resultados obtidos.

O ecossistema de IA + design/desenvolvimento está em constante evolução e as melhores práticas emergem da experiência coletiva de quem as implementa em projetos reais ✊

Se ainda não o fez, atreva-se com alguma das ferramentas deste post. Se algo emperrar, pode escrever-me no meu perfil do LinkedIn 😉