figmapor HeyGen

Figma Skill.

Um agente para Claude Code e Codex focado em motion e vídeo: importa assets do Figma, tokens de marca e storyboards para uma composição HyperFrames.

Motion e Vídeo
Video

Baixar OpenDesign Ver guia de uso

heygen-com/hyperframes · skills/figma/SKILL.mdSKILL.md

--- name: figma description: Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition. --- ## Auth — two credentials, scoped ## Routing ## Assets (Phase 1 — CLI) ## Tokens (Phase 2 — CLI) ## Components (Phase 3 — CLI) ## Motion (Phase 4 — connector-assisted)

Metadados e títulos de seção lidos do arquivo original em 14/09/2026 · 17.829 caracteres no total

01 O que faz

O que a Skill figma Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Importa conteúdo do Figma para composições HyperFrames em cinco fases: assets estáticos, tokens de marca, componentes como HTML, timelines de movimento e shaders. Usa a REST API sempre que possível (assets, tokens, componentes), com conector opcional para dados de movimento e shader. Cada importação congela artifacts localmente com proveniência registrada, de modo que os renders nunca chamem o Figma e permaneçam determinísticos.

A reconstrução de storyboard trata os frames como keyframes que descrevem o estado do elemento ao longo do tempo, não como slides. Suporta vinculação de token a componente, de modo que a atualização de uma variável de marca recolore todos os componentes importados. Sensível a limites de taxa, com nova tentativa automática. Funciona em qualquer arquivo do Figma ao qual o token configurado tenha acesso.

O que ele produz

Assets de imagem congelados em .media/images/ com proveniência de manifest e snippet img
Entradas de token de marca, sidecar figma-tokens.json e registros de binding-index em .media/figma-bindings.jsonl
Pacotes de componentes HTML editáveis em compositions/components/<name>/
Scripts de timeline GSAP injetados após as tags de CDN, pausados e finitos, registrados em window.__timelines

Veja o exemplo de prompt ↗

Como funciona

01
Analisar a Referência do Figma
Use parseFigmaRef para extrair fileKey e nodeId da URL do usuário, da string fileKey:nodeId ou de um fileKey isolado.
02
Rotear por Intenção para a Fase Correta
Corresponda a solicitação do usuário a uma das cinco fases: exportação de assets, importação de tokens, reconstrução de componentes, timelines de movimento ou tratamento de shaders.
03
Buscar via REST ou Conector
REST é usado para assets, tokens e componentes. Movimento e shaders exigem um conector compatível ou exportação manual.
04
Congelar Artifacts Localmente com Proveniência
Cada importação grava um arquivo local, adiciona ao manifest com metadados de origem e regenera o inventário compartilhado de uso de mídia.
05
Reconstruir Movimento e Storyboards a Partir de Dados de Estado
Frames de storyboard se tornam timelines de elementos por meio da comparação de frames adjacentes. O contexto de movimento é normalizado em MotionDocs e depois em scripts GSAP.
06
Verificar Contra a Verdade de Referência
Compare o render com a exportação em pixels do próprio Figma para verificar a fidelidade estática. A reconstrução de movimento deve atingir no mínimo 15dB de motion-PSNR.

02 Encontre o ideal para você

Quando Usar a Skill figma

Use a skill figma no Claude Code ou Codex quando o trabalho for motion e vídeo desse tipo. Adequação e limites abaixo são do próprio arquivo da skill.

Boa Combinação

O usuário cola um link do figma.com ou pede para trazer um design do Figma para um vídeo ou composição
Extraindo cores de marca, tokens ou estilos de um arquivo do Figma para variáveis de composição
Construindo uma cena a partir de um frame do Figma como componente HTML editável
Reconstruindo animação a partir de uma seção de storyboard contendo frames de cena como keyframes

Conheça os Limites

A importação de movimento e shader sem um conector compatível com o Figma exige exportações nativas manuais
O caminho de renderização do conector do Figma não executa shaders; eles são reduzidos à cor base
A API REST de variáveis é restrita ao plano Enterprise; os outros planos degradam para metadados no estilo publicado
Quadros de storyboard que representam uma única UI de produto coerente escalam para reconstruir o app como DOM ativo, não como cadeias de elementos

O Que Fornecer

Token de acesso pessoal do FigmaEscopos somente leitura: File content, File metadata, opcionalmente Library content e Variables. Defina como FIGMA_TOKEN no shell ou .env.
Conector compatível do Figma (opcional)Autorização separada do token. Necessário para timelines de movimento e código-fonte de shader. Sem ele, solicite exportação nativa.
Notas de direção para a intenção do storyboardNós TEXT abaixo da faixa de storyboard descrevem como animar. Pareados às cenas por sobreposição de intervalo de x.
Exportação nativa do Figma para shadersPNG ou Motion MP4 exportado diretamente do Figma quando o caminho do conector não executa shaders ou nenhum conector está disponível.

03 Dentro da skill

Regras que a Skill figma dá ao Claude Code e ao Codex

