Zu Hauptinhalten gehen

Deine KI-Navigationsleiste direkt auf der Arbeitsfläche

Erstelle Navigationsleisten, Menüs und Navigationskomponenten mit KI – direkt in Figma Design, mit deinem echten Design System. Beschreibe, was du brauchst, und sieh es in Sekunden entstehen, bereit zum Verfeinern.

Probier Figmas KI-Agenten aus
  • AirBnb
  • Atlassian
  • Dropbox
  • Duolingo
  • GitHub
  • Microsoft
  • Netflix
  • The New York Times
  • Pentagram
  • Slack
  • Stripe
  • Zoom

Navigationsoptionen in höherer Detailtreue erkunden

Der Agent generiert echte Navigationsleisten-Komponenten auf deiner Arbeitsfläche aus deiner Design-Bibliothek, sodass jede Option von Anfang an produktionsreif ist.

Figma-Arbeitsfläche zeigt ein von KI generiertes Designlayout, das erkundet wirdFigma-Arbeitsfläche zeigt ein von KI generiertes Designlayout, das erkundet wird

Navigationsleisten mit deinem Design System erstellen

Figmas Agent baut Navigationsleisten mit deinen echten Komponenten, Tokens und Variablen – keine Platzhalter-UI, die du später neu bauen musst. Jede generierte Navigationsleiste passt vom ersten Prompt an zu deinem Design System.

Figma-KI-Agenten-Panel zeigt eine Massenbearbeitung, die auf ein Design angewendet wirdFigma-KI-Agenten-Panel zeigt eine Massenbearbeitung, die auf ein Design angewendet wird

Lästige Kleinarbeit sparen, im Flow bleiben

Spar dir das mühsame Ausrichten von Icons, Abstände setzen bei Links und das händische Konfigurieren von Dropdowns. Beschreibe die Navigationsstruktur, die du brauchst, und lass den Agenten sie aufbauen, während du dich auf die größeren Entscheidungen konzentrierst.

Figma-KI-Agenten-Panel zeigt, wie Team-Feedback in ein Design integriert wirdFigma-KI-Agenten-Panel zeigt, wie Team-Feedback in ein Design integriert wird

Team ausrichten, den Kreis schließen

Generierte Navigationsleisten leben in eurer gemeinsamen Datei, sodass Entwicklerinnen und Stakeholder dasselbe sehen wie du. Beim Export geht nichts verloren – alle arbeiten mit derselben verlässlichen Grundlage.

Die Funktionen hinter der Generierung

Ein genauerer Blick darauf, was den Figma-Agenten auszeichnet – entwickelt für die Art, wie Design-Teams wirklich arbeiten.

  • Screenshot zeigt Figma-KI-Agenten, der mit einer Komponentenbibliothek verbunden ist und automatisch Markentokens auf ein Design anwendetScreenshot zeigt Figma-KI-Agenten, der mit einer Komponentenbibliothek verbunden ist und automatisch Markentokens auf ein Design anwendet

    Design-Bibliothek verbinden

    Verweise den Agenten auf deine Design-Bibliothek, damit jede generierte Navigationsleiste deine echten Komponenten, Icons und Abstands-Tokens nutzt – keine generischen Platzhalter.

  • Screenshot von mehreren gleichzeitigen KI-Design-Prompts in FigmaScreenshot von mehreren gleichzeitigen KI-Design-Prompts in Figma

    Paralleles Prompten

    Erkunde einen sticky Header, ein Hamburger-Menü und ein Mega-Menü gleichzeitig. Führe mehrere Prompts parallel aus, um verschiedene Richtungen ohne Wartezeit zu vergleichen.

  • Screenshot eines geteilten Figma-KI-Konversationsthreads mit DesignkommentarenScreenshot eines geteilten Figma-KI-Konversationsthreads mit Designkommentaren

    Teilbare Threads

    Teile einen Thread, und dein Team sieht den vollständigen Prompt, den Kontext und den Verlauf aller Iterationen. Keine separate Übergabe nötig – alle verstehen, wie die Navigationsleiste entstanden ist.

  • Screenshot zeigt Figma-KI-Agenten-Fähigkeiten zur Automatisierung von Design-WorkflowsScreenshot zeigt Figma-KI-Agenten-Fähigkeiten zur Automatisierung von Design-Workflows

    Fähigkeiten

    Verwandle deinen Navigationsleisten-Workflow in eine wiederverwendbare Fähigkeit. Packe Prompts für Header, Footer oder mobile Menüs in Befehle, die dein ganzes Team ausführen kann.

