Die Entstehung eines Produkt-Icons
Das Erstellen von Produkt-Icons bei Figma umfasst Dutzende – manchmal sogar Hunderte – von Iterationen. Produktdesigner Tim Van Damme teilt seinen durchdachten Ansatz für die Icon-Gestaltung und den kreativen Prozess, der jedes Endergebnis prägt.
Die Entstehung eines Produkt-Icons teilen
Tim Van Damme hat mehr Icons für Figma entwickelt, als er zählen kann. In diesem Jahr, als wir uns darauf vorbereiteten, unsere Produktpalette zu verdoppeln, entwarf er vier neue Produkt-Icons und gestaltete die bestehenden neu, um sicherzustellen, dass sie als Set zusammenpassen.
Für Tim bedeutete dies, über das Erwartete und Offensichtliche hinauszugehen. Zwischen Hunderten von Variationen von Hummeln für Figma Buzz und unzähligen Entwürfen von Sternen und Zauberstäben für Figma Make zeigt Tims Arbeitsprozess, dass das Befolgen einer Formel nicht zu formelhaften Ergebnissen führen muss. Hier geben wir einen Einblick hinter die Kulissen, wie Tim große Ideen durch eine Mischung aus Kreativität und Neugier in fertige Icons verwandelt.
Schritt 1: Beginne mit einem Satz von Richtlinien
Wie lässt sich ein ganzes Produkt auf ein einziges Icon reduzieren? Und was macht ein „gutes“ Icon überhaupt aus? Das sind Fragen, die sich Tim seit seinem ersten Monat im Job stellt. Nachdem Tim festgestellt hatte, dass es kein offizielles System zur Erstellung von Figma-Icons gab, entwickelte er seine eigenen Richtlinien und festigte damit inoffiziell seine Rolle als de facto Icon-Designer.
Um ein harmonisches Gesamtbild und die visuelle Konsistenz sicherzustellen, beginnt Tim mit diesen Richtlinien, die unter anderem folgende Grundsätze umfassen:
- Alle Konturen sind ein Pixel breit.
- Ausschnitte sind ein Pixel dick.
- Alle Großbuchstaben sind abgerundet.
- Icons fühlen sich ausgewogen an und füllen den verfügbaren Raum so gut wie möglich aus.
- Icons werden in drei Größen erstellt, um auf allen notwendigen Oberflächen zu funktionieren.
Während Tim die Icons entwirft, überlegt er, wie die Icons für verschiedene Formate skaliert werden können. Neben der Verfügbarkeit in der Symbolleiste sind diese Icons auch auf 12 Meter hohen Plakatwänden und in Marketingmaterialien zu sehen und bilden so eine visuelle Grundlage für das wachsende Ökosystem von Figma. Manchmal ist dies eine einfache Möglichkeit, ein erstes Mockup eines Icons zu verwerfen – wenn die einzelnen Linien bei der Weichzeichnung zu verschwimmen beginnen und die Elemente schwer zu unterscheiden sind, geht er zur nächsten Version über.
Schritt 2: Gehe dem Produkt auf den Grund
Über die Einhaltung der Markenrichtlinien von Figma hinaus muss jedes Icon die visuelle Identität eines bestimmten Produkts repräsentieren.
„Wir müssen viele Details auf kleinem Raum vermitteln“, sagt Tim. Um sich darauf zu einigen, welche Details am wichtigsten sind, brainstormen Tim und andere Mitglieder der Design- und Produktteams eine Liste von Schlüsselkonzepten, die mit jedem Produkt in Zusammenhang stehen, und lassen sich dabei von verwandten Begriffen und Themen inspirieren.
Als Tim ein Icon für die Figma-Community gestaltete, suchte er beispielsweise nach einem Design, das den Geist des Lernens und des Ideenaustauschs widerspiegeln würde. Er notierte sich Phrasen wie „Verbindung durch Community“, „Mitarbeitende tauschen Wissen aus“ und „Gemeinsam lernen“, um Inspirationen für seine Kreation zu erhalten. Dies führte dazu, dass er mit Symbolen von Menschen, Bäumen und Büchern experimentierte.
Ähnlich wie beim Entwerfen des Icons für Figma Buzz beschäftigten sich Tim und das Team mit Themen wie Magie, Schöpfung und KI-Bilderzeugung – und entwickelten so immer neue Varianten mit Glaskugeln, Sternen und anderen magisch anmutenden Formen.
Schritt 3: Idee verbessern und weiterentwickeln
Tim spart Zeit bei Dutzenden von Icon-Iterationen, indem er die Kontur mit variabler Breite verwendet und mehrere Ebenen gleichzeitig bearbeitet.
Mit Designparametern und ersten Ideen im Gepäck beginnt Tim mit der ernsthaften Entwicklung. Hier zeigt sich seine Expertise, wenn er Dutzende Iterationen einer Icon-Familie erstellt und jedes Icon langsam aber sicher optimiert und anpasst. Bäume werden zu Gesichtern; Gesichter werden zu Mandalas; abstrakte Formen rotieren und verflechten sich miteinander. Diese Art der iterativen, praktischen Experimentierens basiert auf jahrelanger Erfahrung verwurzelt, wird aber auch durch seine Liebe zum kreativen Spiel beflügelt. „Ich gehe viel kreativ auf Entdeckungsreise, nur um diesen Teil meines Gehirns in Schwung zu halten“, sagt er.
Für Figma Make verbrachte er Stunden damit, mit Konzepten von Bewegung und Transformation zu spielen, Räder, abstrakte Schmetterlinge, Kompasse und Fidget Spinner zu entwerfen. Und für Figma Buzz verbrachte er einen Tag damit, Hunderte von Versionen von Bienen-Symbolen zu erstellen, mit unterschiedlichen Flügelformen, Linien und Fühlern.
Schließlich überprüft Tim die Kohärenz jedes neuen Icon innerhalb der breiteren Collection. Sticht eines zu stark hervor im Vergleich zu den anderen? Wirken sie unzusammenhängend? Ist ihre Funktionalität ausreichend differenziert? „Jedes einzelne Icon ist einzigartig, aber am Ende, wenn man 20 von ihnen zusammenstellt, sollte man sagen können: Das sind Figma-Icons“, sagt Tim.
Jedes einzelne Icon ist einzigartig, aber wenn man 20 davon zusammenstellt, sollte man sagen können: „Das sind Figma-Icons“.
Schritt 4: Unterwegs Feedback einholen
Tim bittet Produktdesigner*innen und Produktmanager*innen häufig um Feedback und vergibt beim Gespräch eine Bewertung von einem bis fünf Sternen, um zu zeigen, wie überzeugt er von einem Design ist. Das Feedback, das er erhält, kann von einfach („zu viel los, zu kompliziert“) bis vage („das fühlt sich nicht richtig an“) reichen. Manchmal wird die Arbeit eines ganzen Tages mit einem einzigen Feedback verworfen, wie zum Beispiel „wir sollten keine Bienen verwenden“, was in diesem Fall dazu geführt hat, dass wir Megafon-Icons für Figma Buzz ausprobierten. Für Tim ist das alles nur ein Teil des Prozesses. „Es ist eine Lebenserfahrung“, sagt er. „Auch wenn wir in eine andere Richtung gegangen sind, kann ich trotzdem sagen, dass niemand jemals mehr Zeit und Mühe in das Streben nach dem perfekten Bienen-Icon investiert hat.“
Eine von Tims Lieblingsfunktionen ist das Kontur-Panel in Figma Draw, das ihm viele Stunden und Klicks erspart hat, indem es ihm beim Designen alle erforderlichen Steuerelemente an einem Ort bietet.
Manchmal sucht Tim nach Feedback in weiter entfernten Gefilden. Beim Nachbilden des FigJam-Icons fragte er im ganzen Unternehmen nach, welche Wörter und Ideen die Mitarbeitenden oft mit dem Produkt assoziierten. Das Wort, das im überwiegenden Maße zurückkam, war „Notizen“. Also erhielt das neue Icon die Form einer Notiz. Genauso ging er für den Start von Figma Make, Figma Buzz, Figma Sites und Figma Draw vor und sammelte Feedback in einem öffentlichen Slack-Kanal. „Nicht alle Designer*innen arbeiten gerne so, weil es viel Input gibt“, sagt er. „Aber ich liebe es, mit Menschen zu interagieren, die keine Designer*innen sind, und zu hören, was sie denken. Ich sage gerne: Sieh dir dieses Icon an. Was siehst du? Was fühlst du?“
Ich liebe es, mit Menschen in Kontakt zu treten, die keine Designer*innen sind und zu erfahren, was sie denken.
Schritt 5: Auf dem Weg zum Endprodukt
In der Schlussphase spielt die Intuition eine Rolle. Als Tim beispielsweise das neue Community-Icon entwarf, verwarf er frühe Entwürfe eines Buch-Icons, da er befürchtete, dass es einem bereits vorhandenen Icon in der Figma-Bibliothek zu ähnlich wäre. Aber als er die Umrisse des allerersten Community-Icons von Figma mit dem Buch kombinierte, machte es Klick. „Es fühlte sich so kraftvoll an. Ich habe immer noch Schwierigkeiten zu erklären, warum. Aber wenn ich das Icon ansehe, löst es einfach etwas in mir aus“, sagt Tim.
Während er sich auf seine endgültige Auswahl konzentriert, stellt Tim sechs Icons zusammen, die er dem Führungsteam präsentieren möchte. Durch so viele Verfeinerungen, Iterationen und Feedbackrunden, die in den Prozess integriert sind, wird die endgültige Entscheidung einfacher. Die Gruppe betrachtet jede Option durch das Auge des Figma-Designsystems, die Icon-Richtlinien von Tim, der Kompatibilität mit der gesamten Icon-Familie und einem weniger messbaren Faktor: dem Bauchgefühl.
