Im neu gestalteten Figma steht deine Arbeit im Mittelpunkt

Seit wir vor nahezu einem Jahrzehnt Figma herausgebracht haben, haben wir viele Änderungen daran vorgenommen. Doch trotz der neuen Funktionen, Features und Produkte, blieb das Layout von Figma über die Jahre nahezu konstant. Das ist kein Zufall. Wir wissen, wie wichtig es ist, die Funktionen zu erweitern und dabei gleichzeitig die Workflows nicht zu beeinträchtigen, die sich unsere Kund*innen bei ihrer täglichen Arbeit in Figma sorgsam erarbeitet haben. Und mit jedem Update wurde einst einfache Oberfläche immer komplexer. Um dieser Komplexität zu begegnen und die Grundlage für das nächste Jahrzehnt mit Figma zu legen, veröffentlichen wir UI3 – das dritte, signifikante neue Design von Figma, seit der Veröffentlichung als geschlossene Beta-Version.

Natürlich geht es bei UI3 nicht nur um die Oberfläche und das visuelle Design sondern auch um die tiefergehenden Workflows und Verhaltensweisen, die es ermöglicht. Mit den Neuerungen wollten wir diese vier Hauptschwierigkeiten beseitigen:

• Ideen stehen im Zentrum, die Figma-UI ist Nebensache: Durch das Hinzufügen neuer leistungsstarker Funktionen in den letzten Jahren – von interaktiven Komponenten bis hin zu KI-gestütztem Design – birgt es auch immer das Risiko, dass sie von dem ablenken, was wirklich wichtig ist. Wir wollten also mit der neuen Arbeitsfläche deine Arbeit stärker in den Fokus rücken, nicht die Benutzeroberfläche.
• Die Bedürfnisse neuer Benutzer*innen und professioneller Designer*innen abwägen: Als wir die Figma-Oberfläche mit neuen Augen betrachteten, fiel uns auf, wie verwirrend das auf neue Benutzer*innen wirken muss. Deswegen wollten wir die Oberfläche intuitiver und freundlicher gestalten und gleichzeitig die Vertrautheit der langjährigen Figma-Benutzer*innen nicht zerstören. Figma vereinfachen – ohne Funktionen einzusparen.
• Sich den stetig veränderlichen Designs anpassen: Es gibt heute völlig neue Wege, mit Design zu interagieren, die bis vor zehn Jahren noch undenkbar waren. Es gibt beispielsweise immer mehr Designer*innen, die wiederverwendbare Komponenten und generative KI nutzen. Figma muss sich dieser neuen Welt anpassen und noch mehr Abstraktionsebenen anbieten, damit Designer*innen mit Bausteinen statt nur mit Pixeln arbeiten können.
• Den Grundstein für die Zukunft von Figma legen: Mit Dev Mode bringen wir Design und Code enger zusammen und entfesseln die Effizienz mit Figma AI. Zudem führen wir neue Produkte wie Figma Slides
  

  Stack the deck with Figma Slides

  Say goodbye to lackluster presentations. Today, we’re announcing the open beta of Figma Slides, here to set a new standard for telling visual stories.

  ein. Damit bereiten wir den Weg für ein zusammenhängendes Toolset überall in Figma.

Einblicke in die neu gestaltete Figma-Oberfläche

Vor diesem Hintergrund waren dies einige der Fragen, die wir uns stellen mussten, Entscheidungen, die wir trafen, und Neuerungen, die dich zukünftig erwarten.

Bühne frei für deine Arbeit

Zuerst haben wir mit der Neugestaltung der Figma-Arbeitsfläche begonnen. Das rückt deine Arbeit in den Mittelpunkt, denn keine Ablenkung stört mehr deine Konzentration und trotzdem sind alle Tools, die du benötigst, schnell verfügbar. Zuvor hatten wir mit einem regelrechten Kahlschlag einige Funktionen eliminiert, die dann schmerzlich vermisst wurden. Unser Ziel war es also, so viel Funktionen zu behalten wie möglich, aber gleichzeitig eine übersichtliche Oberfläche zu schaffen.

