Figma Generate Librarypor OpenAI

Figma Generate Library Skill.

Comece pelo modelo de tokens e depois construa componentes reutilizáveis em uma sequência controlada.

Figma
Design Systems
Bibliotecas de componentes

Revisão da fonte · Figma Generate LibrarySKILL.md

Tarefa Figma Produz • Coleções de variáveis do Figma, aliases semânticos e estilos de texto ou de efeito • Componentes reutilizáveis documentados, com conjuntos de variantes controlados • Um registro de estado e uma revisão final de vínculos, nomenclatura e aparência visual Antes de começar Figma MCP com acesso a arquivo editável, acesso ao repositório e a Skill complementar figma-use, além das referências auxiliares.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Crie uma biblioteca Figma a partir das bases do código

Crie variáveis e estilos do Figma antes dos componentes, com um registro de estado salvo e aprovação em cada fase.

Fluxo baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Figma Generate Library é um fluxo de design system em várias fases, não um gerador de telas de uma só vez. Ele compara o código, o arquivo Figma existente e as bibliotecas assinadas e, em seguida, define um escopo fixo de tokens e componentes antes de gravar. As variáveis e os estilos vêm antes dos componentes, para que as propriedades visuais sejam vinculadas a uma base coerente.

A fonte dá atenção especial ao estado de longa duração: IDs criados, nomes determinísticos e um registro salvo permitem retomar o trabalho sem duplicar nós. O trabalho com componentes inclui layout de variantes, propriedades de texto e booleanas, troca de ícones e documentação. Pontos de verificação humanos fazem parte do fluxo, sobretudo quando o código e o Figma divergem; a Skill não decide silenciosamente qual sistema deve ser a referência.

Entregas esperadas

Coleções de variáveis do Figma, aliases semânticos e estilos de texto ou de efeito
Componentes reutilizáveis documentados, com conjuntos de variantes controlados
Um registro de estado e uma revisão final de vínculos, nomenclatura e aparência visual

Ver o briefing de exemplo

Do briefing à revisão

01
Descobrir e fixar o escopo
Faça o inventário dos ativos de código e do Figma, pesquise nas bibliotecas e combine o conjunto inicial exato de tokens e componentes antes da criação.
02
Criar as bases
Construa variáveis primitivas e semânticas, modos, escopos e sintaxe de código, seguidos de tipografia e efeitos. Obtenha a aprovação das bases, depois crie a estrutura de páginas e a documentação das bases e obtenha uma aprovação separada antes de iniciar os componentes.
03
Construir componentes de forma incremental
Crie um componente por vez, com vínculos de variáveis, propriedades e documentação. Valide a estrutura e a aparência, mostre a captura de tela e obtenha aprovação antes de iniciar o próximo componente.
04
Conciliar e auditar
Revise a nomenclatura, os vínculos não resolvidos e os mapeamentos opcionais do Code Connect, usando os IDs registrados em vez de adivinhar ou fazer uma limpeza ampla.

02 Quando usar

Quando usar

Figma MCP com acesso a arquivo editável, acesso ao repositório e a Skill complementar figma-use, além das referências auxiliares.

Bom encaixe

Alinhamento entre código e bibliotecaÚtil quando tokens e componentes implementados precisam de uma contrapartida sustentável no Figma.
Reparo controlado da bibliotecaServe para uma análise de lacunas em que alguns ativos podem ser reutilizados, outros encapsulados e poucos refeitos.

Limites a verificar

Não é um gerador de chamada únicaA fonte exige explicitamente trabalho em etapas e pontos de aprovação. Uma biblioteca grande de componentes não deve ser apresentada como criada com segurança em uma única operação.
Conflitos exigem decisão de responsabilidadeQuando o código e o Figma divergem, um responsável de produto ou de design deve decidir qual valor ou contrato de componente prevalece.

Traga estes insumos

Inventários de código e do FigmaForneça o repositório e o arquivo de destino editável, incluindo as convenções de tokens existentes.
Escopo inicialNomeie as coleções de tokens, os modos e as famílias de componentes necessários para a primeira versão utilizável.
Responsáveis pela revisãoIdentifique quem pode aprovar bases, componentes e conflitos entre os sistemas existentes.

03 Decisões importantes

Decisões que importam

Aliases semânticos
A fonte separa primitivas brutas de tokens semânticos sensíveis ao modo, em vez de duplicar valores brutos nos componentes.
Criação retomável
Um registro salvo de nós e nomes determinísticos facilitam retomar um trabalho de biblioteca interrompido sem criar duplicatas.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Confira a configuração da skill antes de usá-lo.

Revise a configuração

Use a pasta curada completa, incluindo os scripts auxiliares e as referências de fase. Esses materiais Beta são regidos pelos Termos para Desenvolvedores do Figma. Trate as gravações no Figma e a publicação da biblioteca como operações autorizadas separadamente.

Arquivo de origem upstream

https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-library/SKILL.md

Figma MCP com acesso a arquivo editável, acesso ao repositório e a Skill complementar figma-use, além das referências auxiliares.

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use o figma-generate-library para planejar uma biblioteca pequena que corresponda ao nosso código: tokens de cor com modos claro e escuro, espaçamento, tipografia, Button e Input. Comece com uma descoberta somente leitura e mostre os conflitos entre o código e o Figma. Aguarde a aprovação do escopo antes de gravar, crie primeiro as bases e mantenha um registro de estado para que cada componente possa ser revisado e retomado de forma independente.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

As variáveis semânticas usam as primitivas como alias e carregam os modos e escopos pretendidos.
As variantes dos componentes e as trocas de ícones seguem o contrato combinado, sem combinações desnecessárias.
IDs registrados, capturas de tela e verificações de vínculos sustentam cada fase concluída.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída no pacote nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Leia o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão da fonte fixada, vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte: OpenAI
Repositório: openai/skills
Arquivo da skill: skills/.curated/figma-generate-library/SKILL.md
Licença: Termos do Figma
Versão revisada: 2026-10-07 · 49f948faa925

Resumo editorial da fonte

Crie variáveis e estilos do Figma antes dos componentes, com um registro de estado salvo e aprovação em cada fase.

Resumo original de OpenDesign, com base na fonte vinculada. As estrelas do repositório são um indicador datado de popularidade, não de uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Qual é a diferença em relação a gerar uma tela?

Ele constrói as bases e os componentes reutilizáveis que as telas usam, incluindo coleções de tokens, variantes e documentação.

As gravações no canvas podem ser executadas em paralelo?

A fonte exige explicitamente mutações sequenciais no Figma, para que o estado e os IDs de nós retornados permaneçam confiáveis.

Ele substitui automaticamente uma biblioteca existente?

Não. A descoberta e a aprovação do escopo vêm antes da criação, e a estratégia de reutilização prioriza os ativos locais existentes em vez de importações ou novos componentes.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Confira a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Ver skills de design