AI Design

Figma Make: o que é, como funciona, créditos e limites (2026)15 min read

Reading Time: 8 minutesFigma Make é a ferramenta de prompt de aplicativo de IA do Figma. Aqui está o que é, como funciona passo a passo, quem pode usá-lo, como funcionam os créditos de IA, como publicar e exportar código e onde estão seus limites.

Figma Make complete review: features, cost, updates, with Figma and Anima logos

Figma Make: o que é, como funciona, créditos e limites (2026)15 min read

Reading Time: 8 minutes

Figma Make é a ferramenta de prompt de aplicativo de IA do Figma. Você descreve o que deseja ou começa a partir de um design Figma, e ele cria um protótipo funcional ou aplicativo da web que você pode visualizar, refinar no chat, editar no código e publicar. Ele fica dentro do Figma como um arquivo Make dedicado, para que possa usar seus designs e bibliotecas como contexto. Destina-se a designers, gerentes de produto e qualquer pessoa que precise transformar uma ideia em algo em que as pessoas possam clicar.

Fatos verificados na página Figma Make e na central de ajuda Figma em 1º de novembro de 2026. Planos, créditos e recursos mudam com frequência, portanto, confirme os detalhes atuais em Figma antes de comprar.

Este guia explica o que é Figma Make, como funciona passo a passo, quais recursos são importantes, quem pode usá-lo, como funcionam os créditos de IA, como publicar e exportar e onde estão seus limites. Se você estiver escolhendo entre ferramentas, nosso Comparação Figma Make vs Anima Playground abrange alternativas.

O que é Figma Make?

Figma descreve o Figma Make como uma ferramenta de prompt para aplicativo orientada por IA que permite dar vida a ideias e designs Figma existentes como protótipos funcionais, aplicativos da web e interface de usuário interativa. Você trabalha em um bate-papo próximo a uma visualização ao vivo e tudo o que você cria é baseado em código, para que você possa alternar entre a visualização, as edições de apontar e clicar e o próprio código.

Figma apresentou o Make no Config 2025 e cresceu de uma ideia de componente único para um produto completo com modo de plano, editor de código, backends, publicação e integrações. É separado do Figma Design: você cria um arquivo Make da mesma forma que cria outros arquivos Figma, usando o botão Make em seus rascunhos.

Prompt de bate-papo Figma Make solicitando um modal de configurações de reprodução próximo ao painel de configurações de áudio interativo gerado com um equalizador
Imagem: Figma. Um prompt e um design anexado tornam-se um painel de configurações interativo.

O que você pode construir com Figma Make?

  • Um protótipo clicável de um fluxo ou recurso para testar com os usuários.
  • Uma versão interativa de um design Figma existente, com transições e lógica.
  • Um pequeno aplicativo da web ou ferramenta interna, com back-end para dados e login.
  • Uma landing page ou microsite que você pode publicar em um URL público.

Como funciona o Figma Make, passo a passo

  1. Crie um arquivo Make. No navegador de arquivos Figma, abra seus rascunhos e clique em Make no canto superior direito. Você também pode começar a partir de um modelo ou clonando um repositório GitHub.
  2. Escreva um prompt. Descreva o que você deseja construir no chat. Você pode digitar ou ditar. Seja específico sobre o usuário, a tarefa principal e as telas.
  3. Adicione contexto. Anexe designs Figma ou cole quadros no chat, traga contexto de estilo de uma biblioteca Figma (planos pagos), adicione um back-end, conecte ferramentas por meio de conectores MCP ou deixe Make pesquisar na web ou buscar um URL.
  4. Planeje primeiro se quiser controle. Em planos pagos, o modo de plano gera um plano estruturado que você pode editar antes de qualquer código ser escrito.
  5. Revise a visualização. Make cria o aplicativo e o mostra ao vivo. Clique nele da mesma forma que um usuário faria.
  6. Refinar. Continue conversando, use apontar e editar para alterar elementos específicos, adicionar anotações e enviá-las juntas ou abrir o editor de código e alterar o código diretamente.
  7. Compartilhe ou publique. Compartilhe o arquivo para feedback com comentários, copie a visualização de volta para Figma Design como camadas, publique-o em uma URL pública ou baixe o código.
Espaço de trabalho Figma Make com bate-papo de IA à esquerda, onde um prompt solicita um reprodutor de mídia e a visualização do aplicativo ao vivo à direita
Imagem: Figma. Prompt no chat à esquerda, visualização ao vivo do aplicativo gerado à direita.