Wir probierten einige radikale Neuerungen aus, z. B. eine super-minimale Benutzeroberfläche, die sich nur beim Hovern zeigt. Keine Bedienfelder, keine Eigenschaften, nur du und deine Arbeit. In anderen Varianten wurden Seitenleisten ein- und ausgeblendet. Dieses Herangehen „Versuch und Irrtum“ machte die Arbeitsumgebung sehr unbeständig, brachte uns aber unserer endgültigen Lösung näher: in der Größe veränderbare Bedienfelder und eine neue, schlanke Symbolleiste unten auf der Arbeitsfläche. Dadurch wird der obere Bereich frei, was insgesamt ein Gefühl von Geräumigkeit vermittelt. Zudem schafft das eine einheitliche Struktur über Figma hinweg. Das erleichtert das Wechseln zwischen den verschiedenen Produkten. Du kannst die Benutzeroberfläche auch vollständig ausblenden und Bedienfelder nur dann einblenden, wenn sie tatsächlich gebraucht werden.

Die wichtigsten Funktionen an erste Stelle setzen

Eine weitere wichtige Entscheidung war das Überdenken unseres Eigenschaften-Bedienfeldes. Wir wollen kritischen Steuerelementen Priorität einräumen. Nehmen wir Komponenten als Beispiel. Als sich Designsysteme durchsetzten und Komponenten in den Mittelpunkt rückten, erkannten wir, dass Komponentensteuerelemente wie Varianten und Instanzen einen höheren Stellenwert verdienten als Attribute wie Farbe und Größe. Das war nur eine kleine Änderung, die jedoch Zeit und Energie für Aufgaben spart, die einen immer größeren Teil der Designarbeit in Anspruch nehmen.

Eine weitere bedeutende Veränderung: Alle Optionen bezüglich des Layouts, wie Breite, Höhe und Auto-Layout, sind jetzt in einem einzigen Bereich zusammengefasst. Das unterscheidet sich vom typischen x,y,w,h-Bereich der meisten Tools, passt aber besser zu der Art und Weise, wie Produkte im Programmcode wiedergegeben werden. Wir hatten zwar den Gedanken, dass Breite und Höhe Vorrang vor der x-Position und der y-Position haben sollten, erste Tests zeigten jedoch, dass diese Umkehrung das motorische Gedächtnis zu sehr durcheinanderbringt. Daher haben wir das angepasst und Auto-Layout und Breite und Höhe vereinigt, jedoch unter „x und y“ belassen, damit auch langjährige Nutzer*innen damit klarkommen.

Außerdem haben wir Figma AI

Meet Figma AI: Empowering designers with intelligent tools

We’re introducing a suite of AI-powered features to help you push past creative blocks and bring your best ideas to life.

Eine Oberfläche für Nutzbarkeit, nicht zur Zierde

In der Vergangenheit zeichnete sich Figma durch seine minimalistische Benutzeroberfläche aus – scharfe Kanten, abstrakte Symbole, subtile Aufforderungen. Das funktionierte eine Zeit lang. Als wir jedoch begannen, komplexere Steuerelemente hinzuzufügen, wurde die visuelle Sprache schwieriger zu analysieren.

UI3 führt Hintergründe zu Eingaben, Rahmen um Dropdowns, abgerundete Ecken und 200 ausdrucksstarke, von Designer Tim Van Damme handgezeichnete Symbole ein. Diese Symbole geben visuelle Erläuterungen zum Interagieren mit der Plattform. Und diese Symbole passen sich an deine Bedürfnisse an. Schalte die Beschriftungen ein, und schon erfährst du ganz schnell, was die einzelnen Steuerelemente tun. Du kannst die Beschriftungen jedoch auch ausschalten, um dich besser auf deine Arbeit konzentrieren zu können.

