Figma AI bündelt Assistenten im Designprozess: von Änderungen an Ebenen und Bildern bis zu Prototypen in Make. Die Funktionen hängen vom Figma-Produkt, dem Seat des Nutzers und den Teamberechtigungen ab.

AI-Tools auf der offiziellen Figma-Website. Screenshot der Produktseite. Quelle öffnen

AI im Umfeld des Designsystems

Bei einem Teamprodukt genügt es nicht, eine ähnliche Schaltfläche zu zeichnen: Es muss die richtige Komponente mit den benötigten Zuständen verwendet werden. Figma AI hilft bei der Arbeit mit bestehendem Designkontext: Elemente suchen, wiederkehrende Änderungen ausführen, Bilder bearbeiten und Layouts präzisieren. Dies ist ein Funktionsumfang innerhalb von Figma und kein separates Universalmodell mit identischen Funktionen in allen Modi.

Design, Bilder und Prototypen

Die aktuelle Seite beschreibt einen AI-Agenten, Bildbearbeitung, Texttools und Figma Make, um eine Idee oder ein Design in einen Prototyp und eine Webanwendung umzuwandeln. Der konkrete Zugriff unterscheidet sich je nach Produkt und Tarif. Neue Funktionen und Vorabversionen dürfen nicht automatisch als für alle Mitglieder enthalten gelten.

Für visuelles Material gibt es Funktionen zum Entfernen des Hintergrunds, zur Bildänderung und zur Bilderzeugung. Für eine funktionsfähige Benutzeroberfläche sind weitere Details wichtig: konsistente Komponenten, Hover- und Fehlerzustände, lange Texte und das Verhalten bei unterschiedlichen Größen. Eine gelungene Vorschau allein bestätigt diese Eigenschaften nicht.

Beispiel: Eine Einstellungsansicht abstimmen

Nehmen Sie einen Demo-Bildschirm mit Benachrichtigungen und bitten Sie, mehrere Optionen für die Gruppierung von Parametern vorzubereiten. Geben Sie an, welche Komponenten und Texte bereits genehmigt wurden und welche geändert werden können. Setzen Sie keine echten Benutzerdaten in Beispiele, nur um überzeugend zu sein.

Prüfen Sie nach der Bearbeitung, ob die Namen der Einstellungen, die Bedeutung der Schalter und der Standardzustand erhalten geblieben sind. Gehen Sie im Prototyp den Ablauf vorwärts und rückwärts durch. Prüfen Sie Tastaturfokus und kleine Bildschirme gesondert: Die optische Übereinstimmung mit dem Designsystem garantiert keine Barrierefreiheit.

Speichern Sie die genehmigte Version in einem gemeinsamen Komponentensystem. Andernfalls erzeugt die nächste Bearbeitung des benachbarten Bildschirms wieder ähnliche, aber leicht unterschiedliche Schalter, Einrückungen und Namen derselben Einstellung.

Was MCP bietet und wo der externe Agent arbeitet

Der offizielle MCP-Server überträgt den Agenten den strukturierten Kontext des Layouts und ermöglicht es Ihnen, den Inhalt der Leinwand in unterstützten Modi zu ändern. Die Dokumentation unterscheidet die Rolle des Servers und die Rolle des AI-Agenten: Informationen über Komponenten und Stile werden nicht automatisch in vorgefertigten Produktionscode umgewandelt.

Figma Make und programmgesteuerte Integrationen erfüllen unterschiedliche Aufgaben. Die Übergabe eines Layouts an Entwickler, die Erstellung eines interaktiven Prototyps und Änderungen an einem tatsächlichen Repository erfordern jeweils eigene Prüfungen und Rechte. Einschränkungen für Client, Seat und Aufrufhäufigkeit sind in der Entwicklerhilfe beschrieben.

Credits, Seats und Teamverwaltung

Figma verwendet ein System von AI-Credits. Diese sind in Tarifen und Seats enthalten, unterscheiden sich aber in Menge, Erneuerungsintervall und verfügbaren Aktionen. Einzelne kleine Funktionen verbrauchen keine Credits; bei Agentenaufgaben hängen die Kosten von Komplexität und Kontext ab. Genaue Limits und Preise müssen anhand der aktuellen Tabelle geprüft werden.

