A IA do Figma só funciona tão bem quanto as instruções que você fornece. Prompts vagos produzem layouts genéricos que você precisa reconstruir do zero. Prompts específicos — com tipo de tela, seções, componentes, tamanho do frame e espaçamento — rotineiramente produzem 70–85% de output pronto para produção em uma única execução. Estes 15 templates são estruturados para o stack de IA 2026 do Figma: o Design Agent, Figma Make, Skills, e as funcionalidades gratuitas (auto layout, renomear camadas, substituir conteúdo) que custam zero créditos.

Copie qualquer template, substitua os marcadores entre colchetes pelo seu produto, e execute através do Otimizador de Prompt gratuito se quiser restrições mais rígidas. Para otimização com um clique dentro do ChatGPT, Claude, e Gemini enquanto você elabora instruções de agente, o TresPrompt adiciona estrutura no estilo ICCSSE à sua barra lateral.

Ponto Principal

Todo prompt forte de IA do Figma nomeia quatro coisas: qual tela você está construindo, quais componentes publicados usar, o tamanho do frame e regras de espaçamento. Adicione restrições negativas ("não use frames sem nome", "sem lorem ipsum") e o agente para de adivinhar. Skills codificam esses padrões para que você não precise reescrevê-los a cada sessão.

Templates do Design Agent (Telas no Canvas)

1 Página de configurações mobile
Crie uma página de configurações mobile (390×844) com: 1. Conta — avatar, nome, email, botões de edição 2. Notificações — toggles para email, push, SMS 3. Aparência — toggle modo escuro, seletor de tamanho da fonte 4. Segurança — alterar senha, toggle 2FA 5. Rodapé — botão destrutivo de logout, texto da versão do app Use apenas componentes publicados. Auto layout: espaçamento de 16px entre itens, 32px entre seções. Componente Section Header para rótulos de grupos.
2 Visão geral do dashboard (desktop)
Crie um dashboard de analytics desktop (1440×900) com: - Nav superior: logo, busca, menu do usuário - Sidebar esquerda: 5 itens de navegação, estado ativo em "Overview" - Principal: 4 cards KPI em uma fileira, gráfico de linha abaixo, tabela de atividade recente (5 linhas) Use variáveis do design system para cor e espaçamento. Componente Card para KPIs. Componente Table para atividade. Não use rótulos de dados placeholder de gráfico como "Série 1."
3 Fluxo de onboarding (3 frames)
Crie 3 telas de onboarding mobile (390×844), da esquerda para direita: 1. Boas-vindas — título, subtexto, CTA primário "Começar" 2. Permissões — lista notificações + localização com toggles 3. Sucesso — área de ilustração com checkmark, CTA "Você está pronto" Use componentes Primary Button e Secondary Button. Indicador de progresso mostrando passo 1/3, 2/3, 3/3. Padding horizontal consistente de 24px em todos os frames.
4 Estado vazio + estado de erro
Crie dois frames mobile (390×844): Frame A — Resultados de busca vazios: área de ícone, título "Nenhum resultado", texto do corpo, botão secundário "Limpar filtros" Frame B — Erro: ícone de aviso, "Algo deu errado", primário "Tentar novamente", terciário "Contatar suporte" Use componentes Empty State e Alert publicados se disponíveis. Conteúdo centralizado, largura máxima 280px para bloco de texto.
5 Configurações acessíveis (agent + a11y)
Crie uma página de configurações mobile (390×844) com requisitos de acessibilidade: - Elementos interativos com alvos de toque mínimos de 44×44px - Contraste de texto mínimo 4.5:1 (use cores de texto do design system) - Hierarquia de títulos H1 → H2, sem níveis pulados - Toggles incluem rótulos de texto visíveis (não apenas ícone) - Estados de erro usam cor E texto (não apenas cor) Use componentes publicados. Auto layout espaçamento 16px / 32px.

📬 Está achando isso útil?

Um insight acionável de IA por semana. Mais um pacote de prompts gratuito quando você se inscrever.

Inscreva-se grátis →

Templates do Figma Make (Protótipo / Código)

6 Landing de marketing (Make)
Construa um site de marketing de página única a partir deste frame do Figma: - Hero: título, subtítulo, captura de email + CTA - 3 colunas de recursos com ícones - Fileira de logos de prova social - Rodapé com links Corresponda ao espaçamento e cores do frame selecionado. Responsivo para mobile. Sem bibliotecas externas a menos que especificado nas notas do frame.
7 Protótipo interativo (Make)
Crie um protótipo clicável a partir dos frames [listar nomes dos frames]: - Clicar em "Inscrever-se" navega para o frame do formulário de registro - Submit mostra estado de toast de sucesso - "Voltar" retorna à tela anterior Use componentes do arquivo. Preserve estados de hover nos botões primários. Não adicione novas telas que não estão no arquivo de design.

Templates de Skills (Instruções de Agente Reutilizáveis)

Salve estes como arquivos markdown de Skills para que o agente siga as convenções da equipe sempre.

