Figma
Figma, Inc. · Produktivität · Business
Figma ist eine Designplattform im Browser, auf der Teams Oberflächen, Prototypen und Websites bauen, mit KI-Agenten, die Eingaben in bearbeitbare Entwürfe und lauffähigen Code auf derselben Zeichenfläche umsetzen.
Über Figma
About
Was ist Figma
Figma ist ein KI-Design-Tool, das im Browser läuft, auch wenn die manuelle Arbeit auf der Zeichenfläche im Mittelpunkt bleibt. Teams zeichnen damit Bildschirme, bauen Prototypen, pflegen ein gemeinsames Designsystem und übergeben die Arbeit an die Entwicklung, ohne ständig Dateien hin und her zu exportieren.
Das Produkt reicht längst über Interface-Design hinaus. In einer Datei können ein Whiteboard in FigJam, eine Präsentation, eine Illustration in Figma Draw, ein Marketingmotiv in Figma Buzz und eine mit Figma Sites veröffentlichte Seite liegen. Figma Make macht aus einer Eingabe oder einem vorhandenen Frame eine lauffähige App. Der Figma-Agent arbeitet über all diesen Werkzeugen: Er bearbeitet Ebenen, erzeugt Shader und baut aus einer Beschreibung ein kleines eigenes Tool.
Zusammengehalten wird das Ganze von der Datei. Designer, Redakteure und Entwickler öffnen dieselbe Zeichenfläche, kommentieren an der exakten Stelle und sehen Änderungen sofort. Die Entwicklung bekommt Maße, Assets und Codeschnipsel über den Dev Mode, und der Figma MCP-Server gibt denselben Kontext an externe Coding-Agenten weiter.
Die Grenzen sind vor allem kaufmännisch. Tarife werden pro Sitz abgerechnet, und jeder Sitztyp schaltet andere Funktionen frei. KI-Funktionen laufen über ein monatliches Guthaben, wer den Agenten täglich nutzt, zahlt also mehr als den Tarifpreis. Mehrere neuere Werkzeuge, darunter Sites und Buzz, sind weiterhin als Beta gekennzeichnet, ihre Oberflächen und Limits ändern sich daher zwischen Releases.
Erste Schritte
- Legen Sie ein kostenloses Konto auf figma.com an, per E-Mail, Google-Konto oder SSO Ihres Unternehmens. Der Starter-Tarif verlangt keine Kreditkarte.
- Öffnen Sie eine Designdatei und wählen Sie ein Frame-Format für den Bildschirm, an dem Sie arbeiten, oder starten Sie mit einer Vorlage aus der Community.
- Arbeiten Sie mit Frames, Auto Layout und Komponenten. Sobald Farben, Textstile und Komponenten im Team feststehen, veröffentlichen Sie sie in einer gemeinsamen Bibliothek.
- Starten Sie die Präsentation, um den Prototyp zu testen, oder öffnen Sie Figma Make und beschreiben Sie die App, die laufen soll.
- Laden Sie das Team per Link oder E-Mail ein, weisen Sie den Sitztyp zu und öffnen Sie den Dev Mode, wenn die Umsetzung beginnt.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von Figma.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Produktdesigner in Softwarefirmen
- Verantwortliche für das Designsystem
- Gründer und Marketingteams ohne Designausbildung
Aufgaben
- Einen mobilen Ablauf entwerfen und testen
- Aus einer vagen Idee etwas Klickbares machen
- Einen fertigen Screen an die Entwicklung übergeben
Szenarien
- Ein verteiltes Team prüft Arbeit über mehrere Zeitzonen
- Ein Brand-Team braucht bis Freitag fünfzig Social-Varianten
- Ein Startup will die Marketingseite diese Woche online bringen
Wichtigste Funktionen
Gemeinsame Zeichenfläche und Echtzeit-Bearbeitung
Alle in einer Datei sehen denselben Cursor, dieselben Kommentare und denselben Ebenenbaum. Zwei Designer arbeiten gleichzeitig im selben Frame, und eine Entwicklerin prüft eine Komponente, während das Design noch entsteht. Branches halten ein riskantes Redesign aus der Hauptdatei, bis jemand es freigegeben hat.
Figma-Agent für Designarbeit
Der Agent nimmt eine Eingabe und arbeitet auf der Zeichenfläche: Er entwirft einen Screen, gestaltet eine Auswahl um, erzeugt einen Shader oder baut ein kleines Plugin mit den beschriebenen Reglern. Er liest Komponenten und Variablen der Datei, dadurch bleibt das Ergebnis näher am System des Teams als bei einem allgemeinen Bildgenerator. Eigene Skills speichern wiederkehrende Anweisungen, statt sie jedes Mal neu zu tippen.
Figma Make
Figma Make ist ein Werkzeug von der Eingabe zur App, verfügbar für Full-Sitze in bezahlten Tarifen. Sie hängen ein Design oder Bild an, beschreiben das Verhalten und bekommen eine laufende App mit bearbeitbarem Code im Files-Tab. Das Ergebnis lässt sich als Website veröffentlichen, was taugt, um eine Produktidee zu testen, bevor jemand ein Ticket schreibt.
Code-Ebenen und Figma Motion
Code-Ebenen legen Code als Material auf die Zeichenfläche, neben Vektoren und Bildern. Eine Design-Ebene wird per Klick zur interaktiven Ebene, und Änderungen fließen in bearbeitbare Frames zurück. Figma Motion ergänzt eine Timeline mit Keyframes und Beschleunigungskurven, diese Daten bleiben im Dev Mode lesbar oder gehen als CSS, JSON, React, MP4 oder GIF heraus.
Dev Mode und Übergabe per MCP
Der Dev Mode gibt der Entwicklung eine Prüfansicht mit Maßen, Komponentennamen und kopierfertigem Code. Der Figma MCP-Server reicht diesen Kontext an Agenten wie Cursor oder Claude Code weiter, sodass der Agent die echte Struktur liest und nicht aus einem Screenshot rät. Beides setzt einen Dev- oder Full-Sitz voraus, der MCP-Server läuft über die Desktop-App.
Designsysteme mit Variablen und Bibliotheken
Variablen speichern Farben, Abstände und Modi an einer Stelle, eine Änderung läuft in jede Datei, die die Bibliothek nutzt. Teams pflegen helles und dunkles Theme oder getrennte Markenmodi, ohne Komponenten zu duplizieren. Dieser Teil spart im großen Maßstab die meiste Zeit und bestraft nachlässige Benennung am härtesten.
Vor- und Nachteile
Vorteile
- Der ganze Ablauf liegt in einem Browser-Tab, vom ersten Wireframe über den Prototyp-Link bis zur Übergabe an die Entwicklung.
- Agent und Figma Make arbeiten mit echten Komponenten und Variablen, deshalb passt das Ergebnis meist zum vorhandenen Designsystem.
- Dev Mode und der Figma MCP-Server ersparen die übliche Runde aus Screenshots und Rotlinien zwischen Design und Entwicklung.
- Echtzeit-Zusammenarbeit und verankerte Kommentare funktionieren in verteilten Teams, und die Versionshistorie macht das Zurücksetzen einfach.
- Der kostenlose Starter-Tarif reicht zum Ausprobieren, und die Community liefert Vorlagen und Plugins für fast jeden Ablauf.
Nachteile
- KI-Nutzung wird in Credits abgerechnet. Ein Team, das den Agenten täglich einsetzt, kauft zusätzliche Credits über das Monatsguthaben hinaus.
- Sitztypen werden getrennt berechnet, ein kleines Team zahlt Full-, Dev- und Collab-Sitze schneller als erwartet.
- Große Dateien mit vielen Prototypen laden auf älteren Notebooks langsam, und Echtzeit-Bearbeitung braucht eine stabile Verbindung.
- Sites, Buzz und mehrere Agent-Funktionen sind Beta, Limits und Oberflächen ändern sich ohne viel Vorlauf.
Häufige Fragen
Figma dient dem Entwurf von Oberflächen, dem Bau klickbarer Prototypen, der Pflege von Designsystemen und der Übergabe an die Entwicklung. Dieselbe Plattform deckt inzwischen Whiteboards, Präsentationen, Illustrationen, Marketingmotive und per Eingabe erzeugte Apps ab.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu Figma.
Alternativen zu Figma
Base Code
Base44 (Wix) · Coding · ProduktivitätBase Code ist eine geteilte Cloud-Entwicklungsumgebung von Base44. Das Team beschreibt Änderungen an einem bestehenden GitHub-Repository im Chat, prüft sie in der Vorschau und reicht sie als Pull Request ein.
Knocket
Knocket (Tencent RTC team) · Produktivität · Business · ChatbotKnocket ist ein kostenloses Werkzeug für Live-Chat und Kontaktseite: Besucher schreiben über Ihre Website, Ihre App oder einen Link, und Sie antworten aus Telegram oder einem einzigen Posteingang.
FloorGen
Vinit Kumar (FloorGen) · Produktivität · KI aus ChinaFloorGen ist ein Grundriss-Ersteller im Browser, der aus einem Satz oder einer Skizze einen bearbeitbaren 2D-Plan und einen 3D-Rundgang macht. Export als PDF, DXF oder Video, Zeichnen ohne Konto.