Se você já tentou documentar dezenas de componentes com várias configurações, sabe que isso foge do controle rápido. Reescrever manualmente títulos, descrições e quebras de configuração dentro do Figma não é só entediante, é um gargalo de escalabilidade.

Eu costumava passar horas fazendo isso. Agora reduzi para alguns cliques e minutos. Neste post, vou te mostrar exatamente como:

1. Usar o ChatGPT para gerar descrições técnicas precisas;
2. Nomear camadas e estruturar páginas;
3. Automatizar a substituição de conteúdo com a IA “Rewrite this…” do Figma;

🧩 O desafio

Cada componente da nossa biblioteca precisava de:

• Uma página de documentação estruturada
• Uma descrição personalizada do que o componente faz
• Detalhes sobre todas as configurações e variantes

Fazer isso manualmente significava muita repetição e revisão. Mesmo com templates, o processo era Um tééédioooo. Ó eu documentando componentes antes desse processo:

🛠 O novo fluxo de trabalho

Veja como transformei uma tarefa de várias horas em um processo de ~5 minutos com um sistema repetível:

Passo 1: Planeje sua estrutura e prepare o Figma para ser reescrito
Antes de qualquer coisa, precisamos definir qual estrutura usaremos para nossa documentação, porque precisaremos referenciá-la tanto no Figma quanto nos Prompts da IA.

Aqui está a estrutura que segui:

📐 Estrutura no Figma

• Uma página por componente
• Para cada componente:
  • Nome do componente
  • Descrição curta
  • Uma seção (com título e descrição) para cada caso de uso/variante

Como isso aparece no prompt:

Como isso aparece no Figma:

Os prints originais estão em inglês, por conta do projeto ser norte-americano. Dá para utilizar português também. 🙂

O prompt completo está no Passo 3. Você pode mudar a estrutura e o prompt conforme suas necessidades. O principal aqui é manter o mesmo texto no Prompt e no Figma para as camadas que você irá reescrever.

Step 2: Prepare os visuais

No Figma, começo capturando (screenshot) tudo sobre um componente:

• O próprio componente
• Todas as variáveis, estados e configurações disponíveis
• Qualquer outra documentação ou instância onde esse componente apareça

Basicamente: se é clicável ou configurável, entra na captura de tela.

Step 3 : Insira o [Prompt 1] no GPT

Em seguida, colo essas imagens no ChatGPT com um prompt bem específico (vamos chamar de [Prompt 1]). Ele se parece com isto:

Com base nas configurações do componente na imagem, preencha o prompt abaixo:
-- Início do Prompt --
"Prompt:
Você está escrevendo documentação técnica para uma biblioteca de componentes (widgets).
Altere todo o texto "Widget Name" para "[NOMEDOWIDGET]".
Altere "Widget short description" para uma descrição curta que explique a funcionalidade de [NOMEDOWIDGET], que faz as seguintes coisas:

[Funcionalidade 01]

[Funcionalidade 02]
Altere todo o texto "Section1 title" para "[NOMESEC1]".
Altere "Section1 description" para uma descrição curta que explique as configurações específicas do widget que estamos exibindo nessa seção. Esta configuração faz as seguintes coisas:

[Conf1 01]

[Conf2 02]"
-- Fim do Prompt --

Um exemplo de prompt preenchido:
-- Início do Prompt de EXEMPLO --
"Prompt:
Você está escrevendo documentação técnica para uma biblioteca de componentes (widgets).
Altere todo o texto "Widget Name" para "Tabela Diagnóstica".
Altere "Widget short description" para uma descrição curta que explique a funcionalidade da Tabela Diagnóstica, que faz as seguintes coisas:

Exibe tabelas de relatórios diagnósticos com diferentes níveis de complexidade de dados

Suporta categorias, grupos de espécimes e interpretações de valores

Permite a apresentação de valores médicos com marcadores, comentários e indicadores de status
Altere todo o texto "Section1 title" para "Tabela Simples".
Altere "Section1 description" para uma descrição curta que explique as configurações específicas do widget que estamos exibindo nessa seção. Esta configuração faz as seguintes coisas:

Exibe um relatório básico com testes, valores e status apenas

Suporta interpretação (ex: ALTO) e sinais visuais como bandeiras de resultado com codificação por cores

Usa indicadores de status como FINAL e CORRIGIDO

Permite inclusão de comentários gerais e marcadores de espécimes

Altere todo o texto "Section2 title" para "Com Categorias".
Altere "Section2 description" para uma descrição curta que explique as configurações específicas do widget que estamos exibindo nessa seção. Esta configuração faz as seguintes coisas:

Exibe coluna de categoria para agrupar testes relacionados

Inclui valores históricos com data/hora para comparação longitudinal

Suporta nomes de executantes e histórico de resultados mais detalhado

Integra blocos de comentários dentro das linhas da tabela para mais informações clínicas

