Pular para o conteúdo
Skillpedia
Interfaces (UI/UX)101 mil · #525

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

https://github.com/nexu-io/open-design/blob/main/plugins/_official/atoms/figma-extract/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/nexu-io/open-design/blob/main/plugins/_official/atoms/figma-extract/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
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-extract

Ou baixe só o arquivo:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/atoms/figma-extract/SKILL.md -o SKILL.md
Conteú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 componentRef para que token-map possa 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

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Skills parecidas