8 Skill: /settings-page
Ao criar telas de configurações: - Sempre use padrão Section Header + lista agrupada - Inclua rodapé com versão do app (estilo caption) e logout destrutivo - Mobile padrão 390×844 a menos que usuário especifique desktop - Use componente Toggle para configurações booleanas, nunca checkboxes customizados - Espaçamento: 16px dentro de grupos, 32px entre grupos, 24px padding da tela
9 Skill: /data-table
Ao criar tabelas: - Use componentes Table/Header e Table/Row - Inclua coluna de ícone de ordenação apenas se usuário pedir - Altura da linha 48px mínimo para toque - Truncar texto longo com reticências, nunca quebrar mais de 2 linhas em células - Estado vazio abaixo da tabela se zero linhas

Funcionalidades Gratuitas (Zero Créditos)

10 Substituir Conteúdo (em lote)
Substitua todo lorem ipsum no frame selecionado por texto realista de [B2B SaaS / e-commerce / saúde]. Nomes: diversos, plausíveis. Endereços: formato dos EUA. Nomes de produtos: fictícios mas profissionais. Mantenha contagens de caracteres similares aos placeholders para que o layout não quebre.
11 Renomear camadas (prep para handoff)
Renomeie todas as camadas nesta página usando padrão: [Seção]/[Componente]/[Estado] Exemplo: Settings/NotificationRow/Default Não renomeie frames de fundo bloqueados. Pule camadas ocultas.

Prompts MCP + Handoff de Código (Claude Code / Cursor)

12 React a partir de frame do Figma
Leia o frame selecionado do Figma via MCP. Gere um componente React usando [Tailwind / nossa biblioteca Shadcn]: - Corresponda espaçamento e cores dos tokens de design no arquivo - Use HTML semântico (nav, main, section) - Inclua breakpoints responsivos em 768px e 1024px - Exporte como SettingsPage.tsx com props tipadas para dados do usuário Não hardcode valores hex — use nomes de tokens das variáveis do Figma.

Templates de Exploração & Comparação

13 Três direções de layout
Gere 3 abordagens de layout diferentes para [tipo de tela] no desktop 1440×900: A — navegação sidebar B — navegação por abas superiores C — hub baseado em cards Mesmo conteúdo nos três. Use componentes publicados. Coloque frames lado a lado com espaçamento de 80px. Rotule cada frame "Direção A/B/C" em texto pequeno de caption.
14 Prompt de auditoria do design system
Revise a página selecionada e liste: - Componentes que não são da biblioteca publicada (marcar como "desanexado") - Cores que não usam variáveis - Texto que não usa estilos de texto - Espaçamentos de auto layout que não são 4/8/16/24/32 Output como checklist nas notas do frame. Não corrija automaticamente — apenas reporte.
15 Passe de refinamento (segundo prompt)
No frame gerado, aplique apenas essas correções: 1. Aumente espaçamento vertical entre seções para 32px 2. Troque botão primário para variante Button/Primary/Large 3. Adicione texto de ajuda sob campo de email: "Nunca compartilharemos seu email" 4. Alinhe todos os ícones para 24×24 nas linhas da lista Não reestruture o layout. Não adicione novas seções.

Como Encadear Templates

Fluxo de trabalho de produção: Template 13 (explorar) → escolher direção → Template 1 ou 2 (tela completa) → Template 15 (refinar) → Template 11 (renomear) → Template 12 (MCP para código). Cada passo usa um prompt focado ao invés de uma instrução gigante que confunde o agente.

Para o ecossistema completo de IA do Figma (Agent, Make, MCP, Skills, Sites), veja nosso guia completo 2026. Para configuração passo a passo do agente, veja como usar o Design Agent. Para orçamento de créditos, veja créditos de IA do Figma explicados.

Perguntas Frequentes

Estes funcionam no plano gratuito do Figma?

Templates 10–11 (Substituir Conteúdo, renomear) funcionam em planos gratuitos. Design Agent e Make requerem planos pagos e acesso beta. MCP funciona com qualquer plano que pode habilitar Dev Mode / MCP para sua conta.

Devo colar o template inteiro ou encurtar?

Comece com o template completo. Quando você ver quais linhas o agente ignora, encurte. Prompts mais curtos funcionam apenas depois que você sabe quais restrições seu design system realmente precisa.

Posso usar o mesmo prompt para Make e Design Agent?

Não — Make espera linguagem de construção/protótipo e consome créditos de forma diferente. Use templates do Design Agent para camadas do canvas e templates do Make para output interativo. Misturá-los produz resultados confusos.

Como salvo prompts como Skills?

Copie templates 8–9 em arquivos markdown de Skill na biblioteca de Skills da sua equipe. Invoque com /nome-da-skill no painel do agente. Atualize Skills quando os nomes dos seus componentes mudarem — veja nosso guia de Skills.

Divulgação: Alguns links neste artigo são links de afiliado. Recomendamos apenas ferramentas que testamos pessoalmente e usamos regularmente. Veja nossa política de divulgação completa.