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 Deep-Dive · 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 bleibt damit ein unabhängiges Unternehmen und entwickelt seine Plattform eigenständig weiter.
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: Kollaboratives Whiteboard in Figma.
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 Figma: Dev Mode – Die Brücke zwischen Design und Entwicklung.
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 – Wiederverwendbare UI-Bausteine im Design System.
- Auto Layout: Intelligente Layouts, die sich dynamisch an Inhalte anpassen. Details im Eintrag Figma: Auto-Layout – Dynamische Layouts ohne manuelles Ausrichten.
- Prototyping: Interaktive Klickdummies direkt im selben Tool. Ausführlich beschrieben im Eintrag Figma: Prototyping – Interaktive Klickdummies direkt im Design-Tool.
- Design-Token-System: Variables und Styles für konsistente Designentscheidungen. Mehr dazu in Figma: Variables – Token-basiertes Design mit Modi und Aliassen und Figma: Styles – Zentral verwaltete Design-Tokens für Farben und Typografie.
- 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 Figma: Auto-Layout – Dynamische Layouts ohne manuelles Ausrichten und Figma: Components – Wiederverwendbare UI-Bausteine im Design System
- Interaktive Prototypen verknüpfen (siehe Figma: Prototyping – Interaktive Klickdummies direkt im Design-Tool)
- Feedback via Kommentarfunktion einholen
- Handoff an Entwickler über Figma: Dev Mode – Die Brücke zwischen Design und Entwicklung
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), der für Einzelpersonen mit bis zu 3 aktiven Projekten ausreicht. Professionelle Teams benötigen kostenpflichtige Pläne (Professional ab ca. 15 USD/Monat pro Editor).
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
- Figma: Auto-Layout – Dynamische Layouts ohne manuelles Ausrichten – Intelligente Layouts in Figma
- Figma: Components – Wiederverwendbare UI-Bausteine im Design System – Komponenten und Instances
- Figma: Variants – Alle Zustände einer Komponente in einem Set – Komponentenvarianten
- Figma: Prototyping – Interaktive Klickdummies direkt im Design-Tool – Prototyping in Figma
- Figma: Dev Mode – Die Brücke zwischen Design und Entwicklung – Handoff an Entwickler
- FigJam: Kollaboratives Whiteboard in Figma – FigJam Whiteboard
- Figma vs. Sketch vs. Adobe XD – Figma im Vergleich
Weiterführend
- Field, D. & Wallace, E. (2016): Figma – Design Everything. Figma Blog.
- Budd, A. (2023): Design Tools Survey 2023.
- Figma Help Center (2024): Figma Basics.
- Babich, N. (2022): Why Figma Won the Design Tools War. Adobe Blog.
