Figma ist ein browserbasiertes Design- und Prototyping-Tool, das kollaboratives Arbeiten in Echtzeit ermöglicht und sich als Standard-Werkzeug für UI/UX-Design und digitale Medienproduktion etabliert hat.
Rubrik: Software & Tools · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Figma Design, Figma App
Was ist Figma?
Figma ist eine cloudbasierte Designplattform, die 2016 von Dylan Field und Evan Wallace gegründet wurde. Das Tool ermöglicht es Designern, Entwicklern und Nicht-Designern, gemeinsam an visuellen Projekten zu arbeiten, von einfachen Wireframes bis hin zu komplexen Designsystemen und interaktiven Prototypen. Anders als traditionelle Desktop-Programme läuft Figma primär im Browser, kann aber auch als native Desktop-App installiert werden.
Im September 2022 kündigte Adobe die Übernahme von Figma für 20 Milliarden US-Dollar an. Nachdem die EU-Wettbewerbsbehörden Bedenken geäußert hatten, wurde die Übernahme im Dezember 2023 abgebrochen. Figma blieb eigenständig und ging im Juli 2025 an die Börse. Seither hat Figma die Plattform stark ausgebaut, u. a. um KI-Funktionen (Figma Make: erzeugt aus Text-Prompts funktionierende Prototypen) sowie die Produkte Figma Slides, Figma Sites, Figma Draw und Figma Buzz.
Erklärung
Figma vereint mehrere Werkzeuge in einer Plattform:
Figma Design ist das Kernprodukt für UI/UX-Design. Hier entstehen Screens, Komponenten, Designsysteme und Prototypen. Der Vector-Editor erlaubt präzises Arbeiten mit Pfaden und Formen, während das Komponenten-System Wiederverwendbarkeit und Konsistenz sicherstellt.
FigJam ist ein kollaboratives Whiteboard-Tool für Brainstorming, Workshops und Diagramme, direkt in Figma integriert, aber in einem eigenen Dateiformat. Mehr dazu im Eintrag FigJam (Figma), Online-Whiteboard für Brainstorming und Workshops.
Figma Dev Mode richtet sich an Entwickler und bietet Inspektionswerkzeuge, Code-Snippets und Annotations, um den Übergang vom Design zur Implementierung zu erleichtern. Details finden sich im Eintrag Dev Mode (Figma), Handoff an Entwickler mit Maßen, CSS und Export.
Figma Make (ab 2025/26): KI-gestütztes Prototyping-Werkzeug, das aus Text-Prompts funktionierende Web-Prototypen generiert. Make verbindet sich mit Supabase für echte Datenbankanbindung; erstellte Prototypen lassen sich direkt in Figma Sites veröffentlichen.
Figma Sites (ab 2025/26): Ermöglicht das Veröffentlichen von Figma-Designs als produktionsreife Websites, ohne separaten Export oder Code-Umgebung.
Figma Slides (ab 2025/26): Präsentationswerkzeug direkt in Figma, mit Sektionen, Presenter-Ansicht und Vorlagen.
Figma Draw und Figma Buzz (ab 2026): Zeichenwerkzeug für handgezeichnete Illustrationen bzw. Werkzeug für Template-basierte Inhaltsproduktion (z. B. Social-Media-Grafiken).
Kernfunktionen im Überblick
- Echtzeit-Kollaboration: Mehrere Personen können gleichzeitig an einer Datei arbeiten, Kommentare hinterlassen und Änderungen live verfolgen.
- Vektorbearbeitung: Präzises Arbeiten mit Bezier-Kurven, Boolean-Operationen und Vektornetzen.
- Komponenten-System: Wiederverwendbare UI-Elemente mit Varianten und Eigenschaften. Mehr dazu im Eintrag figma-components.
- Auto Layout: Intelligente Layouts, die sich dynamisch an Inhalte anpassen. Details im Eintrag figma-auto-layout.
- Prototyping: Interaktive Klickdummies direkt im selben Tool. Ausführlich beschrieben im Eintrag figma-prototyping.
- Design-Token-System: Variables und Styles für konsistente Designentscheidungen. Mehr dazu in figma-variables und figma-styles.
- Plugin-Ökosystem: Hunderte von Community-Plugins erweitern die Funktionalität.
Beispiele
Beispiel 1: App-Design für ein Medienunternehmen Ein Designteam erstellt die neue App eines Nachrichtenportals in Figma. Der Lead-Designer baut das Designsystem mit Farb- und Typografie-Styles, andere Teammitglieder arbeiten gleichzeitig an verschiedenen Screens. Entwickler greifen im Dev Mode direkt auf CSS-Werte und Assets zu.
Beispiel 2: Remote-Workshop mit FigJam Ein Redaktionsteam nutzt FigJam für einen virtuellen Workshop zur Contentplanung. Alle Beteiligten platzieren Post-its, zeichnen Flowcharts und priorisieren Ideen gemeinsam, auch wenn sie in verschiedenen Städten sitzen.
Beispiel 3: Design-Handoff Ein UX-Designer beendet einen Prototyp und teilt den Link mit dem Entwicklungsteam. Über den Dev Mode können Entwickler alle Maße, Abstände, Farbwerte und exportierten Assets direkt abrufen, ohne separate Spezifikationsdokumente.
In der Praxis
Figma hat sich in den letzten Jahren als De-facto-Standard im UI/UX-Design etabliert. Laut der Design Tools Survey 2023 nutzen über 75% der befragten UI/UX-Designer Figma als ihr primäres Werkzeug (Budd, 2023).
Typische Einsatzbereiche im Medienbereich:
- Website- und App-Design für Verlage und Medienunternehmen
- Social-Media-Templates und Grafiken
- Infografiken und datenvisuelle Darstellungen
- Brand-Style-Guides und Designsysteme
- Präsentationsfolien als Alternative zu PowerPoint oder Keynote
Arbeitsablauf in der Praxis:
- Projekt anlegen und Grundstruktur mit Pages und Frames aufbauen
- Designsystem definieren (Styles, Variables, Komponenten)
- Screens und Layouts gestalten unter Nutzung von Auto Layout (Figma), CSS Flexbox-ähnliches Layout-System und Components (Figma), Wiederverwendbare Design-Elemente
- Interaktive Prototypen verknüpfen (siehe Prototyping (Figma), Klickbare Prototypen mit Flows und Interaktionen)
- Feedback via Kommentarfunktion einholen
- Handoff an Entwickler über Dev Mode (Figma), Handoff an Entwickler mit Maßen, CSS und Export
Lizenz & Edu
Figma ist ein cloudbasiertes SaaS-Tool im Abo-Modell. Ein kostenloser Starter-Plan deckt erste Schritte ab; für Teams gibt es Professional, Organization und Enterprise, seit 2025 mit gestaffelten Sitzplätzen (Full, Dev, Collab). Für den Bildungsbereich stellt Figma einen kostenlosen Education-Plan bereit: verifizierte Studierende, Schüler/innen und Lehrkräfte (ab 13 Jahren) sowie ganze Kurse erhalten den Professional-Funktionsumfang gratis (Verifizierung über figma.com/education, idealerweise mit schulischer E-Mail; Freigabe in der Regel ein Jahr). Ob eine deutsche Berufsfachschule als „K-12" oder „Higher Education" eingestuft wird, ist nicht eindeutig dokumentiert und sollte direkt bei Figma geprüft werden. Preise und Konditionen ändern sich, vor einer Anschaffung prüfen (Stand: Juni 2026).
Vergleich & Abgrenzung
Figma unterscheidet sich von anderen Design-Tools in mehreren wesentlichen Punkten:
- Gegenüber Adobe XD: Figma ist plattformunabhängig (läuft im Browser), kollaborationsstärker und hat ein aktiveres Community-Ökosystem. Adobe XD wird seit 2023 nicht mehr aktiv weiterentwickelt.
- Gegenüber Sketch: Sketch läuft nur auf macOS und erfordert eine lokale Installation. Figma ist betriebssystemunabhängig. Eine ausführliche Gegenüberstellung bietet der Eintrag Figma vs. Sketch vs. Adobe XD.
- Gegenüber InVision: InVision fokussierte sich auf Prototyping, während Figma Design und Prototyping integriert.
Ein umfassender Vergleich findet sich im separaten Eintrag Figma vs. Sketch vs. Adobe XD.
Häufige Fragen (FAQ)
Ist Figma kostenlos? Figma bietet einen kostenlosen Einstiegsplan (Starter). Professionelle Teams nutzen kostenpflichtige Pläne mit gestaffelten Sitzplätzen (Full/Dev/Collab); der Professional-Full-Seat liegt bei rund 16 USD/Monat (Stand: Juni 2026). Für den Bildungsbereich gibt es zusätzlich einen kostenlosen Education-Plan (siehe „Lizenz & Edu").
Brauche ich eine Installation? Nein, Figma läuft direkt im Browser (Chrome, Firefox, Edge, Safari). Optional gibt es Desktop-Apps für macOS und Windows, die einige Vorteile wie lokale Fonts bieten.
Funktioniert Figma offline? Die Desktop-App ermöglicht eingeschränktes Offline-Arbeiten, aber die volle Funktionalität erfordert eine Internetverbindung.
Welche Dateiformate kann Figma exportieren? Figma exportiert in PNG, JPG, SVG, PDF und WebP. Über Plugins sind weitere Formate möglich.
Wie sicher sind meine Daten in Figma? Figma speichert alle Dateien in der Cloud auf AWS-Servern. Für sensible Unternehmensdaten bietet der Enterprise-Plan erweiterte Sicherheitsfunktionen und SAML SSO.
Verwandte Einträge
- Auto Layout (Figma), CSS Flexbox-ähnliches Layout-System, Intelligente Layouts in Figma
- Components (Figma), Wiederverwendbare Design-Elemente, Komponenten und Instances
- Variants (Figma), Component-Zustände in einer Komponente verwalten, Komponentenvarianten
- Prototyping (Figma), Klickbare Prototypen mit Flows und Interaktionen, Prototyping in Figma
- Dev Mode (Figma), Handoff an Entwickler mit Maßen, CSS und Export, Handoff an Entwickler
- FigJam (Figma), Online-Whiteboard für Brainstorming und Workshops, FigJam Whiteboard
- Figma vs. Sketch vs. Adobe XD, Figma im Vergleich
Weiterführend
- Figma Inc. (2026): Figma Release Notes 2026. figma.com/release-notes/
- Figma Inc. (2026): Figma Education Plan. figma.com/education/
- Figma Help Center (2026): Figma Basics. help.figma.com
- LogRocket Blog (2026): Figma AI in 2026: Everything it can do. blog.logrocket.com/ux-design/figma-ai-2026-quick-overview/
- Budd, A. (2023): Design Tools Survey 2023. uxtools.co/survey/2023/
