Figma

Figma ist eine kollaborative Software zum Erstellen von Prototypen im Bereich des UX bzw. UI Design. Sie wird vor allem als Webanwendung genutzt. Daneben läuft Figma auch als Desktop-App für MacOS und Windows und als Mobile App für Android und iOS. Figma-Entwürfe können modular aufgebaut und in Echtzeit mit anderen geteilt werden. Der Name Figma leitet sich vom englischen Substantiv figment (Hirngespinst, Täuschung) ab. Konkurrenzprodukte sind Adobe XD und Sketch.

Figma
Basisdaten
Entwickler	Figma, Inc.
Erscheinungsjahr	2016
Betriebssystem	Linux, macOS, Windows, ChromeOS, Android, iOS
Kategorie	UX Design, UI Design
Lizenz	proprietär
deutschsprachig	nein
https://www.figma.com

Geschichte und Entwicklung

Dylan Field und Evan Wallace, die zu dieser Zeit an der Brown University Informatik studierten, entwickelten Figma ab 2012. Die beiden erkannten den steigenden Bedarf an einer Software, die kollaboratives kreatives Arbeiten ermöglicht. Sie konzipierten Figma als browserbasiertes und erschwingliches Tool. Field träumte davon, eine Art Google Docs für UI Design zu entwickeln, weshalb die Software das englische Wort für „Spinnerei“ (figment) im Namen trägt, für die Field und Wallace ihre Idee anfangs hielten.

In den ersten Jahren wurde noch mit der Erzeugung von 3D-Inhalten sowie Segmentierung und Bildbearbeitung experimentiert. Danach konzentrierte sich das Unternehmen auf den Einsatzbereich des Interfacedesigns.

Field erhielt noch im Gründungsjahr ein mit 100.000 Dollar ausgestattetes Stipendium des Unternehmers Peter Thiel für das Projekt.

Ab Dezember 2015 war eine Betaversion der Software erhältlich. Die erste offizielle Version wurde am 27. September 2016 veröffentlicht. Seit 2019 ist es möglich, Designs auf einer Figma-Benutzerseite zu teilen und zur Bearbeitung freizugeben. Seit 2021 erweitert das Online-Whiteboard-Tool FigJam das Angebot.

Figmas Wert wurde 2020 von Investoren auf zwei Milliarden Dollar geschätzt, 2021 sogar auf zehn Milliarden Dollar.

Im September 2022 kündigte Adobe an, Figma für 20 Mrd. Dollar übernehmen zu wollen.

Funktionen

Die Figma-Arbeitsfläche ist typisch für eine Grafiksoftware aufgebaut: Im oberen Teil des Browserfensters ist die Werkzeugleiste untergebracht. In der linken Randspalte werden Organisationselemente wie Ebenen und Seiten angezeigt. In der rechten Randspalte sind die Eigenschaften und Optionen des aktuell ausgewählten Elements zu sehen. Die Arbeitsfläche lässt sich um bis zu 65.000 Pixel nach links, rechts, oben und unten erweitern. Sie kann außerdem mithilfe eines frei einstellbaren Rasters und mit Spalten und Reihen strukturiert werden. Das erleichtert die Arbeit innerhalb eines Frameworks wie z. B. Bootstrap.

Dateien lassen sich außerdem mithilfe von Seiten gliedern. Beim Bewegen der Objekte auf der Arbeitsfläche erscheinen automatisch Hilfslinien. Unter der Rubrik „Inspect“ werden die CSS-Eigenschaften der Objekte angezeigt.

Alle Elemente in Figma sind vektorbasiert und können verlustfrei skaliert werden. Mit „Pen“ und „Pencil“, die an ähnliche Werkzeuge in Illustrator erinnern, werden Zeichnungen und Bézierkurven angelegt. Einfache Formvorlagen wie Kreise und Rechtecke werden beispielsweise zur Erstellung von Wireframes eingesetzt. Die Formen lassen sich entweder mit Farben oder mit Hintergrundbildern versehen. Mithilfe der sogenannten Frames (englisch für Rahmen) lassen sich Arbeitsflächen in verschiedenen Bildschirmgrößen anlegen. User können die Interaktivität ihrer Entwürfe testen, indem sie Elemente miteinander verbinden und die Interaktion im Präsentationsmodus abspielen.

