Ir para o conteúdo principal

Seu gerador de barra de navegação com IA, na sua tela

Crie barras de navegação, menus e componentes de navegação com IA — direto no Figma Design usando seu sistema de design real. Descreva o que você precisa e veja tudo pronto em segundos, prontinho para refinar.

Experimente o agente de IA do Figma
  • AirBnb
  • Atlassian
  • Dropbox
  • Duolingo
  • GitHub
  • Microsoft
  • Netflix
  • The New York Times
  • Pentagram
  • Slack
  • Stripe
  • Zoom

Explore opções de navegação com mais fidelidade

O agente gera componentes de navbar reais na sua tela usando sua biblioteca de design, para que cada opção já esteja pronta para produção desde o início.

Tela do Figma mostrando um design gerado por IA sendo exploradoTela do Figma mostrando um design gerado por IA sendo explorado

Gere barras de navegação com seu sistema de design

O agente do Figma constrói barras de navegação usando seus componentes, tokens e variáveis reais — não interfaces placeholder que você vai precisar reconstruir. Cada barra de navegação gerada combina com seu sistema de design desde o primeiro prompt.

Painel do agente de IA do Figma mostrando uma edição em massa aplicada a um designPainel do agente de IA do Figma mostrando uma edição em massa aplicada a um design

Elimine o trabalho repetitivo, fique no fluxo

Esqueça a configuração tediosa de alinhar ícones, espaçar links e configurar dropdowns manualmente. Descreva a estrutura de navegação que você precisa e deixe o agente montá-la enquanto você foca nas decisões mais importantes.

Painel do agente de IA do Figma mostrando comentários da equipe sintetizados em um designPainel do agente de IA do Figma mostrando comentários da equipe sintetizados em um design

Alinhe sua equipe, feche o ciclo

As barras de navegação geradas ficam no seu arquivo compartilhado, então desenvolvedores e stakeholders veem exatamente o que você vê. Nada se perde na exportação: todo mundo constrói a partir da mesma fonte de verdade.

Os recursos por trás da geração

Um olhar mais atento sobre o que diferencia o agente do Figma, construído para a forma como as equipes de design realmente trabalham.

  • Captura de tela mostrando o agente de IA do Figma conectado a uma biblioteca de componentes, aplicando automaticamente tokens de marca a um designCaptura de tela mostrando o agente de IA do Figma conectado a uma biblioteca de componentes, aplicando automaticamente tokens de marca a um design

    Conecte uma biblioteca de design

    Aponte para sua biblioteca de design para que cada barra de navegação gerada use seus componentes, ícones e tokens de espaçamento reais — não placeholders genéricos.

  • Captura de tela de vários prompts de design com IA sendo executados simultaneamente no FigmaCaptura de tela de vários prompts de design com IA sendo executados simultaneamente no Figma

    Prompts em paralelo

    Explore um header fixo, um menu hambúrguer e uma mega navegação ao mesmo tempo. Execute vários prompts simultaneamente para comparar direções sem esperar.

  • Captura de tela de uma thread de conversa de IA do Figma compartilhada com comentários de designCaptura de tela de uma thread de conversa de IA do Figma compartilhada com comentários de design

    Threads compartilháveis

    Compartilhe uma thread e sua equipe vê o prompt completo, o contexto e o histórico de iterações. Sem handoffs separados: todo mundo entende como a barra de navegação foi construída.

  • Captura de tela mostrando opções de habilidades do agente de IA do Figma para automatizar fluxos de trabalho de designCaptura de tela mostrando opções de habilidades do agente de IA do Figma para automatizar fluxos de trabalho de design

    Habilidades

    Transforme seu fluxo de navbar em uma habilidade reutilizável. Empacote prompts para headers, rodapés ou menus mobile em comandos que toda a sua equipe pode executar.

O agente do Figma parece uma extensão natural da minha mão. Eu faço a ideação dos meus designs na tela, e agora o agente leva o trabalho até o fim. Com minhas bibliotecas de design conectadas, consigo ir do design ao código mais rápido do que nunca.

Andy Madrick
Product Designer na Notion

Logotipo da Notion

Comece com o agente do Figma

  • Abra o agente

    Selecione Agentes na barra lateral esquerda ou pressione CMD + Enter. Adicione um frame para trabalhar, ou selecione um design existente que precise de navegação.

  • Descreva sua barra de navegação

    Diga ao agente o que você precisa — um header fixo com logo e links, um menu hambúrguer mobile, uma mega navegação com dropdowns. Aponte para sua biblioteca de design para componentes precisos.

  • Revise na tela

    Confira a barra de navegação gerada na sua tela. Refine na mesma thread ou inicie uma em paralelo para explorar outro padrão de navegação.

  • Continue iterando

    Peça ao agente para ajustar o espaçamento, adicionar ícones ou testar variações responsivas. Tudo continua editável, então você pode ajustar manualmente a qualquer momento.

Torne-se um especialista no agente

  • O agente de design do Figma já chegou

    Veja o agente de IA do Figma em ação e descubra como aplicá-lo nos seus próprios fluxos de trabalho.

    Saiba mais
  • Tela de introdução do playground do agente do Figma com um botão 'Começar' e um prompt de chat de exemplo: 'Ei Figma, você pode criar diferentes layouts para meu aplicativo de leitura?Tela de introdução do playground do agente do Figma com um botão 'Começar' e um prompt de chat de exemplo: 'Ei Figma, você pode criar diferentes layouts para meu aplicativo de leitura?

    Trabalhe com o agente do Figma

    Um ambiente prático para explorar as capacidades do agente do Figma — de edições em massa à implementação de comentários — com orientação passo a passo integrada.

    Começar

  • Como usar o agente do Figma nos seus fluxos de trabalho de design

    Aprenda a usar o agente do Figma nos seus fluxos de trabalho de design com um tutorial passo a passo da equipe do Figma.

    Ver agora

FAQ

Um gerador de barra de navegação com IA ajuda você a criar barras de navegação, menus e componentes de header descrevendo o que você precisa em vez de construir do zero. Com o agente do Figma, a geração da barra de navegação acontece direto na sua tela de design usando seus componentes e estilos existentes. O resultado é totalmente editável e pronto para iterar.

Abra o agente na barra lateral esquerda ou pressione CMD + Enter no Figma Design. Descreva a barra de navegação que você quer — header com logo, links horizontais e um botão de CTA, por exemplo. O agente gera na sua tela usando sua biblioteca de design. Refine com prompts adicionais até ficar bom.

O agente do Figma pode gerar diferentes variações de barra de navegação para breakpoints de desktop, tablet e mobile. Descreva o comportamento responsivo que você precisa — recolher para um menu hambúrguer no mobile, por exemplo — e o agente constrói cada variação. Você pode executar prompts em paralelo para explorar várias abordagens responsivas ao mesmo tempo.

Cada barra de navegação que o agente gera chega na sua tela como camadas e componentes totalmente editáveis. Você pode refinar pedindo mais no mesmo thread, ajustar propriedades manualmente ou trocar componentes da sua biblioteca. Nada é achatado ou bloqueado.

O agente do Figma está disponível em todos os planos pagos do Figma. Você encontra na barra lateral esquerda do Figma Design. Durante o beta aberto atual, ele não consome créditos de IA — então é um bom momento para explorar, experimentar e compartilhar seu feedback com a gente.

Crie mais rápido com o agente do Figma