O Figma Dev Mode é a primeira coisa óbvia a recorrer quando um designer faz o handoff do trabalho. Está integrado, é oficial e fala a língua própria do Figma. Então por que você usaria outra coisa?
A resposta não é que o Dev Mode seja ruim. É que ele resolve um problema diferente. Entender qual é esse problema — e o que não é — é o artigo inteiro. Se quiser ir direto para a resposta, experimente o figmascope aqui.
O que é o Figma Dev Mode
O Dev Mode é a camada paga de handoff do Figma, disponível nos planos Professional e Organization. Quando você alterna para ele (o botão </> na barra de ferramentas superior), você obtém um painel que mostra snippets de CSS ou iOS/Android para camadas selecionadas, anotações de componentes, valores de variáveis e um marcador de status "pronto para dev" que os designers podem definir.
É projetado para o momento em que um designer diz "está pronto, vai construir." O desenvolvedor abre o Figma, clica por aí, copia snippets, olha o espaçamento. Sem etapa de export. Sem arquivo. Você está apenas lendo o design no lugar.
O Figma também disponibiliza um servidor MCP oficial para o Dev Mode (separado — coberto na comparação de MCP), mas o Dev Mode como UI é principalmente uma experiência de leitura humana. Você aponta, clica, inspeciona, copia.
Os snippets de código que o Dev Mode gera são genuinamente úteis como referências rápidas. Você pode ver a pilha de fontes, tokens de espaçamento exatos se as variáveis estiverem configuradas, border radii. Para um dev sênior que precisa apenas de uma verificação rápida de um valor específico, é rápido.
O que é o figmascope
O figmascope é uma ferramenta no lado do navegador — sem backend, sem instalação, roda em uma aba — que exporta um bundle de contexto estruturado de qualquer arquivo do Figma. Você cola um URL do Figma e um Token de Acesso Pessoal (mantido em memória, nunca enviado a um servidor), e ele produz um .zip contendo:
CONTEXT.md— uma spec legível por humanos e máquinas do designtokens.json— design tokens tipados (obtidos de variáveis do Figma quando presentes, inferidos por frequência caso contrário)screens/*.json— representação intermediária por tela: nós stack, overlay, absolute e leaf com relações espaciais intactasscreens/*.png— screenshots de referência 2×components/inventory.json— índice de componentes com IDs de instânciastrings.json— todo o conteúdo de texto, chaveado para i18n (stringRef.key)_meta.json— metadados do export, informações do arquivo, fonte de tokens
O bundle são arquivos simples. Sem runtime. Sem SDK. Coloque no repositório, commite, faça diff, entregue a qualquer agente de IA que leia arquivos.
A diferença fundamental em relação ao Dev Mode: esta não é uma experiência de leitura dentro do Figma. É um export que sai do Figma completamente.
Onde o Dev Mode vence
Inspeção ao vivo. Se você quer clicar em uma camada específica e obter seu valor computado exato agora, o Dev Mode é instantâneo. Sem etapa de export, sem zip, sem troca de contexto. A resposta está no painel.
Integração oficial. O Figma o constrói, mantém e envia melhorias junto com o resto do produto. Suporte a variáveis, fluxos de trabalho de anotação, status pronto-para-dev — esses são recursos nativos com respaldo de primeira parte. Quando o Figma adiciona uma nova capacidade de design system, o Dev Mode a recebe.
Distribuição para equipe. Cada designer e desenvolvedor em um plano org do Figma já o tem. Sem ferramentas adicionais para instalar, explicar ou manter.
Ferramentas em tempo de design. Os designers podem marcar frames como prontos, deixar anotações em nível de código e colaborar com desenvolvedores dentro do mesmo canvas. Esse vai-e-vem é genuinamente bom para ciclos de QA onde você precisa de comentários e atualizações de status.
Onde o figmascope vence
Output baseado em arquivos, agnóstico de agente. O output do Dev Mode vive dentro do Figma. O output do figmascope vive em um zip que você controla. Coloque ao lado do seu código, aponte o Claude Code ou o Cursor para ele, e o agente tem a spec completa — todas as telas, todos os tokens, todas as strings — sem precisar se conectar ao Figma de forma alguma.
Controle de versão. Um bundle do figmascope tem diff. Commite. Coloque em um PR. Veja exatamente quais tokens mudaram entre o design da semana passada e o de hoje. O Dev Mode não tem conceito de histórico de versão para a própria spec — o Figma tem histórico de versão de arquivo, mas isso é para a fonte, não um snapshot exportável da intenção de design.
Sem requisito de plano pago. O figmascope é licenciado MIT e gratuito. Ele usa a API REST pública do Figma, que requer apenas um PAT (gratuito em qualquer conta do Figma). O Dev Mode requer um plano Professional ou Organization. Para devs solo ou equipes pequenas trabalhando com um designer no plano gratuito, o figmascope é a única opção.
Output determinístico. Cada export do mesmo arquivo do Figma na mesma versão produz o mesmo bundle. Mesmo JSON, mesmos tokens, mesmas strings. Isso importa para reprodutibilidade — você pode rodá-lo em CI, fixar um bundle a um release, fazer regression tests contra ele.
Portátil e offline. Uma vez que você tem o bundle, ele funciona sem conexão ao Figma ou a qualquer servidor. O contexto do agente é autocontido. Útil quando você está num avião, atrás de um firewall ou simplesmente quer não depender do uptime do Figma durante um sprint de build.
IR preserva semântica espacial. A representação intermediária screens/*.json captura o tipo de layout (stack, overlay, absolute), identidade de componentes (componentId em nós INSTANCE) e referências de strings de texto — não apenas CSS computado. Um agente pode raciocinar sobre estrutura de layout, não apenas copiar snippets.
Lado a lado: mesmo arquivo do Figma
Considere uma tela de login com um formulário, um botão primário e alguns tokens de texto. Aqui está o que cada ferramenta fornece:
Output do Dev Mode: Propriedades CSS para a camada que você clicou (font-size: 16px; color: #1f1d1a; border-radius: 8px). Uma camada por vez. Você copia o que precisa. Se quiser os estados completos do botão, clica em cada um. Se quiser o nome do token, está lá se o designer conectou variáveis — ausente caso contrário.
Output do bundle figmascope: CONTEXT.md com a spec completa da tela de login. tokens.json com color.text.primary, spacing.4, radius.md — chaveados, tipados, obtidos de variáveis ou inferidos. screens/login.json com a árvore IR: um contêiner stack segurando uma INSTANCE de formulário referenciando componentId: "abc123", nós folha filhos com stringRef.key: "auth.login.cta". strings.json mapeando essa chave para "Sign in". screens/login.png em 2×.
Você entrega o bundle ao Cursor. Ele lê o CONTEXT.md, busca nomes de tokens do tokens.json, constrói o componente a partir da IR. Não precisa abrir o Figma de forma alguma.
Comparação
| Dimensão | Figma Dev Mode | figmascope |
|---|---|---|
| Preço | Pago (plano Professional / Org) | Gratuito, open source MIT |
| Formato de output | Painel no Figma, snippets CSS/iOS/Android | .zip: CONTEXT.md, tokens.json, screens/*.json, *.png |
| Modelo de integração | Dentro da UI do Figma, inspeção por camada | Export no navegador, depois arquivos simples em qualquer lugar |
| Compatível com agentes | Via servidor MCP (recurso separado) | Qualquer agente que lê arquivos (Claude Code, Cursor, Aider, Copilot…) |
| Amigável a controle de versão | Não (output vive no Figma) | Sim — bundle com diff, commitável |
| Output determinístico | Não (por clique, limitado à sessão) | Sim — mesma versão do arquivo → mesmo bundle |
| Offline/portátil | Não — requer conexão ao Figma | Sim — bundle funciona sem conexão |
| Anotação em tempo de design | Sim — pronto-para-dev, comentários | Não |
| IR espacial/layout | Não — CSS plano para camada selecionada | Sim — stack/overlay/absolute/leaf com identidade de componente |
| Fonte de tokens | De Figma variables quando configuradas | Figma variables → inferido por frequência → nenhum |
| Chaves de string i18n | Não | Sim — stringRef.key na IR + strings.json |
| Requer instalação de plugin | Não (integrado ao Figma) | Não (aba do navegador, API REST) |
Quando usar cada um
Use o Dev Mode quando: você precisa verificar rapidamente um valor específico, está no meio de uma revisão de design e quer consultar um token, sua equipe já está em um plano pago do Figma e vive dentro do Figma, ou quer o fluxo de trabalho de anotação do designer e os marcadores de status pronto-para-dev.
Use o figmascope quando: está entregando contexto a um agente de IA para um sprint de build, quer versionar a spec de design junto com o código, está no plano gratuito do Figma, precisa da IR completa de layout (não apenas CSS por camada), ou quer output determinístico e reproduzível que possa fixar a um release ou fazer diff em um PR.
Eles não são mutuamente exclusivos. Use o Dev Mode para inspecionar enquanto constrói, exporte bundles do figmascope para ancorar a spec de design no seu repositório. Os dois não competem — cobrem partes diferentes do fluxo de trabalho.