Vai al contenuto principale

Genera barre di navigazione sul canvas

Crea barre di navigazione, menu e componenti di navigazione con AI direttamente in Figma Design, usando il tuo vero design system. Descrivi ciò che ti serve e ottieni un risultato in pochi secondi, pronto da perfezionare.

Prova l'agente AI di Figma
  • AirBnb
  • Atlassian
  • Dropbox
  • Duolingo
  • GitHub
  • Microsoft
  • Netflix
  • The New York Times
  • Pentagram
  • Slack
  • Stripe
  • Zoom

Esplora le opzioni di navigazione con alta fedeltà

L'agente usa la tua libreria di design per generare componenti di navigazione reali direttamente sul canvas, così ogni opzione è già pronta per la produzione.

Canvas di Figma che mostra l'esplorazione di un layout di design generato dall'AICanvas di Figma che mostra l'esplorazione di un layout di design generato dall'AI

Genera barre di navigazione allineate al tuo design system

L'agente di Figma costruisce le barre di navigazione con componenti, token e variabili reali — non con placeholder da rifare da capo. Ogni barra di navigazione generata è allineata al design system fin dal primo prompt.

Pannello dell'agente AI di Figma che mostra una modifica in blocco applicata a un designPannello dell'agente AI di Figma che mostra una modifica in blocco applicata a un design

Meno lavoro manuale, più concentrazione

Niente più allineamento manuale delle icone, spaziatura dei link o configurazione dei menu a tendina. Descrivi la struttura di navigazione che ti serve e lascia che sia l'agente a costruire la base, così puoi concentrarti sulle decisioni che contano davvero.

Pannello dell'agente AI di Figma che mostra il feedback del team integrato in un designPannello dell'agente AI di Figma che mostra il feedback del team integrato in un design

Allinea il team, elimina i fraintendimenti

Le barre di navigazione generate vivono nel file condiviso, quindi sviluppatori e stakeholder vedono esattamente quello che vedi tu. Niente si perde nell'esportazione: tutti lavorano sulla stessa fonte di verità.

Le funzionalità dietro la generazione

Uno sguardo più da vicino a ciò che rende unico l'agente di Figma, pensato per il modo in cui i team di design lavorano davvero.

  • Screenshot che mostra l'agente AI di Figma connesso a una libreria di componenti, con applicazione automatica dei token del brand a un designScreenshot che mostra l'agente AI di Figma connesso a una libreria di componenti, con applicazione automatica dei token del brand a un design

    Collega una libreria di design

    Collega l'agente alla tua libreria di design e ogni barra di navigazione generata userà componenti, icone e token di spaziatura reali — mai placeholder generici.

  • Screenshot di più prompt di design AI eseguiti contemporaneamente in FigmaScreenshot di più prompt di design AI eseguiti contemporaneamente in Figma

    Prompt in parallelo

    Esplora header sticky, menu hamburger e mega nav tutti insieme. Esegui più prompt contemporaneamente per confrontare più direzioni senza aspettare.

  • Screenshot di un thread di conversazione AI di Figma condiviso, con commenti sul designScreenshot di un thread di conversazione AI di Figma condiviso, con commenti sul design

    Thread condivisibili

    Condividi un thread e il tuo team vedrà l'intero prompt, il contesto e la cronologia delle iterazioni. Niente handoff separati: tutti capiscono come è stata costruita la barra di navigazione.

  • Screenshot che mostra le opzioni di skill dell'agente AI di Figma per automatizzare i flussi di lavoro di designScreenshot che mostra le opzioni di skill dell'agente AI di Figma per automatizzare i flussi di lavoro di design

    Trasforma in skill

    Trasforma i tuoi flussi di lavoro per la navigazione in skill riutilizzabili. Raggruppa i prompt per header, footer e menu mobile in comandi che tutto il team può eseguire.

