Figma Generate Designpor OpenAI

Figma Generate Design Skill.

Crie uma tela editável no Figma que permaneça conectada ao seu design system.

Figma
Design de UI
Design systems

Revisão da fonte · Figma Generate DesignSKILL.md

Tarefa Figma Produz • Uma tela Figma nova ou atualizada, composta por instâncias de componentes • Cores, espaçamentos e raios vinculados a variáveis, com estilos reutilizáveis • Verificações visuais por seção e da tela inteira em relação à fonte Antes de começar Figma MCP conectado, acesso ao arquivo de destino, um design system publicado e o Skill complementar figma-use para operações no canvas.

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

01 Funcionalidades

Monte telas no Figma com os recursos existentes do design system

Crie telas no Figma a partir de componentes e variáveis de bibliotecas existentes, verificando cada seção à medida que é montada.

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

A abordagem de trabalho

O Figma Generate Design trabalha no sentido código para design: a entrega é uma tela dentro do Figma, não código de aplicação. Antes de montar a página, ele descobre instâncias de componentes, variáveis de biblioteca e estilos de texto ou de efeito existentes. A fonte prefere reutilizar a desenhar caixas parecidas com valores fixos.

A estratégia de montagem é incremental. Primeiro é criado um frame envolvente; depois, cada seção é construída dentro dele e inspecionada. As propriedades de texto dos componentes e as variantes padrão são conferidas no código-fonte, enquanto capturas de tela por seção revelam textos cortados e placeholders remanescentes que podem sumir em uma visão reduzida da página inteira. O resultado deve ser composto por instâncias editáveis do design system, não apenas uma captura de tela da aplicação.

Entregas esperadas

Uma tela Figma nova ou atualizada, composta por instâncias de componentes
Cores, espaçamentos e raios vinculados a variáveis, com estilos reutilizáveis
Verificações visuais por seção e da tela inteira em relação à fonte

Ver o briefing de exemplo

Do briefing à revisão

01
Mapeie a tela de origem
Leia suas seções, componentes e valores padrão de props. Identifique o arquivo de destino no Figma e as convenções do sistema existente.
02
Descubra e reutilize recursos
Inspecione telas existentes e pesquise componentes, variáveis e estilos nas bibliotecas vinculadas. Um resultado vazio de variáveis locais não prova que não haja tokens remotos.
03
Construa e valide as seções
Crie primeiro o frame envolvente, monte uma seção por vez e inspecione texto, variantes e layout antes de continuar.

02 Quando usar

Quando usar

Figma MCP conectado, acesso ao arquivo de destino, um design system publicado e o Skill complementar figma-use para operações no canvas.

Boa opção

Handoff do código para o FigmaÚtil quando uma tela de aplicação em funcionamento precisa de uma contraparte de design editável, conectada à sua biblioteca de componentes.
Atualização de telas existentesServe para mudanças pontuais de conteúdo ou de variantes sem reconstruir toda a página no Figma.

Limites a verificar

É preciso ter acesso ao design systemO fluxo documentado pressupõe acesso a componentes publicados ou a uma biblioteca de equipe e uma conexão Figma MCP disponível.
Não é Figma para códigoGerar a implementação da aplicação a partir de um design está explicitamente fora da direção principal deste Skill.

Traga estas entradas

Arquivo de destino no FigmaInforme o arquivo ou a página em que a tela deve ser criada ou atualizada.
Origem da telaForneça o código da aplicação ou um briefing concreto, seção por seção, com textos reais.
Contexto da bibliotecaIndique telas existentes ou bibliotecas publicadas cujos componentes e tokens devem ser reutilizados.

03 Decisões importantes

Decisões importantes

Tokens remotos podem ser descobertos
A fonte distingue variáveis locais de variáveis de bibliotecas vinculadas, evitando sistemas de tokens duplicados desnecessários.
Inspeção por seção
Verificar cada seção facilita encontrar variantes erradas e textos cortados melhor do que uma única miniatura da página inteira.

04 Exemplo de briefing

Experimente um briefing focado

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

Revise a configuração

Mantenha o figma-use e suas referências da API disponíveis junto com este fluxo. Estes materiais Beta são regidos pelos Termos para Desenvolvedores do Figma. Instalar apenas o Skill não conecta nem autoriza um arquivo do Figma.

Arquivo de origem upstream

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

Figma MCP conectado, acesso ao arquivo de destino, um design system publicado e o Skill complementar figma-use para operações no canvas.

Comece com uma única entrega

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

Briefing de exemplo

Use o figma-generate-design para recriar nossa tela de configurações da conta no arquivo Figma especificado. Reutilize seus componentes e variáveis publicados, inspecione as props padrão do código e preserve os rótulos reais. Crie primeiro o frame envolvente e depois uma seção por vez. Mostre capturas de tela de cada seção e corrija textos cortados ou conteúdo de placeholder antes de considerar a tela concluída.

Inspecione o resultado

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

Os controles são instâncias de componentes vinculados, e não substitutos desenhados manualmente.
Textos e variantes correspondem à tela fornecida, incluindo as props padrão.
As capturas de tela das seções não mostram rótulos cortados, sobreposições nem placeholders remanescentes.

O OpenDesign oferece um espaço de trabalho de design local para agentes de código. Esta listagem não significa que o skill esteja incluído nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o guia rápido

05 Fonte e licença

Fonte e licença

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

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

Resumo editorial da fonte

Crie telas no Figma a partir de componentes e variáveis de bibliotecas existentes, verificando cada seção à medida que é montada.

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

06 Perguntas antes de começar

Perguntas antes de começar

O resultado é uma captura de tela?

O fluxo principal cria nós e instâncias editáveis do Figma. Uma página web capturada pode servir de referência, mas não é a estrutura final pretendida para a tela.

E se nenhuma variável local for encontrada?

A fonte diz para verificar também as bibliotecas vinculadas. As variáveis remotas publicadas não são retornadas pela API de variáveis locais.

Ele pode atualizar apenas parte de uma tela?

Sim. Ele pode localizar seções existentes e alterar texto, variantes ou layout, preservando as áreas não afetadas.

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. Verifique a configuração do próprio skill antes de adicioná-lo ao seu fluxo de trabalho.

Baixar OpenDesign Ver skills de design