Natürlich sind die Ansichten zur Benutzerfreundlichkeit einer Benutzeroberfläche von Mensch zu Mensch verschieden, auch – oder vielleicht gerade – in unserem eigenen Design-Team. Designer*innen haben sehr strikte Ansichten, und Figma-Designer*innen sind da keine Ausnahme.

In einem Schritt komprimierten wir das Ausrichtungsraster in Auto-Layout, damit sich das Gesamtbild des Bereichs vereinfacht und barrierefreier wird. Das hat jedoch nicht ganz geklappt. Es fühlte sich ziemlich unberechenbar an, da sich das Raster zu stark bewegte. Also kehrten wir zum ursprünglichen Design zurück, um das motorische Gedächtnis von Power-Usern zu schonen, aber wir überarbeiteten den optischen Stil, um es barrierefreier zu machen.

Dieses Hin und Her zwischen Zugänglichkeit und Leistungsfähigkeit wurde zu einem immer wiederkehrenden Thema. Wie können wir Figma für Neulinge freundlicher gestalten, ohne dass es für erfahrene Designer*innen zu banal wird? Sehr behutsam, wie sich herausstellte. Wir führten optionale Beschriftungen ein, die Neulingen weiterhelfen und die Auffindbarkeit erleichtern, und hielten Geschwindigkeit und Steuerungsmöglichkeiten für bereits Kundige bei.

Unterstützung eines Tool-Sets für Figma

Wir sahen zudem die Möglichkeit, mehr Zusammenhalt im gesamten wachsenden Figma-System zu schaffen. Ganz gleich, ob du in FigJam ein Brainstorming durchführst, in Figma Design deine Designs verfeinerst oder mit Figma Slides präsentierst, unser Ziel war es, dass sich das Erlebnis flüssig und vertraut anfühlt. Einheitliche Muster wie die schlanke Symbolleiste und die verschiebbaren, in ihrer Größe veränderbaren Bedienfelder geben einen roten Faden, und dennoch hat jedes einzelne Tool die Flexibilität, auf seine eigene Art und Weise zu glänzen. Das Ergebnis ist ein System, das sich an deinen Bedarf anpasst, ohne dabei seine individuelle Persönlichkeit aufzugeben.

Beständige Anpassung an sich stetig veränderliche Designs

Diese neue Gestaltung auf den Weg zu bringen, war ein monumentaler Meilenstein. In vielerlei Hinsicht fühlt es sich jedoch eher wie ein Anfang als ein Ende an. Wir legten zwar ein neues Fundament, aber die wahre Magie wird sich erst entfalten, wenn du das in deinem kreativen Prozess nutzt. Wir wissen, dass es wohl einige Zeit dauern wird, bis du dich an die neue Oberfläche gewöhnt hast, und wir freuen uns darauf, dich auf dieser Reise zu begleiten.

Design und unsere Tools dafür entwickeln sich ständig weiter. Da, wo wir früher mit Pixeln gearbeitet haben, arbeiten wir heute zunehmend auf höheren Abstraktionsebenen. Diese Neugestaltung spiegelt diesen Wandel wider, indem sie Arbeitsabläufe rationalisiert und die Reibung zwischen Vorstellung und Realität verringert. Die Entwicklung von KI und anderen Technologien birgt ein enormes Potenzial zur Veränderung unserer Arbeitsabläufe. Mit der beständigen Weiterentwicklung der Designarbeit – von der Einzelarbeit zum Design im Team, von statisch zu interaktiv, von Pixeln zu Mustern – werden wir dir zur Seite stehen und uns im Interesse deiner Spitzenergebnisse anpassen und weiterentwickeln. Diese Neugestaltung ist ein Versprechen: Wir bleiben unseren Wurzeln treu und stellen uns gleichzeitig der Zukunft.

Das neu gestaltete Figma wird heute für immer mehr Nutzer*innen freigeschaltet. Wir können es kaum erwarten, zu sehen, was ihr damit kreiert.