Figma sembra un'estensione naturale delle mie mani. Elaboro le idee di design sul canvas e lascio che sia l'agente a portarle a termine. Con la libreria di design collegata, si passa dal design al codice più velocemente che mai.

Andy Madrick
Product Designer, Notion

Logo di Notion

Inizia a usare l'agente di Figma

  • Apri l'agente

    Seleziona 'Agente' nella barra laterale sinistra o premi CMD + Invio. Aggiungi una cornice su cui lavorare oppure seleziona un layout esistente che ha bisogno di navigazione.

  • Descrivi la tua barra di navigazione

    Racconta all'agente cosa ti serve: un header sticky con logo e link, un menu hamburger per mobile, una mega nav con menu a tendina. Specifica la tua libreria di design per usare i componenti corretti.

  • Rivedi sul canvas

    Rivedi la barra di navigazione generata direttamente sul canvas. Modifica nello stesso thread oppure avvia un thread parallelo per esplorare un altro pattern di navigazione.

  • Continua a iterare

    Fai un altro prompt per regolare la spaziatura, aggiungere icone o esplorare varianti responsive. Tutto rimane completamente modificabile, così puoi sempre affinare manualmente.

Diventa un esperto dell'agente

  • L'agente di design di Figma è arrivato

    Guarda l'agente AI di Figma in azione e scopri come integrarlo nei tuoi flussi di lavoro.

    Scopri di più
  • Schermata introduttiva del playground dell'agente Figma con un pulsante 'Inizia' e un prompt di chat di esempio: 'Ehi Figma, puoi creare diversi layout per la mia app di lettura?'Schermata introduttiva del playground dell'agente Figma con un pulsante 'Inizia' e un prompt di chat di esempio: 'Ehi Figma, puoi creare diversi layout per la mia app di lettura?'

    Lavora con l'agente di Figma

    Un playground pratico per esplorare le funzionalità dell'agente di Figma — dalle modifiche in blocco all'implementazione dei feedback — con una guida passo passo integrata.

    Inizia

  • Come usare l'agente di Figma nei tuoi flussi di lavoro di design

    Scopri come usare l'agente di Figma nei tuoi flussi di lavoro di design con un tutorial passo passo del team Figma.

    Guarda ora

FAQ

Un generatore di barre di navigazione AI (o generatore di navbar, come viene chiamato anche in ambito sviluppo) è uno strumento che crea barre di navigazione, menu e componenti header descrivendo semplicemente ciò che ti serve, invece di costruirli da zero. Con l'agente di Figma, la generazione avviene direttamente sul canvas di design, usando componenti e stili reali. Il risultato è completamente modificabile e pronto per essere perfezionato.

Apri l'agente dalla barra laterale sinistra in Figma Design oppure premi CMD + Invio. Descrivi la barra di navigazione che ti serve — ad esempio un header con logo, link orizzontali e un pulsante CTA. L'agente la genererà sul canvas usando la tua libreria di design. Affina con altri prompt finché non è come la vuoi.

L'agente di Figma può generare varianti diverse della barra di navigazione per desktop, tablet e mobile. Descrivi il comportamento responsive che ti serve — ad esempio un menu che si trasforma in hamburger su mobile — e l'agente costruirà ogni variante. Puoi anche eseguire prompt in parallelo per esplorare più approcci responsive insieme.

Ogni barra di navigazione generata dall'agente viene creata come livelli e componenti completamente modificabili sul canvas. Fai un altro prompt nello stesso thread per regolare, modifica manualmente le proprietà o sostituisci i componenti dalla libreria. Niente viene appiattito o bloccato.

L'agente di Figma è disponibile su tutti i piani Figma a pagamento. Lo trovi nella barra laterale sinistra di Figma Design. Durante l'attuale beta aperta non consuma crediti AI: è il momento ideale per esplorarlo, sperimentare e condividere il tuo feedback con noi.

Lavora più velocemente con l'agente di Figma