Uma dica prática dos documentos do Figma: anexe um quadro ou componente em vez de colar um link em seu arquivo Figma. Make não lê um design de uma URL e um link colado pode levar a uma saída inesperada.

Principais recursos do Figma Make

Recurso O que isso faz
Modo de planejamento Cria um plano editável antes do início da geração, para que você possa esclarecer a intenção primeiro.
Anexos Permite anexar designs, imagens, vídeos, áudio, arquivos de texto e PDFs para orientar o modelo.
Apontar e editar Clique em um elemento na visualização para remodelá-lo, trocá-lo ou solicitar uma alteração.
Anotações Selecione vários elementos, descreva as alterações e envie-as para o modelo de uma só vez.
Editor de código Visualize e edite o código gerado, adicione seus próprios arquivos e adicione as diretrizes que Make segue.
Kits Make Sincronize pacotes npm, estilos de biblioteca e diretrizes para gerar protótipos de maior fidelidade.
Conectores MCP Extraia contexto de ferramentas externas, como documentos e tarefas.
Histórico de versões Visualize, adicione como favorito ou restaure qualquer versão anterior, AI ou manual.
Comentários e celular Colete feedback sobre um protótipo e visualize-o em um telefone.
Modelos e habilidades personalizadas Reutilize um fluxo de trabalho comprovado ou empacote suas próprias instruções para Make.
Figma Make apontar e editar: um elemento de título selecionado com uma caixa de prompt solicitando a animação do carimbo de data e hora quando uma música é reproduzida
Imagem: Figma. Apontar e editar permite selecionar um elemento na visualização e solicitar uma alteração.

Camadas de código Figma Make vs Figma vs Figma Sites

Esses três ficam confusos. Figma Make funciona em um arquivo dedicado onde você cria e publica um aplicativo. As camadas de código permitem explorar ideias interativas ao lado de seus designs na tela Figma Design; veja nosso guia para Camadas de código e especificações Figma. Figma Sites é para publicação de sites projetados em Figma. Escolha Make quando a saída deve se comportar como um aplicativo e camadas de código quando desejar um elemento interativo ao lado de seu design estático.

Quem pode usar o Figma Make e quanto custam os créditos de IA?

Figma Make está disponível em Starter (com limitações), Professional, Organization, Enterprise, Educação (usuários de ensino superior e bootcamp) e planos governamentais. Seu assento decide o que você pode fazer:

Assento O que você pode fazer em Figma Make
Completo Tudo: crie arquivos Make em pastas e equipes, compartilhe, publique, use o editor de código e exporte código.
Desenvolvedor Experimente Make em rascunhos e código de exportação.
Colaborar e visualizar Experimente Make em rascunhos.

Make funciona com créditos de IA. Cada assento inclui créditos, eles são redefinidos mensalmente e não podem ser compartilhados ou acumulados. Na documentação do Figma em outubro de 2026:

Plano (lugar completo) Créditos de IA por mês
Starter 500 (mais um limite diário de 150)
Professional 3,000
Organization 3,500
Enterprise 4,250

Quantos créditos um prompt usa depende do modelo escolhido e da tarefa. Os próprios exemplos do Figma, baseados em seu modelo padrão em fevereiro de 2026, apresentam uma pequena mudança, como atualizar as fontes em cerca de 30 ou mais créditos e tornar um design anexado interativo em cerca de 75 ou mais. Escolher um modelo mais leve para pequenas edições e usar o modo de planejamento para grandes construções ajuda a durar seus créditos.

Publicação, back-ends e preparação do seu trabalho

Publicar

Clique em Publicar, defina um título e Make fornecerá um URL público semelhante a three-random-words.figma.site. Você pode conectar um domínio personalizado em planos suportados. Os aplicativos publicados são hospedados em Amazon Web Services com roteamento por meio de Cloudflare, eles não são indexados por mecanismos de pesquisa por padrão e Make não possui painel de análise integrado, embora você possa adicionar um ID Google Analytics nas configurações.

Botão Publicar Figma Make destacado em uma grade de designs de sites publicados
Imagem: Figma. Publique um aplicativo Make em uma URL pública.

Back-end

Para armazenar dados e oferecer suporte ao login, você pode pedir ao Make para criar um backend com tecnologia Payload com banco de dados, armazenamento de arquivos, autenticação e um painel de administração, ou conectar seu próprio projeto Supabase a partir das configurações do Make.

Visualização do aplicativo Figma Make ao lado de um painel CMS listando eventos com títulos e datas, mostrando um back-end que armazena dados
Imagem: Figma. Um back-end com CMS permite que um aplicativo Make armazene e gerencie dados.

Código de exportação