Altere todo o texto "Section3 title" para "Múltiplos Espécimes".
Altere "Section3 description" para uma descrição curta que explique as configurações específicas do widget que estamos exibindo nessa seção. Esta configuração faz as seguintes coisas:

Suporta múltiplos registros de espécimes dentro do mesmo relatório

Distingue entre data/hora de coleta e de recebimento para cada espécime

Replica dados das linhas para cada espécime quando necessário

Mantém consistência de estilo e interpretações entre os espécimes

Nas descrições das seções, certifique-se de listar todas as configurações do widget mencionadas, mas formatadas em parágrafo.
Evite usar termos como "esta seção permite que você personalize", já que estamos apenas mostrando exemplos dos resultados dos WIDGETS, e a pessoa não pode realizar nenhuma ação ali. Em vez disso, use frases como "este widget permite que você personalize..."
Após escrever esse parágrafo, aplique a configuração "deixar mais curto".
Certifique-se de que as frases façam sentido, estejam gramaticalmente conectadas, claras e objetivas.
NÃO altere nada do componente _LibrarySidebar."
-- Fim do Prompt de EXEMPLO --

Observe que você pode adicionar mais itens de funcionalidades e seções dependendo das configurações do widget.
APENAS altere o que está dentro de []. Para "NOMESEC1", sugira um nome para a seção com base nas configurações do widget.
Após gerar o prompt, cole EXATAMENTE este texto:
"Nas descrições das seções, certifique-se de listar todas as configurações do widget mencionadas, mas formatadas em parágrafo.
Evite usar termos como "esta seção permite que você personalize", já que estamos apenas mostrando exemplos dos resultados dos WIDGETS, e a pessoa não pode realizar nenhuma ação ali. Em vez disso, use frases como "este widget permite que você personalize..."
Após escrever esse parágrafo, aplique a configuração "deixar mais curto".
Certifique-se de que as frases façam sentido, estejam gramaticalmente conectadas, claras e objetivas.
NÃO altere nada do componente _LibrarySidebar."

Explicando algumas partes desse prompt:

• “Com base nas configurações do componente na imagem, preencha o prompt abaixo:…”
  • Isso faz a IA ler as imagens, extrair informações e preencher o prompt que usaremos na IA do Figma.
• “Um exemplo de prompt preenchido:”
  • O exemplo serve para garantir que a IA entenda seu pedido. Também mostra o estilo que você espera: frases curtas, listas, mais técnicas, etc.
• “Você pode adicionar mais itens de funcionalidades e seções dependendo das configurações do widget.”
  • Evita que a IA siga o exemplo literalmente e libera para adaptar conforme a complexidade do componente.
• “Depois do prompt gerado, cole EXATAMENTE este texto:…”
  • Esse texto dá instruções específicas à IA do Figma, então queremos que esteja no final de todo prompt gerado pelo GPT. Edite como preferir.
• “Não altere nada no componente _LibrarySidebar.”
  • Essa foi uma descoberta bacana! Na biblioteca original, tínhamos uma sidebar para navegação do protótipo. A IA do Figma vivia mudando os nomes desse menu. Ao adicionar essa instrução, resolveu o problema.

🧠 Por que o [Prompt 1] é importante:
Este não é o doc final. Em vez disso, o GPT lê as capturas de tela e usa o Prompt 1 como esqueleto para escrever o Prompt 2, o prompt final que alimentará a IA do Figma. E essa é a chave: o GPT preenche tudo com base no que vê nas imagens, sem precisar listar manualmente os nomes/configs dos widgets.

Passo 4: Use o “Rewrite this…” no Figma

Agora, pegue o prompt gerado e volte ao Figma:

1. Selecione o quadro de documentação completo
2. Vá em “Rewrite this…” (Figma AI beta)
3. Cole o prompt gerado
4. Deixe a IA fazer a mágica 🪄

⚙️ Bônus: como isso escala

O borogodó desse sistema é que ele é agnóstico a templates. Você pode adaptá-lo para:

💡 Componentes de Design System
Use um prompt para descrever botões, campos de formulário, etc., com estados e tags de acessibilidade consistentes.

📄 Documentação de fluxos
Capturas de fluxo + GPT + prompt = explicações legíveis para onboarding ou handoff para devs.

🧰 Docs de onboarding para o time
Novas páginas de biblioteca? Pluge suas capturas, atualize referências no prompt e pronto.

Resumindo: O que você vai precisar

• 📸 Capturas de todas as views e variantes de cada componente (formulários, dropdowns, variações)
• ✍️ O [Prompt 1] que está neste post.
• 🤖 IA de texto (ChatGPT ou similar)
• 🧠 Figma AI + funcionalidade “Rewrite this…”
• 🏷️ Páginas Figma bem estruturadas com placeholders

Se você está documentando bibliotecas de componentes (ou qualquer coisa que escale com variações de UI), essa abordagem pode te economizar dezenas de horas.

Curioso sobre o que a IA pode fazer para otimizar seu processo? Me manda um e-mail e bora colaborar.

Por: Anna Erbetta