Figma fühlt sich an wie eine natürliche Verlängerung meiner Hand. Ich entwickle meine Design-Ideen auf der Arbeitsfläche, und jetzt übernimmt der Agent die letzte Etappe. Mit meinen verbundenen Design-Bibliotheken komme ich schneller vom Design zum Code als je zuvor.

Andy Madrick
Product Designer bei Notion

Notion logo

Mit dem Figma-Agenten starten

  • Öffne den Agenten

    Wähle Agents in der linken Seitenleiste aus oder drücke CMD + Enter. Füge einen Frame hinzu, in dem du arbeiten willst, oder wähle ein bestehendes Layout, das Navigation braucht.

  • Beschreibe deine Navigationsleiste

    Sag dem Agenten, was du brauchst – ein sticky Header mit Logo und Links, ein mobiles Hamburger-Menü, ein Mega-Menü mit Dropdowns. Verweise auf deine Design-Bibliothek für passgenaue Komponenten.

  • Auf der Arbeitsfläche prüfen

    Prüfe die generierte Navigationsleiste auf deiner Arbeitsfläche. Verfeinere sie im selben Thread oder starte einen parallelen, um ein anderes Navigationsmuster zu erkunden.

  • Weiter iterieren

    Prompte erneut, um Abstände anzupassen, Icons hinzuzufügen oder responsive Varianten auszuprobieren. Alles bleibt bearbeitbar, sodass du jederzeit von Hand nachjustieren kannst.

Zum Agenten-Profi werden

  • Der Design-Agent von Figma ist da

    Sieh dir Figmas KI-Agenten in Aktion an und erfahre, wie du ihn in deinen eigenen Workflows einsetzen kannst.

    Mehr erfahren
  • Figma-Agenten-Spielplatz-Intro-Bildschirm mit einem 'Start'-Button und einem Beispiel-Chat-Prompt: 'Hey Figma, kannst du verschiedene Layouts für meine Lese-App erstellen?Figma-Agenten-Spielplatz-Intro-Bildschirm mit einem 'Start'-Button und einem Beispiel-Chat-Prompt: 'Hey Figma, kannst du verschiedene Layouts für meine Lese-App erstellen?

    Mit dem Figma-Agenten arbeiten

    Ein praxisnaher Spielplatz, um die Fähigkeiten des Figma-Agenten zu erkunden – von Massenbearbeitungen bis zur Umsetzung von Feedback – mit integrierter Schritt-für-Schritt-Anleitung.

    Loslegen

  • So nutzt du den Figma-Agenten in deinen Design-Workflows

    Lerne mit einem Schritt-für-Schritt-Tutorial vom Figma-Team, wie du den Figma-Agenten in deinen Design-Workflows einsetzt.

    Jetzt ansehen

FAQ

Ein KI-Navigationsleisten-Generator hilft dir, Navigationsleisten, Menüs und Header-Komponenten zu erstellen, indem du beschreibst, was du brauchst, statt von Grund auf zu bauen. Mit Figmas Agent passiert die Generierung direkt auf deiner Arbeitsfläche, mit deinen bestehenden Komponenten und Stilen. Das Ergebnis ist vollständig bearbeitbar und bereit zum Weiterentwickeln. Man spricht hierbei auch von einer Navbar.

Öffne den Agenten in der linken Seitenleiste oder drücke CMD + Enter in Figma Design. Beschreibe die Navigationsleiste, die du willst – zum Beispiel Header mit Logo, horizontalen Links und einem CTA-Button. Der Agent generiert sie auf deiner Arbeitsfläche mit deiner Design-Bibliothek. Verfeinere mit Folge-Prompts, bis alles passt.

Figmas Agent kann verschiedene Varianten deiner Navigationsleiste für Desktop-, Tablet- und Mobile-Breakpoints generieren. Beschreibe das responsive Verhalten, das du brauchst – zum Beispiel ein Zusammenklappen zu einem Hamburger-Menü auf Mobilgeräten – und der Agent baut jede Variante. Du kannst parallele Prompts ausführen, um mehrere responsive Ansätze gleichzeitig zu erkunden.

Jede vom Agenten generierte Navigationsleiste landet auf deiner Arbeitsfläche als vollständig bearbeitbare Ebenen und Komponenten. Du kannst im selben Thread erneut prompten, Eigenschaften von Hand anpassen oder Komponenten aus deiner Bibliothek austauschen. Nichts wird plattgedrückt oder weggesperrt.

Der Figma-Agent ist in allen kostenpflichtigen Figma-Plänen verfügbar. Du findest ihn in der linken Seitenleiste in Figma Design. Während der aktuellen offenen Beta-Phase verbraucht er keine KI-Credits – der perfekte Zeitpunkt also, um ihn auszuprobieren, zu experimentieren und uns dein Feedback zu geben.

Schneller entwickeln mit dem Figma-Agenten