Os usuários com licença Full ou Dev podem baixar todos os arquivos em um arquivo Make como um ZIP em Ações de arquivo na guia Arquivos. Trate o download como um protótipo de base de código: execute-o localmente, revise-o e refatore-o antes de construí-lo.

Painel de bate-papo Figma Make mostrando 15 alterações de código, Revisar alterações e botões Criar PR e um menu de ramificação com Criar nova ramificação
Imagem: Figma. Revise as alterações de código que Make produziu e trabalhe nas ramificações.

Mova o design de volta para Figma

Nos planos pagos, você pode copiar a visualização atual como camadas de design e colá-las no Figma Design. As camadas são editáveis, mas são um instantâneo. Eles não são interativos, não estão vinculados ao arquivo Make e não estão vinculados automaticamente ao seu sistema de design.

Limites Figma Make a saber antes de começar

  • A maioria dos recursos precisa de uma licença completa em um plano pago, e os créditos podem acabar rapidamente em grandes compilações.
  • Ele foi desenvolvido para protótipos e aplicativos simples. O software de produção ainda precisa de revisão de engenharia, testes, segurança e manutenção.
  • As alterações feitas nas camadas copiadas em Figma Design não retornam para o arquivo Make.
  • Se você solicitar que o modelo use Supabase e a integração não estiver conectada, ele poderá gerar código simulado em vez de uma conexão funcional.
  • Os controles e análises de SEO são mínimos para sites publicados.
  • Você não pode entregar um link Figma e esperar que ele leia o arquivo. Anexe ou cole a moldura.

Se você precisar de um código front-end real, um clone de site ou um aplicativo fora do Figma, procure uma alternativa como Anima Playground. Nós os comparamos honestamente em Figma Make x Anima Playground.

Ideias imediatas para Figma Make

Prompts específicos que nomeiam o usuário, a tarefa e os estados produzem melhores resultados iniciais. Experimente estes:

  • “Crie um fluxo de integração de três etapas para um aplicativo de orçamento. Mostre um indicador de progresso, valide cada campo e termine em uma tela de sucesso.”
  • “Transforme o quadro de preços anexado em uma página interativa. Adicione uma alternância mensal e anual e um estado de foco em cada cartão de plano.”
  • “Crie um painel de suporte para um agente que faz a triagem de tickets. Inclua filtros, um estado vazio e um estado de carregamento.”
  • “Faça um protótipo de checkout móvel com checkout de convidado, validação de endereço e confirmação de pedido.”

Crie um aplicativo funcional com Anima Playground

Prefere um site ou aplicativo real que você possa exportar e enviar? Descreva-o e Anima o construirá.

Perguntas frequentes sobre Figma Make

O que é Figma Make?

Figma Make é a ferramenta prompt-to-app orientada por IA do Figma. Ele transforma um prompt ou design Figma existente em um protótipo funcional, aplicativo da web ou interface de usuário interativa que você pode visualizar, editar no chat ou código e publicar.

O Figma Make é gratuito?

Os planos Starter podem explorar Figma Make gratuitamente com limites, incluindo 500 créditos de IA por mês e um limite diário. Assentos completos em planos pagos recebem mais créditos e recursos como contexto da biblioteca da equipe, modo de plano, compartilhamento e publicação. Os planos mudam, então verifique os preços do Figma.

Como faço para usar o Figma Make?

Em seus rascunhos Figma, clique em Make, escreva um prompt no chat, anexe designs ou contexto de estilo se os tiver, envie e refine o resultado com chat, apontar e editar ou editor de código. Em seguida, compartilhe, publique ou exporte.

O Figma Make pode exportar código?

Sim. Os usuários com licença Full ou Dev podem baixar o código de um arquivo Make como um ZIP na guia Arquivos. É melhor tratá-lo como um protótipo de base de código que você revisa antes do uso em produção.

Posso publicar um aplicativo Figma Make?

Sim. As licenças completas podem ser publicadas em um URL público figma.site, e os usuários iniciantes podem publicar publicamente apenas se também publicarem no Figma Community. Você pode adicionar um domínio personalizado em planos suportados, e os aplicativos publicados não são indexados pelos mecanismos de pesquisa por padrão.

Qual é a diferença entre Figma Make e Anima Playground?

Figma Make constrói protótipos e aplicativos dentro do ecossistema Figma. Anima Playground é um espaço de trabalho independente que começa a partir de prompts, designs Figma, URLs ou imagens e produz HTML ou React editáveis ​​que você pode exportar, entregar e publicar. Veja nossa comparação para obter detalhes.

|

Co-founder & CEO