Objekte können mit Effekten wie Weichzeichner oder Schatten versehen werden. Diese Effekte können in „Styles“ organisiert und auf andere Elemente angewendet werden.

Elemente wie Frames, Texte und Bilder lassen sich in sogenannten „Components“ bündeln, um sie als „Instances“ zu kopieren und wiederzuverwenden. Änderungen an der Master-Komponente werden automatisch an die Tochter-Komponenten weitergegeben. Die verwendeten Komponenten werden unter „Assets“ angezeigt.

Mithilfe von „Constraints“ (Einschränkungen) wird das Verhalten von Layouts je nach Bildschirm- bzw. Framegröße festgelegt.

Die Entwürfe können zur Abstimmung und zur direkten Weiterbearbeitung durch andere geteilt werden, es müssen keine Kopien verschickt werden. Die fertigen Layouts werden in die benötigten Endformate wie z. B. SVG, JPEG oder PDF exportiert.

Datenschutz

Figma wird auf Servern in den USA gehostet. Damit ist die Verwendung der Software nicht DSGVO-konform.

Weblinks

• Figma-Tutorial bei FreeCodeCamp

Einzelnachweise

1. Daniel Berger: Figma: Das beste Design-Tool für Website-Prototypen in der Praxis. In: heise online. 26. Januar 2022, abgerufen am 16. April 2022. 
2. Dami Lee: Figma’s new community profiles let users view and remix design files. In: The Verge. 22. Oktober 2019, abgerufen am 19. April 2022 (englisch). 
3. Jordan Crook: Figma gets $40 million Series C to put design tools in the cloud. In: TechCrunch. 14. Februar 2019, abgerufen am 18. April 2022 (amerikanisches Englisch). 
4. Josh Constine: 23-Year-Old’s Design Collaboration Tool Figma Launches With $14M To Fight Adobe. In: TechCrunch. TechCrunch, abgerufen am 1. Juni 2020. 
5. Maddie Berg: CS undergrad wins tech fellowship. In: The Brown Daily Herald. 9. September 2012, abgerufen am 18. April 2022 (amerikanisches Englisch). 
6. Figma 1.0.0. In: Figma. Abgerufen am 18. April 2022. 
7. Linh Pham: Our first Design Jam using FigJam & my thoughts on FigJam. In: uxplanet.org. 14. Juni 2021, abgerufen am 19. April 2022 (englisch). 
8. Alex Konrad: Figma Eyes Acquisitions, New Tools With $50 Million In Fresh Funding At $2 Billion Valuation. In: Forbes. 30. April 2020, abgerufen am 24. April 2022 (englisch). 
9. Alex Konrad: How Figma Became Design’s Hottest Startup, Valued At $10 Billion. In: Forbes. 10. August 2021, abgerufen am 24. April 2022 (englisch). 
10. Milliardendeal: Software-Schmiede Adobe kauft Web-Designer Figma. In: handelsblatt.com. 15. September 2022, abgerufen am 15. September 2022. 
11. David Maissen: Ein Einstieg ins Prototyping mit Figma. In: Publisher. 2019, abgerufen am 20. April 2022. 
12. Horizontal and vertical constraints. In: Figma. Abgerufen am 24. April 2022 (englisch). 
13. Daniel Berger: Figma: Das beste Design-Tool für Website-Prototypen in der Praxis. In: heise online. 26. Januar 2022, abgerufen am 21. April 2022. 
14. Angelika Eckert: DSGVO-konformes Teamwork: So sichern Sie sich ab. In: Page. 18. Mai 2019, abgerufen am 16. April 2022.