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.[1] Der Name Figma leitet sich vom englischen Substantiv figment (Hirngespinst, Täuschung) ab. Konkurrenzprodukte sind Adobe XD und Sketch.[2]
| 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
BearbeitenDylan 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.[3] 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.[4]
In den ersten Jahren wurde noch mit der Erzeugung von 3D-Inhalten sowie Segmentierung und Bildbearbeitung experimentiert.[5] 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.[5]
Ab Dezember 2015 war eine Betaversion der Software erhältlich.[4] Die erste offizielle Version wurde am 27. September 2016 veröffentlicht.[6] Seit 2019 ist es möglich, Designs auf einer Figma-Benutzerseite zu teilen und zur Bearbeitung freizugeben.[2] Seit 2021 erweitert das Online-Whiteboard-Tool FigJam das Angebot.[7]
Figmas Wert wurde 2020 von Investoren auf zwei Milliarden Dollar geschätzt,[8] 2021 sogar auf zehn Milliarden Dollar.[9]
Im September 2022 kündigte Adobe an, Figma für 20 Mrd. Dollar übernehmen zu wollen,[10] die Übernahme wurde jedoch aufgrund Bedenken insbesondere der europäischen Regulierungsbehörden im Dezember 2023 aufgegeben.[11]
Funktionen
BearbeitenDie 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.[12]
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.[13]
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.[14]
Weblinks
BearbeitenEinzelnachweise
Bearbeiten- ↑ 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.
- ↑ a b 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).
- ↑ Jordan Crook: Figma gets $40 million Series C to put design tools in the cloud. In: TechCrunch. 14. Februar 2019, abgerufen am 31. Dezember 2023 (amerikanisches Englisch).
- ↑ a b Josh Constine: 23-Year-Old’s Design Collaboration Tool Figma Launches With $14M To Fight Adobe. In: TechCrunch. TechCrunch, abgerufen am 1. Juni 2020.
- ↑ a b Maddie Berg: CS undergrad wins tech fellowship. In: The Brown Daily Herald. 9. September 2012, abgerufen am 18. April 2022 (amerikanisches Englisch).
- ↑ Figma 1.0.0. In: Figma. Abgerufen am 18. April 2022.
- ↑ Linh Pham: Our first Design Jam using FigJam & my thoughts on FigJam. In: uxplanet.org. 14. Juni 2021, abgerufen am 19. April 2022 (englisch).
- ↑ 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).
- ↑ Alex Konrad: How Figma Became Design’s Hottest Startup, Valued At $10 Billion. In: Forbes. 10. August 2021, abgerufen am 24. April 2022 (englisch).
- ↑ Milliardendeal: Software-Schmiede Adobe kauft Web-Designer Figma. In: handelsblatt.com. 15. September 2022, abgerufen am 15. September 2022.
- ↑ Adobe and Figma Mutually Agree to Terminate Merger Agreement. Adobe, 18. Dezember 2023, abgerufen am 18. Dezember 2023 (englisch).
- ↑ David Maissen: Ein Einstieg ins Prototyping mit Figma. In: Publisher. 2019, abgerufen am 20. April 2022.
- ↑ Horizontal and vertical constraints. In: Figma. Abgerufen am 24. April 2022 (englisch).
- ↑ 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.