Figma über Figma: Die Weiterentwicklung unserer visuellen Sprache
Die visuelle Identität von Figma hat einen mutigen neuen Anstrich bekommen. Von spielerischen Grundelementen bis zu einer lebendigen, neuen Farbpalette: wir präsentieren unsere neueste Markenentwicklung – eine, die alle Produktentwickler anspricht.
Figma über Figma: Die Weiterentwicklung unserer visuellen Sprache teilen
In den letzten zehn Jahren hat sich Figma von einem hauptsächlich für Designer gedachten Tool zu einem Ökosystem entwickelt, das Entwickler, Produktmanager und ganze Produktteams unterstützt. Als wir unseren ursprünglichen Designschwerpunkt verließen, erkannten wir die Notwendigkeit, uns von einer visuellen Sprache zu lösen, die auf Vektorsprache basiert – den statischen Cursorn und kräftigen schwarzen Umrissen, die unsere Marke in den letzten fünf Jahren geprägt haben. Wir wollten, dass unsere neue Identität die vielen Hände widerspiegelt, die an der Gestaltung der Reise von der Fantasie zur Realität beteiligt sind.
Wir haben mit Grilli Type zusammengearbeitet, um Figma Sans, eine charakterstarke Groteskschrift, zu entwickeln. Zusätzlich zu Figma Sans umfasst unsere Marke drei weitere Schriftarten: Figma Condensed, Figma Mono und Figma Hand von OH no Type.
Wir haben unsere erneuerte Marke um vier zentrale Grundlagen herum aufgebaut:
- Vielseitige Grundelemente, die die verschiedenen an der Gestaltung beteiligten Personen repräsentieren
- Dynamische Kompositionen, die verschiedene Modi des Erstellens und Bauens widerspiegeln
- Eine erweiterte Farbpalette, die Variablen zur einfachen Anpassung an verschiedene Kontexte nutzt
- Integrierte Bewegungsprinzipien, die Aktionen und Abläufe im kreativen Prozess animieren
Mit diesen Elementen haben wir eine visuelle Sprache entwickelt, die widerspiegelt, wo Figma heute steht und wohin wir uns entwickeln wollen – ein Ort, an dem jeder seine Ideen zum Leben erwecken kann, unabhängig von seiner Rolle oder seinem Hintergrund.
Start in der Sandbox
Um die Erkundungsphase zu starten, begann das Brand Studio von Figma damit, alle Arten zu untersuchen, auf die Menschen Figma nutzen – vom Brainstorming und der ersten Ideenfindung bis hin zur Untersuchung von Elementen und dem Hinzufügen des letzten Feinschliffs.
Das Team war von dem Konzept fasziniert, dass Aktivitäten in einem gemeinsamen Raum stattfinden, ähnlich wie beim parallelen Spiel. Der Brand Designer Jefferson Cheng erinnert sich daran, dass er sich früh von den Spielplätzen von Isamu Noguchi und Mitsuru Senda inspirieren ließ: „Sie waren eine Metapher für die Figma Arbeitsfläche – ein Ort, an dem Menschen zusammenkommen, um zu kreieren und zu experimentieren.“
Obwohl das Team letztlich über die wörtliche Metapher des Spielplatzes hinausging, baute es weiter auf dem Konzept gleichzeitiger Aktivitäten auf, die in einem gemeinsamen Raum stattfinden. Auch die unendliche Arbeitsfläche von Figma diente dem Team als Experimentierfeld, um Richtungen zu erkunden und Farbschemata sowie Muster mit Variablen zu testen. Brand Studio Director Damien Correll erklärt: „Die Arbeitsfläche ermöglicht es den Menschen, auf verschiedene Art mit Objekten zu interagieren. Ein Entwickler könnte etwas so Einfaches wie ein Rechteck auf eine Weise betrachten, nämlich im Inspektionsmodus, während ein Designer es aus einer anderen Perspektive sehen könnte.
Diese Arten des Sehens und Interagierens wurden zum Kern der neuen visuellen Sprache. Das Team skizzierte so viele Aktivitäten, wie es sich vorstellen konnte, und ordnete jeder Aktivität Regeln und Verhaltensweisen zu. Diese Richtlinien boten ein Gerüst für die ersten Versuche und bildeten die Grundlage für ein visuelles Lexikon, in dem ein einziges Element auf unendlich viele Arten manipuliert werden kann, um unzählige Geschichten zu erzählen.
Ikonographie und Illustration neu gestalten
Unser vorheriges Illustrationssystem basierte stark auf geometrischen Formen mit Hauptcharakter-Energie – Formen, die sich gegenseitig schieben und in fast jeder Vignette als Protagonisten agieren. Bei dieser Auffrischung wollte das Team eine flexiblere Sprache schaffen, die in den kommenden Jahren mit Figma wachsen kann.
Damien betont: „Dauerhafte visuelle Identitäten sollten als Sprachen und nicht als Systeme verstanden werden. Systeme bedeuten starre Regeln und Vorhersehbarkeit.“
Dauerhafte visuelle Identitäten sollten als Sprachen und nicht als Systeme verstanden werden.
Um dies zu erreichen, hat das Figma Brand Studio eine Collection aus Grundelementen entwickelt – Grundformen, die die Bausteine unserer Illustrationen bilden. Diese reichen von mehrdeutigen Klecksen bis hin zu gegenständlichen Formen und veranschaulichen verschiedene Ansätze zu Form und Funktion.
Die Grundelemente wurden von alltäglichen Beispielen aus dem Handwerk, sowohl digital als auch physisch, inspiriert.
Brand Designer Leandro Castelao erläutert: „Die Grundformen sind absichtlich vielfältig, so wie die Hände, die sie geschaffen haben.“ Ihre leichten Unstimmigkeiten und ihre offene Natur bedeuten auch, dass der Mischung immer mehr hinzugefügt werden kann.
Die Grundelemente sind absichtlich unterschiedlich gestaltet, so wie die Hände, die sie geschaffen haben.
Obwohl jedes Grundelement einzigartig ist, teilen alle Elemente wesentliche Merkmale. Sie sind unverblümt grafisch und „jumbohafter“ als ihre Vorgänger. Man denke an: große Formen, überdimensionale Knoten und kräftige Farbnutzung. Aber Jumbo meint nicht nur die Größe – es geht darum, den Fokus auf die Details, die Sorgfalt und die Präzision zu legen, die in die Herstellung eines Produkts einfließen.
„Es ist fast so, als hätten wir jedes Element vergrößert, das Unwesentliche entfernt und uns auf die Komposition fokussiert“, fügt Jefferson hinzu. Wichtig ist, dass die Grundelemente vektorbasiert sind, wodurch sichergestellt wird, dass sie vollständig in Figma erstellt werden können.
Frei nach Charles Eames: „Die Details sind nicht die Details. Sie machen das Design.“
Jumbo-Knoten – große Quadrate, die an den Ecken von Begrenzungsrahmen fixiert sind – verstärken die Figma UI und deuten auf den Akt der „Auswahl“ auf der Arbeitsfläche hin. Für die Brand-Designerin Maria Chimishkyan war der Anblick der großen Knoten auf dem Schmetterling ein frühes Highlight: „Die Dinge begannen, sich zusammenzufügen. Es fühlte sich an wie eine eindringliche, verkürzte Betrachtung von Knoten, auf sinnvolle Weise selektiv.“
Knoten eröffneten auch neue Möglichkeiten für Bewegung und Interaktivität. Quadratische Knoten werden zu Kreisen, wenn ein Objekt „bearbeitet“ wird. Ausgewählte Objekte können auf der Arbeitsfläche verschoben werden oder ihre Z-Achsen-Reihenfolge ändern – genau wie in Figma. Grundelemente können „passiv“ (einfarbige Formen), „aktiviert“ (mit Muster) oder „hyperaktiviert“ (mit breiteren Farbspektren) sein. Auch Ränder können mit Farbe, Muster und Skalierung aktiviert werden – gemäß dem Jumbo-Prinzip.
Motion-Designer arbeiteten bei Animationsstudien eng mit Markendesignern zusammen und brachten so noch mehr Ideen zum Zusammenspiel all dieser Elemente auf den Weg, wie etwa einen gestrichelten, laufenden Rahmen, der Hyperaktivität und Zusammenarbeit darstellt.
Abstimmung der Komposition
Genau wie in Figma können Objekte auf der Arbeitsfläche mit anderen Objekten interagieren und unendliche Kompositionen schaffen. Um diese Arrangements zu standardisieren, ging das Team seine Liste der Modalitäten und Aktionen, die aus der Überprüfung des Produktentwicklungsprozesses hervorgegangen waren, erneut durch. „Ideation“ wird durch frei gestaltete Collagen dargestellt, wie Notizen auf einer FigJam-Arbeitsfläche, „Design“ beruht stark auf Manipulation und Transformation, und „Erstellen“ wird durch visuelle Abstraktionen von Codierung, Inspektion und Kommentierung dargestellt.
Insgesamt umfassen diese kompositorischen Anordnungen vier Hauptschritte:
- Überlappung: Formen schichten sich übereinander und nutzen die (gelegentliche) Unordnung der Figma Arbeitsfläche.
- Enthüllung: Eine ausgewählte Form kann die darunterliegende Struktur eines anderen Elements „inspizieren“ oder freilegen.
- Clustering: Formen und Muster gruppieren sich zu freien Kompositionen.
- Mehrfachbewegung: Verschiedene kompositorische Elemente kommen zusammen.
Unser vorheriger schwarzer Umrissstil
Eine erweiterte Farbpalette
Während Formen und Kompositionen den vielschichtigen Charakter der Arbeit vermitteln, verstärkt unsere erweiterte Farbpalette die Aussagekraft. Wir behielten unser charakteristisches Lila bei, haben aber eine breitere Farbpalette eingeführt, die kräftige Grundfarben, leuchtende Neontöne und gedeckte Erdtöne umfasst, um die Vielfalt unserer Community und die Vielzahl der Möglichkeiten, die unsere Produkte bieten, widerzuspiegeln.
In einer Branche, in der der Besitz einer Farbe oder eines Farbpaares als Höhepunkt eines erfolgreichen Markenauftritts gilt (man denke an das Rot von Coca-Cola oder das Grün von John Deere), ist Damien der Ansicht, dass ein solcher Ansatz für viele moderne Marken unrealistisch ist: „[Traditionsmarken] haben die Zeit investiert, um dieses Kapital aufzubauen, und waren, offen gesagt, zuerst da. Wir haben ein unglaubliches internes Team, das auf eine anspruchsvollere Farbpalette drängte – in der Erkenntnis, dass wir statt eines begrenzten, schematischen Ansatzes ein Spektrum mit einer durchdachten Nutzungsmethode benötigen.“
Das Brand Studio entwickelte ein komplexes, aber harmonisches System von Farbschemata, indem es Variablen nutzte, um eine Vielzahl von Ausdrucksformen zu schaffen. Sie begannen damit, zwei scheinbar tonale Farben auf derselben Farbtonebene zu kombinieren, wodurch ein vibrierender Effekt entsteht, wenn sie nebeneinander betrachtet werden. Ohne schwarze Umrisse stoßen diese Farben aneinander, wodurch scharfe Kontraste und ein Gefühl von Bewegung entstehen, ähnlich der Energie und dem Fluss der Teamarbeit.
Das Team entwickelte drei Hauptfarbschemata, die jeweils aus einem lebhaften Primärfarbpaar und vier Sekundärfarben bestehen. Diese Schemata haben helle und dunkle Modi, die je nach Kontext Sekundärfarben austauschen.
Zwei Farbprinzipien bestimmen sowohl Illustrationen als auch Produktbilder:
- Tonale Lebendigkeit: Farben schaffen elektrisierende und unerwartete Kombinationen, die Aktivierung vermitteln und gleichzeitig Kontrast und Unterscheidung ausbalancieren.
- Anpassungsfähige Schemata: Farbschemata bieten eine flexible Nutzung und ermöglichen Variationen von dunkel bis hell, von einfach bis komplex, um unterschiedlichen Anforderungen gerecht zu werden.
Maximalistische Farbschemata werden zur Betonung verwendet, ähnlich wie die Skalierung in unserem Jumbo-Prinzip.
Zur Betonung kommen maximalistische Farbschemata ins Spiel, bei denen Farben Muster, Linien oder hyperaktivierte Formen betonen.
In Bewegung setzen
Bewegung ist nicht nur Zusatz, sondern wesentlich für den Ausdruck unserer Prinzipien. Von Anfang an berücksichtigten wir, wie sich visuelle Elemente bewegen und interagieren würden. „Wir haben uns auf zentrale Schritte wie Auswahl, Aktivierung und Transformation konzentriert“, erklärt Gilles Desmadrille, Brand Motion Designer. „Es geht darum, die Arbeitsfläche zum Leben zu erwecken, ohne auf den Cursor angewiesen zu sein.“
Kollaboratives Chaos beim Bauen für alle
Der Prozess der Auffrischung unserer Marke war alles andere als linear und erforderte Monate gemeinsamer Versuche. Das Team arbeitete reibungslos zusammen, indem es die Arbeiten der anderen aufgriff und weiterentwickelte. Oftmals verlor es den Überblick über die ursprüngliche Urheberschaft einer Idee oder Iteration, was ideal für ein Team ist, das ein skalierbares System schaffen möchte. „Figma fördert eine egolose Arbeitsweise“, sagt Jefferson. „Es ist egal, von wem etwas stammt; wir kommen zusammen, um etwas Großartiges zu schaffen.“
Es ist egal, von wem etwas stammt; wir kommen zusammen, um etwas Großartiges zu schaffen.
Dieser Ansatz, bei dem alle mit anpacken, hat dem Team auch geholfen, schnell zu iterieren. Maria fügt hinzu: „Es ist nicht so, dass man auf den einen Designer wartet, der sich auf Grundelemente spezialisiert hat.“ Wir alle erstellen sie und verwenden sie wieder. Das Team nutzte die Funktionen des Designsystems von Figma, um Markenbibliotheken und Toolkits zu erstellen, sodass die Assets für jeden bei Figma leicht zugänglich sind.
Raum zum Wachsen
„Dies ist nicht das endgültige Ziel. Es ist ein neuer Ausgangspunkt“, sagt Taryn Cowart, Design Manager des Brand Studios. „Wir haben ein System entwickelt, das flexibel genug ist, um sich an unser Wachstum und unsere Veränderungen anzupassen.“
Dies ist nach der eingehenden Beschäftigung mit unserer neuen, benutzerdefinierten Schriftart Figma Sans der zweite Teil unserer Serie zur jüngsten Markenentwicklung bei Figma.
Das Brand Studio von Figma:Andrea Helmbolt, Brand Strategist; Andy Luce, Brand Designer; Becca Ramos, Brand Designer; Catherine Bui, Brand Designer; Damien Correll, Creative Director; Gilles Desmadrille, Brand Motion Designer; Jefferson Cheng, Brand Designer; Kaley Aposporos, Brand Copywriter; Leandro Castelao, Brand Designer; Maria Chimishkyan, Brand Designer; Sydney Halle, Brand Producer; Taryn Cowart, Design Manager
Agenturpartner: Buck für die Out-of-Home-Kampagne; Nimble für die narrative Arbeit.
