'%3E%3Crect x='-4.10352' y='0.1875' width='171.875' height='171.875' rx='85.9375' fill='%230C5238'/%3E%3Crect x='82.5566' y='-9.2085' width='133.93' height='133.93' rx='22.7014' transform='rotate(45 82.5566 -9.2085)' fill='%23F79CFF'/%3E%3Crect x='144.375' y='23.677' width='123.75' height='123.75' rx='61.875' transform='rotate(90 144.375 23.677)' fill='%23FF6D38'/%3E%3Crect x='106.562' y='26.198' width='119.396' height='48.125' rx='24.0625' transform='rotate(90 106.562 26.198)' fill='%23252525'/%3E%3Crect x='106.562' y='62.8645' width='48.125' height='48.125' transform='rotate(90 106.562 62.8645)' fill='%2312A720'/%3E%3Cpath d='M106.553 86.927L99.5232 103.942L82.5526 110.99L65.5819 103.942L58.5524 86.927L65.5819 69.9122L82.5526 62.8645L99.5233 69.9122L106.553 86.927Z' fill='%23FFFF00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3971_7584'%3E%3Crect width='165' height='92.8125' fill='white' transform='translate(0 0.1875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A)
Erstelle einen Prototypen mit KI
Hinweis: Die KI-Funktionen von Figma sind derzeit in der Beta-Version kostenlos, es können jedoch Nutzungsbeschränkungen gelten. Sobald sie allgemein verfügbar sind, werden wir dich über die Preise informieren.
Mit Figma AI kannst du mit wenigen Klicks Prototyping-Interaktionen zwischen deinen Designs erstellen. Dies beschleunigt und vereinfacht den Prozess der Erstellung eines interaktiven Prototyps. Leitfaden für das Prototyping in Figma →
So funktioniert es
Mit Prototyp erstellen kannst du Interaktionen und Verbindungen zwischen Rahmen in deiner Auswahl erstellen. Mit der Aktion „Prototyp erstellen“ kannst du unter anderem Folgendes tun:
- Einfache Flows zwischen einer Auswahl von Rahmen der obersten Ebene erstellen
- Interaktionen zu den Schaltflächen „Zurück“ oder „Weiter“ hinzufügen
- Link zu einzelnen Frames aus einem Navigationsmenü
Dies ist hilfreich, wenn du aus deinen Designs schnell einen grundlegenden Prototyp-Flow erstellen möchtest. Du kannst jede Interaktion jederzeit weiter anpassen oder deinem Prototyp weitere Interaktionen hinzufügen.
Eine einheitliche Benennung der Ebenen kann zur Verbesserung der Figma AI-Ausgabe beitragen. Erfahre, wie du Ebenen mit Figma AI umbenennst →
Erstelle einen Prototypen mit KI
- Wähle auf der Arbeitsfläche die Rahmen aus, zwischen denen du Interaktionen erstellen möchtest.
- Öffne den Tab Prototyp in der rechten Seitenleiste.
- Klicke im Abschnitt Interaktionen auf Prototyp erstellen.
Sobald Figma AI das Hinzufügen von Interaktionen zu deinen Designs abgeschlossen hat, siehst du unten auf der Seite ein Banner, das dir eine Vorschau der Interaktionen ermöglicht. Dadurch wird der aktuelle Flow als Prototyp in der Inline-Vorschau geöffnet.
Um alle Interaktionen zu akzeptieren, klicke auf Behalten.
Änderungen am Prototyp vornehmen
Du kannst alle von Figma AI hinzugefügten Interaktionen bearbeiten oder entfernen sowie manuell weitere Interaktionen hinzufügen. Erfahre, wie du Prototyp-Interaktionen erstellst und bearbeitest →
- Klicke auf eine Verbindung, um eine bestimmte Interaktion auszuwählen
- Die Ansicht Interaktionen wird auf der Arbeitsfläche geöffnet, wo du nach Bedarf Änderungen vornehmen kannst.
- Um diese Interaktion zu entfernen, findest du die Interaktion in der rechten Seitenleiste. Klicke auf um sie zu entfernen. Alternativ drückst du Löschen auf deiner Tastatur.
- Um alle Verbindungen auf der aktuellen Seite zu entfernen, klicke mit der rechten Maustaste auf die Arbeitsfläche und wähle Alle Verbindungen entfernen aus.