Administratoren können den AI-Zugriff und die Nutzungsbedingungen für Materialien verwalten. Prüfen Sie vor dem Hochladen eines vertraulichen Projekts die Organisationseinstellungen und die Erlaubnis, Kontext an einen externen Agenten weiterzugeben. Führen Sie nach der Generierung die übliche gestalterische und technische Abnahme durch: Der AI-Assistent ersetzt sie nicht.

Für welche Aufgaben geeignet

Verfeinern Sie die Benutzeroberfläche unter Berücksichtigung des Designsystems
Erstellen Sie einen interaktiven Prototyp in Make
Bearbeiten Sie Bilder und Text innerhalb des Designs
Strukturierten Kontext über MCP an einen Agenten übergeben

Funktionen

Stärken

AI ist in den editierbaren Designprozess integriert
Arbeiten mit Komponenten, Text und Bildern
Make für Prototypen und Web-Anwendungen
Offizielles Entwicklungsökosystem und MCP

Zu berücksichtigen

Einschränkungen

Die Funktionen hängen von Produkt, Seat, Tarif und Administratoreinstellungen ab
MCP-Kontext ist kein vorgefertigter Produktionscode
Aktionen des Agenten verbrauchen je nach Aufgabe Credits

Auswahl und Bedingungen

Kostenlose Nutzung: Ja
Testphase: Nicht bestätigt
Keine Registrierung erforderlich: Nicht bestätigt
Russische Benutzeroberfläche: Nicht bestätigt
Lokale Installation: Nicht bestätigt
API: Ja

„Nicht bestätigt“ bedeutet, dass nicht genügend Informationen vorliegen. Die Funktion kann dennoch verfügbar sein; prüfen Sie die Angaben des Entwicklers.

Eingabeformate: Text, Bild, Layout, Code
Ergebnis: Prototyp, Bild, Code, Layout

Bedingungen

Starter enthält begrenzte AI-Credits. Der Funktionszugriff hängt vom Seat, Produkt und den Administratoreinstellungen ab; für MCP gelten eigene Rechte und Limits.

Von der Aufgabe zum ersten Ergebnis

Praxisbeispiel

Aufgabe: Verfeinern Sie die Benutzeroberfläche unter Berücksichtigung des Designsystems
Was Sie vorbereiten sollten: Beschreibung von drei Bildschirmen zur Terminbuchung bei einer Werkstatt: Dienstleistung wählen, Zeit wählen und bestätigen. Eine eigene Skizze kann beigefügt werden.

Aufgabenbeschreibung oder Prompt

Schlagen Sie einen bearbeitbaren Prototyp dieser Ansichten mit verständlicher Navigation vor. Zeigen Sie den Zustand einer leeren Terminliste und den Fehler bei einem nicht ausgefüllten Feld. Binden Sie echte Terminbuchung und Zahlung vorerst nicht an.

Erwartetes Ergebnis

Erste Layoutentwürfe oder ein Interface-Prototyp. Funktionierende Serverlogik und Produktionsreife werden nicht vorausgesetzt.

So prüfen Sie das Ergebnis

Prüfen Sie Übergänge, Beschriftungen, leere Zustände und die Rückkehr zur vorherigen Ansicht.
Stellen Sie sicher, dass die Elemente auf einem schmalen Bildschirm lesbar sind und ausreichend Platz haben.
Prüfen Sie Barrierefreiheit, den tatsächlichen Exportumfang und erforderliche Komponentenrechte gesondert.

Ein redaktionelles Lernbeispiel für eine Aufgabenbeschreibung, kein Ergebnis eines eigenen Praxistests des Dienstes. Prüfen Sie die Verfügbarkeit des benötigten Modus, die Rechte am Ausgangsmaterial und die Bedingungen für die Nutzung des Ergebnisses.

Details überprüfen

Offizielle Quellen

Die Beschreibung basiert auf den Materialien des Entwicklers. Die Funktionen, Preise und Verfügbarkeit können variieren. Bitte überprüfen Sie die Quelle vor der Verwendung.

Figma AI.