figma-extract
Ajuda seu agente a pegar o design e os arquivos de um arquivo Figma. Ele organiza tudo no seu projeto para facilitar o uso.
O que ela faz
Esta ferramenta pega um arquivo do Figma e salva suas informações principais no seu computador. Ela extrai a estrutura do design, os estilos (como cores e fontes) e as imagens em um formato organizado.
Quando usar
- ✓Quando você quer ter uma cópia local do seu design do Figma.
- ✓Ao preparar um projeto para usar os estilos e imagens do Figma em outro lugar.
- ✓Para criar um registro oficial do seu design em um ponto específico no tempo.
Exemplo do que pedir para a IA
“Salve o meu design do Figma em um arquivo organizado.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
Você fornece o link do arquivo do Figma e uma permissão especial (token OAuth). A ferramenta então baixa tudo e organiza em pastas no seu computador.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add nexu-io/open-design --skill figma-extractOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/atoms/figma-extract/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Extração do Figma
Especificação §10 / §21.3.1: o cenário de migração do Figma começa com um URL de arquivo do Figma + um token OAuth. Este átomo transforma esse par no registro autoritativo em disco em que as fases subsequentes (token-map, generate, critique) operam.
Entradas
| Fonte | Obrigatório | Observações |
|---|---|---|
URL do arquivo Figma ou node-id |
sim | Fornecer através da superfície GenUI figma-oauth ou od plugin apply --input fileUrl=… |
| Token OAuth do Figma | sim | Roteado através de oauth-prompt com oauth.route='connector' e connectorId='figma'; o daemon nunca armazena o token no SQLite |
Saída
O átomo escreve um extrato determinístico em formato JSON sob o diretório de trabalho do projeto (cwd):
project-cwd/
├── figma/
│ ├── tree.json # canonical node tree (id / type / parent / children / box / fills / text)
│ ├── tokens.json # color + typography + spacing tokens lifted off the file
│ ├── assets/ # rasterised exports of every leaf node that the file marks for export
│ │ └── <node-id>.<png|svg|webp>
│ └── meta.json # { fileUrl, version, lastModified, exportedAt, atomDigest }
figma/tree.json é o pivô canônico para cada átomo downstream. figma/tokens.json é a entrada para token-map. assets/ é a entrada para a fase de mídia de generate.
Convergência
O átomo é concluído quando figma/tree.json existe e não está vazio. O avaliador until lê figma.tree.nodes >= 1; se o arquivo Figma estiver vazio ou o token OAuth expirado, o átomo emite um evento de erro claro e a execução é abortada (o usuário corrige a autenticação ou escolhe um arquivo diferente).
Antipadrões que o fragmento de prompt proíbe
- Sintetizar uma árvore a partir de capturas de tela quando o caminho OAuth falhou — sempre solicite novamente ao usuário; nunca invente IDs de nó.
- Ignorar tipos de nó não suportados silenciosamente; registre-os em
meta.json.unsupportedNodes[]para que o humano possa auditar as lacunas. - Tratar instâncias de componentes como duplicatas; registre os links
componentRefpara quetoken-mappossa desduplicar no limite correto.
Status
Implementado pelo daemon runner em apps/daemon/src/plugins/atoms/figma-extract.ts. Ele busca e percorre a árvore REST do Figma, registra nós não suportados, eleva tokens e rasteriza ativos suportados.
Perguntas frequentes
O que são 'design tokens'?
São os estilos básicos do seu design, como as cores exatas usadas, os tamanhos de fonte e os espaçamentos entre os elementos.
O que acontece se o arquivo do Figma estiver vazio ou a permissão expirar?
A ferramenta vai te avisar com um erro claro para que você possa corrigir a permissão ou escolher outro arquivo.
A ferramenta tenta adivinhar o design se não conseguir acessar o Figma?
Não, ela nunca inventa informações. Se algo der errado, ela pede para você corrigir ou escolher outro arquivo.
Detalhes
Descrição original do autor
Pull a Figma file's node tree, design tokens, and embedded assets into the project cwd as a structured snapshot.
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #525
- Licença
- Apache-2.0
- Atualizada em
- 16/10/2026
Comentários
- …
Mais skills deste repositório
sample-plugin
Faz seu agente criar um arquivo de metadados para testes. Ele ajuda a garantir que o código funcione corretamente em diferentes situações.
nexu-io/open-design
aster-atelier
Ajuda seu agente a criar um site artístico com visual clássico. Ele usa imagens elegantes, céus azuis e fontes serifadas para um visual cinematográfico.
nexu-io/open-design
audio-jingle
Faz seu agente gerar áudio como jingles e efeitos sonoros. Ele pode criar músicas e vozes, salvando o resultado em um arquivo de áudio.
nexu-io/open-design
blog-post
Ajuda seu agente a escrever artigos longos ou posts de blog. Ele inclui espaços para imagens, citações e informações do autor.
nexu-io/open-design
Skills parecidas
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
affaan-m/ECC
liquid-glass-design
Ajuda seu agente a criar interfaces de usuário com efeito 'Liquid Glass' para iOS. Permite adicionar efeitos visuais dinâmicos e interativos em SwiftUI e UIKit.
affaan-m/ECC