7 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Verifique o Token Antes da Primeira Chamada de CLI
Antes de executar qualquer comando hyperframes figma, verifique se FIGMA_TOKEN existe no shell env ou no .env do projeto. Se não existir nenhum dos dois, oriente o usuário na configuração única e pare.
Sempre Passe --description para Assets
Toda importação de asset deve incluir --description com o que ele é. Isso se torna a linha do índice e o texto alt da imagem. Adicione --entity para marcas nomeadas.
Agrupe Nós em Uma Requisição por Arquivo
Passe múltiplas referências do mesmo arquivo como argumentos separados por espaço ou por vírgula. Todos são renderizados em uma única chamada /v1/images para evitar limites de taxa.
Importe Tokens Antes dos Componentes
Execute hyperframes figma tokens antes de importar componentes. Isso permite que as cores dos componentes se vinculem a variáveis de marca em vez de embutir duplicatas literais.
Nunca Deixe URLs do Figma na Composição
Congele todo o conteúdo do Figma em arquivos locais primeiro. O render deve ver apenas arquivos locais para saída determinística.
Nunca Emita Repeat: -1
As timelines devem ser pausadas, finitas, com chaves literais window.__timelines. Sem loops infinitos.
Narre Cada Etapa para o Usuário
Antes de cada comando, diga o que você está buscando no Figma. Depois, diga onde isso foi aplicado, o que mudou na composição e a próxima ação imediata.

04 Coloque em prática

Instale figma no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione figma ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill figma

Forma genérica de CLI skills para skills/figma/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Motion e Vídeo

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Import the hero section from [figma.com/file/abc123/Brand?node-id=42-1] including the logo, headline text, and background. Pull the brand tokens from the same file so the colors stay linked to our design system variables. Then build the animation timeline — the logo should scale in with a burst effect and the headline should slide from the left.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Execute npx hyperframes check antes de considerar a importação de motion ou de componente concluída
Verifique se a reconstrução de motion atinge o mínimo de 15dB de motion-PSNR usando o script verify-motion.mjs
Verifica se as importações de assets são idempotentes por fileKey:nodeId:format:scale:version, reimportando apenas conteúdo alterado

No OpenDesign importe o figma a partir do link do seu SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Branch main
Arquivo da skill: skills/figma/SKILL.md Checksum de conteúdo registrado na verificação; commit 558c11b
License: Apache-2.0 De LICENSE.
Estrelas do repositório: 49.761 Snapshot do GitHub feito em 14/09/2026 para todo o repositório heygen-com/hyperframes, que contém 9 skills neste catálogo. Não é uma classificação ou contagem de uso para figma.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Figma → HyperFramesDivisão de capacidades em cinco fases: assets, tokens, componentes via REST; movimento e shaders via conector ou exportação manual
Autenticação — duas credenciais, com escopoToken de acesso pessoal para REST com escopos somente leitura; autenticação separada do conector para motion/shaders; verificação prévia do token antes da CLI
RoteamentoAnalisa referências do Figma, roteia por intenção para as fases de asset/tokens/componente/movimento/storyboard/shader
Assets (Fase 1 — CLI)Renderiza nós via REST, sanitiza SVG, congela em .media/images/, agrupa nós por arquivo para evitar limites de taxa
Tokens (Fase 2 — CLI)Importa variáveis como entradas de marca da composição, faz degradação para estilos publicados em planos não Enterprise, cria índice de vinculação
Componentes (Fase 3 — CLI)Converte a árvore de nós em HTML com geometria exata, vetores são rasterizados automaticamente, vincula preenchimentos a tokens via var() quando importados
Movimento (Fase 4 — assistido por conector)Recupera o contexto de movimento recursivamente, normaliza para MotionDocs, gera scripts GSAP, valida contra limite de 15dB de motion-PSNR
Shaders (Fase 5 — majoritariamente manual)A renderização via conector achata os shaders; solicite ao usuário a exportação nativa do Figma como PNG ou MP4
Storyboards (uma SEÇÃO de frames de cena → animação)Os frames são keyframes, não slides; compara frames adjacentes formando cadeias de elementos, faz correspondência por nome e depois por geometria, notas de direção especificam as transições
DeterminismoCongela todas as URLs do Figma localmente, nunca emite repeat -1, timelines pausadas e finitas, toda E/S ocorre no momento da importação

A Descrição da Própria Skill

"Importe conteúdo do Figma para uma composição HyperFrames — assets renderizados, tokens de marca, componentes, seções de storyboard → movimento reconstruído (frames lidos como estados, não slides) (REST/CLI), movimento assistido por conector quando disponível, e shaders de um conector ou exportação nativa. Use quando o usuário colar um link figma.com ou pedir para trazer um design, frame, logo, marca ou animação do Figma para um vídeo/composição."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 17.829 caracteres. Leia o arquivo completo no GitHub.

Figma

Execute figma em uma tarefa real de movimento e vídeo.

Baixe OpenDesign, importe figma a partir do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill figma

O que a Skill figma Faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando Usar a Skill figma

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras que a Skill figma dá ao Claude Code e ao Codex

Verifique o Token Antes da Primeira Chamada de CLI

Sempre Passe --description para Assets

Agrupe Nós em Uma Requisição por Arquivo

Importe Tokens Antes dos Componentes

Nunca Deixe URLs do Figma na Composição

Nunca Emita Repeat: -1

Narre Cada Etapa para o Usuário