Maßgeschneidertes Design: Ein Jahr mit Figma
Veröffentlicht: 2022-03-10In diesem Artikel geht es darum, wie große Teams von offeneren Tools für die Zusammenarbeit profitieren können und wie die Einführung und Migration durchführbar und angenehm gestaltet werden können. Falls Sie den Titel des Artikels noch nicht erraten haben, wird sich vieles um Figma drehen und wie es uns gelungen ist, dieses Designtool in unser Team aufzunehmen.
Die Zielgruppe sind erfahrene Designer, die in größeren Teams mit Designsystemen arbeiten, Entwickler oder Produktmanager, die die Arbeitsweise funktionsübergreifender Teams in ihrer Organisation verbessern möchten.
Ich verwende Design-Tools seit über zehn Jahren in einem professionellen Umfeld und versuche immer, die Teams, denen ich diene, effizienter und effektiver arbeiten zu lassen. Von Scripting und Aktionen in Photoshop über Widget-Bibliotheken in Axure bis hin zu Sketch-Plugins und jetzt mit Figma – ich habe Designteams geholfen, auf dem neuesten Stand zu bleiben, ohne Entwickler oder Produktmanager zurückzulassen.
Grundlegende Kenntnisse über Designsysteme und -werkzeuge sind hilfreich, aber nicht erforderlich, da ich hoffe, spezifische Beispiele und auch Konzepte und Methoden auf hohem Niveau zu teilen, die Sie an Ihr Team oder Ihren Kontext anpassen können.
Unser Design-Workflow ca. 2015
Unser primäres Tool im Jahr 2015 war Sketch, und das ist so ziemlich der Punkt, an dem die Gemeinsamkeiten aufhören. Wir hatten alle unterschiedliche Methoden zum Prototyping, Exportieren und Teilen von Designs mit Stakeholdern (InVision, Axure, Marvel, Google Slides und sogar das antiquierte Adobe PDF) und Entwicklern (Avocode, Zeplin, Plugins ohne eigenständige Apps wie Measure). In seltenen Fällen konnten wir Dateien direkt an die Ingenieure senden, die das Glück hatten, die seltene Kombination aus einem MacBook und einer Sketch-Lizenz zu besitzen.
Als InVision das Craft-Plug-in veröffentlichte, waren wir überglücklich – in der Lage zu sein, Bildschirme von Sketch in InVision zu prototypisieren und hochzuladen, Komponenten und Stile in entstehenden Bibliotheken dateiübergreifend zu teilen – der Traum des Designers wurde wahr.
Schließlich kamen wir alle auf der InVision-Plattform zusammen. Wir haben die Prozesse erstellt und dokumentiert, die dazu beigetragen haben, einen Großteil der Reibungen bei der Zusammenarbeit mit den Interessengruppen und der Übergabe an die Entwickler zu reduzieren. Aufgrund der komplexen Berechtigungsstruktur blieb InVision jedoch ein geschlossenes Ökosystem – wenn Sie kein Designer waren, gab es eine Genehmigungskette, die es schwierig machte, ein InVision-Konto zu erhalten, und sobald Sie ein Konto hatten, mussten Sie hinzugefügt werden zu den richtigen Gruppen.
Das manuelle Verwalten von Versionen und Dateien, das Speichern und Organisieren in einem gemeinsamen Laufwerk und der Umgang mit Synchronisierungskonflikten waren nur einige der Dinge, die uns viele Kopfschmerzen bereiteten.
Könnten wir wirklich ein All-in-One-Tool haben, das die besten Funktionen von Sketch und InVision mit den Echtzeit-Zusammenarbeits- und Kommunikationsfunktionen von Google Docs bietet? Neben der Reduzierung des Overheads durch den Kontextwechsel könnten wir möglicherweise auch von drei Toolabonnements (für Mockups, Prototyping und Entwicklerübergabe) auf nur eines vereinfachen.
Der Prozess
Die ersten Designer unseres Teams, die Figma übernahmen, begannen damit zu experimentieren, als 2016 die erste Figma-Betaversion veröffentlicht wurde. Die Funktionen waren begrenzt, deckten aber 80 % dessen ab, was wir brauchten. Der Skizzenimport war fehlerhaft, aber wir fanden es immer noch enorm wertvoll, in Echtzeit zusammenarbeiten zu können, und vor allem konnten wir 90 % der Designarbeit für ein Projekt in einem einzigen Tool erledigen. Stakeholder-Feedback, Überarbeitungen und Entwicklerübergaben haben sich exponentiell verbessert.
Bis 2017 hatten wir einige Designer, die es für den größten Teil ihrer Arbeit verwendeten, und einer der Lexicon-Designer (das Designsystem von Liferay), Emiliano Cicero, wurde schnell zum Evangelisten – was sich als Schlüsselfaktor für die Überzeugung der anderen herausstellte das Team, um den Wechsel vorzunehmen.
Als Figma 2.0 im Sommer 2017 mit zusätzlichen Prototyping-Funktionen und enormen Verbesserungen der Entwickler-Übergabefunktionen debütierte, wussten wir, dass dies ein brauchbares Tool für unser globales Team sein könnte. Aber wie überzeugt man über 20 Designer davon, Tools und Workflows aufzugeben, die sie lieben und die sie seit Jahren bequem verwenden?
Ich könnte eine ganze Reihe zu diesem Thema schreiben, aber ich fasse zusammen, dass die beiden größten Dinge waren: klein anfangen und eine solide Infrastruktur schaffen.
Klein anfangen
Im Herbst 2017 starteten wir unseren ersten Versuch mit Figma mit einem Produktteam, das auf die Vereinigten Staaten und Brasilien verteilt war. Wir hatten das Glück, in unserem Büro in Los Angeles einen einwöchigen gemeinsamen Kickoff zu haben. Das gemeinsame Entwerfen von Flüssen und Drahtmodellen in Figma war so viel schneller und effizienter. Wir konnten Aufgaben aufteilen und Dateien und Komponenten gemeinsam nutzen, ohne uns Gedanken über die ständige Synchronisierung eines Ordners oder einer Bibliothek machen zu müssen.
Bei unserem globalen Treffen im Januar 2018 formulierten wir einen Plan zur langsamen Einführung von Figma und nutzten die Erfahrungen dieses Teams, um die Infrastruktur aufzubauen, die wir für den Rest der Organisation benötigen, damit die Migration so nahtlos wie möglich verläuft.
Die größte Herausforderung, der wir gegenüberstanden, war eine knappe Frist – es machte für uns keinen Sinn, unseren Überprüfungs- und Übergabeprozess aufgrund des Umfangs des Projekts mit mehreren Ingenieurteams und Produktmanagern auf der ganzen Welt zu überarbeiten. Obwohl das Endergebnis besser gewesen wäre, stimmte das Timing nicht. Ein weiterer Faktor war Figmas Fehlen einer zuverlässigen Offline-Designerfahrung (dazu später mehr) , und aus diesen Gründen entschied sich das Team, Sketch und Figma für Wireframes und Mockups zu verwenden, aber jegliches Prototyping oder jede Überprüfung musste in InVision erfolgen.
Erstellen einer soliden Figma-Struktur
Einer der ersten Schritte war die Formulierung grober Richtlinien für die Projekt-, Akten- und Komponentenorganisation. Die Grundlage für diese Dinge wurde von zwei (zu dieser Zeit) Junior-Designern, Abel Hancock und Naoki Hisamoto, gelegt, die nie die schlechten Angewohnheiten zur Benennung von Ebenen entwickelten, die von Designern zu kommen scheinen, die sich in Photoshop die Zähne ausgeschnitten haben. Diese Organisationsmethode, gepaart mit einem Jahr Entwicklung einer kleinen Bibliothek von Komponenten für Liferay.com-Eigenschaften, war entscheidend für den Erfolg des restlichen globalen Teams.
Eine frühe organisatorische Verbesserung, die von einem unserer Liferay.com-Designer, inspiriert von Bens Tweet, geschaffen wurde, war unser Cover-System .
Wir haben diese Datei zur Verfügung gestellt, wenn Sie sie kopieren möchten, ansonsten ist es ein ziemlich einfacher Hack:
- Erstellen Sie auf der ersten Seite Ihrer Datei einen einzelnen Rahmen mit 620 × 320.
- Fügen Sie Ihr Design hinzu. Wenn Sie Text haben, haben wir festgestellt, dass die Mindestgröße ~24 ist, die Titel in unseren Beispielen sind auf 48 festgelegt.
- Genießen!
Hinweis: Es wird immer einen leichten Rand um Ihr Cover geben, aber wenn Sie die Seitenleinwand in derselben Farbe wie die Karte einstellen, wird das Erscheinungsbild dieses Rands reduziert.
Dies hat dazu beigetragen, unsere Bibliothek zu verändern, nicht nur für Designer, sondern auch für Projekt- und Produktmanager und Ingenieure, die versuchen, Dinge schnell zu finden. Die Suchfunktion war bereits sehr gut, aber die Cover halfen den Leuten, die Dinge noch schneller einzugrenzen, und es ermöglichte uns, den Status einer bestimmten Datei sofort mitzuteilen.
Vor der Verwendung von Figma verfügten die meisten Designer zusätzlich zu einer Skizzendatei des „Master“-Designsystems über Basisdateien, die sie im Laufe der Zeit mit Dingen wie Drahtgitterelementen und grundlegenden Komponenten entwickelt hatten. Als wir zu einem einzigen Muster verschmolzen, begannen wir, alles zu kombinieren und zu einer einzigen Bibliothek zu verfeinern. Da wir Wireframes, Mockups und Prototypen in Figma erstellt haben, haben wir auch begonnen, Flow-Apps wie Lucidchart aufzugeben, anstatt unsere eigenen Taskflow-Komponenten in Figma zu erstellen.
Andere Dienstprogramme, die wir im Laufe der Zeit entwickelt haben, waren Redline-Komponenten zum Erstellen präziser Übergabespezifikationen, Haftnotizen für Affinitätsdiagramme (und so ziemlich alles) und Flussknoten.
Einer der größten Vorteile dabei in Figma war, dass Verbesserungen an diesen Komponenten, die jeder Designer vorgenommen hatte, einfach in die Bibliothek gezogen und dann auf alle Instanzen übertragen werden konnten. Diese an einem zentralen Ort zu haben, macht auch die Wartung viel einfacher, da jeder im Team mit einem relativ einfachen Prozess zu Verbesserungen beitragen kann.
Ein Redline-Dokument soll es dem Entwickler erleichtern, die Abmessungen, visuellen Spezifikationen und andere Eigenschaften einer UI-Komponente oder eines Satzes von Komponenten zu kennen. Wenn Sie sich für das Thema interessieren, können Sie auch den Artikel von Dmitriy Fabrikant über Design-Blueprints lesen.
Einige Empfehlungen, die Sie beim Erstellen von Komponenten beachten sollten:
- Verwendung von Overrides und Mastern für leistungsstarke Basiskomponenten (mehr dazu hier);
- Erstellen Sie ein konsistentes Muster für die Benennung (wir verwenden das Atommodell);
- Dokumentieren und beschriften Sie alles – insbesondere Ebenen.
Mit den Anfang Juni 2017 veröffentlichten erweiterten Styling-Funktionen hat das Systemteam zwischen unseren großen Produktveröffentlichungen im Juli und dem Hochlauf im August eine vollständige Version unserer Lexikonbibliothek fertiggestellt. Dies war das letzte Stück, das wir brauchten, um das globale Team zu unterstützen. Designer, die im Marketing und anderen Abteilungen arbeiteten, nutzten Figma bereits seit einiger Zeit, aber bis letzten Herbst hatten fast alle anderen Produktteams die Umstellung auf Figma abgeschlossen.
Bis heute verwenden die meisten Produktdesigner nur Figma, es gibt auch ein paar Designer, die in Altsystemen mit vielen bestehenden, komplizierten Sketch-Prototypen arbeiten, die es nicht wert sind, in Figma importiert zu werden. Eine weitere Ausnahme bilden einige Designer, die gelegentlich Apps wie Principle oder Adobe After Effects für fortgeschrittenere Animationen verwenden, die in Figma nicht sinnvoll wären. Wir haben sogar einige Designer, die Framer X nach noch robusteren Prototypen erkunden, insbesondere bei Arbeiten, die die Nutzung jeglicher Art von Daten in großem Umfang erfordern. Während einige Designer halbwegs mehrere Tools verwenden, verwenden 80 % unserer Produktdesigner Figma für ihre gesamte Design- und Prototyping-Arbeit.
Kontinuierliche Verbesserungen
Wir arbeiten ständig daran, effektiver zu arbeiten, und eines der aktuellen Dinge, die wir wiederholen, sind Best Practices für die Benennung von Seiten. Zuerst haben wir Seiten nach dem Seitennamen benannt, aber das hat sich als problematisch erwiesen, und als wir unsere Bibliotheken verbessert haben, wurde der Bedarf an größeren Dateien mit mehreren Seiten reduziert.
Derzeit verwenden wir ein Nummerierungssystem innerhalb von Dateien, wobei die oberste Seite das ist, was an die Entwickler geliefert wird. Die nächste Phase, die wir heute diskutieren, besteht darin, die Versionen mit expliziten Bezeichnungen (Drahtmodellen, Mockups, Haltepunkten usw.)
Final_Final_Last_2 — Nicht mehr!
Ich hasse es im Allgemeinen, den Begriff „Spielveränderer“ zu verwenden, aber als Figma im vergangenen März die Benennung/Anmerkung zum Versionsverlauf veröffentlichte, veränderte dies die Art und Weise, wie wir unsere Dateien organisierten, dramatisch. Früher hatten wir alle unterschiedliche Möglichkeiten, Iterationen und Versionen zu speichern.
Normalerweise erstellen wir neue Seiten innerhalb einer einzigen Datei, manchmal duplizieren wir sie bei großen Dateien und fügen am Ende des Dateinamens einen Buchstaben hinzu, um eine Iteration zu signalisieren. Wenn Sie drastische Änderungen vornehmen wollten, könnten Sie eine neue Datei erstellen und eine Versionsnummer anhängen. Dies war sehr natürlich, da es aus dem Photoshop/Sketch-Paradigma stammte, mehrere Dateien für alles zu verwalten.
Die Fähigkeit zu arbeiten, periodisch innezuhalten, um einen Zeitpunkt zu benennen und zu kommentieren, wird jedem sehr vertraut sein, der zuvor eine Versionskontrolle wie Git verwendet hat. Sie können sogar den gesamten Dateiverlauf einsehen und frühere Schnappschüsse aufrufen, einen auswählen und ihn benennen und kommentieren.
Wenn Sie zurückgehen und zu einer früheren Version zurückkehren möchten, können Sie sie wiederherstellen und von diesem Punkt im Verlauf an an dieser Datei arbeiten. Das Beste daran ist, dass Sie nichts von der Arbeit verloren haben, weil die Version, die Sie „wiederhergestellt“ haben, nichts gelöscht hat; es wurde einfach dieser Zustand kopiert und oben eingefügt.
In dieser Abbildung gelangt der Designer nach der Wiederherstellung von final 1.1 zu final 3.0 , aber der Versionsverlauf der Datei ist immer noch vollständig sichtbar und zugänglich.
In Fällen, in denen Sie ein neues Projekt beginnen oder einige wirklich dramatische Änderungen an der Datei vornehmen möchten, kann es erforderlich sein, dass Sie die Datei „verzweigen“. Mit Figma können Sie eine Datei an jedem beliebigen Punkt im Verlauf duplizieren, aber es ist wichtig zu beachten, dass der Dateiverlauf nicht kopiert wird.
Wir haben festgestellt, dass eine gute Möglichkeit, in diesem versionierten System zu arbeiten, darin besteht, Ihren Dateiverlauf auf ähnliche Weise zu verwenden, wie ein Entwickler Git verwendet – stellen Sie sich eine Figma-Version als Commit oder Pull-Request vor und benennen und kommentieren Sie sie als eine solche. Für weitere, klügere Gedanken dazu empfehle ich Seth Robertsons Commit Oft, Perfect Later, Publish Once: Git Best Practices – dies ist eine gute allgemeine Philosophie für die Arbeit in einem versionierten Ökosystem. Außerdem ist Chris Beams How to Write a Git Commit Message eine großartige Anleitung zum Schreiben aussagekräftiger und nützlicher Notizen während der Arbeit.
Einige praktische Tipps, die wir entdeckt haben:
- Beschränken Sie Titel auf 25 Zeichen oder weniger .
Längere Titel werden abgeschnitten und Sie müssen auf die Notiz im Versionsverlauf doppelklicken, um das Modal „Versionsinformationen bearbeiten“ zu öffnen, um sie zu lesen. - Beschränken Sie Ihre Beschreibung auf 140 Zeichen oder weniger .
Die vollständige Beschreibung wird immer angezeigt, so dass es hilft, den Verlauf lesbar zu halten, wenn Sie es auf den Punkt bringen. - Verwenden Sie den Imperativ für den Titel .
Dies gibt Ihnen in Zukunft eine klarere Vorstellung davon, was passieren wird, wenn Sie auf diesen Zeitpunkt klicken, z. B. „Schaltflächenfarbe auf Blau ändern“ vs. „Schaltflächen auf Blau ändern“. - Verwenden Sie die Beschreibung, um das „Was“ und „Warum“ im Vergleich zum „Wie“ zu erklären .
Die Beantwortung des „Warums“ ist ein entscheidender Teil der Arbeit eines Designers. Dies hilft Ihnen, sich bei der Arbeit auf das Wesentliche zu konzentrieren und in Zukunft bessere Informationen für Sie bereitzustellen.
Offline arbeiten
Haftungsausschluss: Dies basiert auf unserer eigenen Erfahrung, und vieles davon ist unsere beste Vermutung, wie es funktioniert.
Wie ich bereits erwähnt habe, ist die Offline-Unterstützung in Figma dürftig. Wenn Sie bereits eine Datei geöffnet haben, bevor Sie offline gehen, können Sie mit der Arbeit an der Datei fortfahren. Es scheint, als wäre jede Änderung, die Sie vornehmen, mit einem Zeitstempel versehen. Falls jemand anders an derselben Datei arbeitet, während Sie offline waren, wird die letzte Änderung gerendert, sobald Sie wieder online sind.
In diesem einfachen Beispiel scheint es keine allzu große Sache zu sein – aber im wirklichen Leben kann das sehr schnell sehr chaotisch werden. Zusätzlich zu der hohen Wahrscheinlichkeit, dass jemand Ihre Arbeit außer Kraft setzt, könnten Frames und Gruppen übereinander gestapelt werden.
Unser Arbeitsablauf besteht darin, die Seite zu duplizieren, bevor (oder nachdem) sie offline geht, und dann Ihre Arbeit in dieser Kopie zu erledigen. Auf diese Weise bleibt es unberührt, wenn Sie wieder online gehen, und Sie können alle erforderlichen Zusammenführungen manuell vornehmen.
„F“ steht für Zukunft
Die Einführung eines neuen Tools ist nie einfach, aber am Ende können die Vorteile die Kosten bei weitem überwiegen.
Die größten Verbesserungsbereiche, die unser Team erfahren hat, sind:
- Zusammenarbeit
Es ist viel einfacher, unsere Arbeit und Verbesserungen mit dem Team und der Community zu teilen. - Transparenz
Ein standardmäßig offenes System ist natürlich für Menschen außerhalb des Designbereichs umfassender. - Evolution
Das Entfernen der „Schichten“ zwischen Designern und Ingenieuren ermöglicht es uns, den nächsten Schritt in der Designreife zu gehen. - Operationen
Die Einführung eines einzigen Tools für Wireframes, Mockups, Prototypen und Entwicklerübergaben erleichtert Buchhaltung, IT und Management das Leben.
Die Reduzierung der Gesamtzahl der Abonnements war für unser Team sehr hilfreich, aber da die Kosten von „kostenlos“ bis zu über 500 US-Dollar pro Jahr variieren können, ist dies für Ihren spezifischen Kontext und Ihre Anforderungen möglicherweise nicht sinnvoll. Eine vollständige Aufschlüsselung finden Sie auf der Preisseite von Figma.
Wachsen und besser werden
Natürlich ist kein Tool perfekt und es gibt immer Raum für Verbesserungen. Einige Dinge, die in früheren Tools, die wir verwendet haben, gefehlt haben, sind:
- Kein Plugin-Ökosystem .
Die Erweiterbarkeit von Sketch war ein großer Faktor, der den Wechsel von Photoshop zu einem Kinderspiel machte. Figma hat eine Web-API, aber derzeit gibt es keine „Schreib“-Funktionalität. Vorerst bleibt Sketch mit seiner lebendigen Community von Erweiterungen und Plugins Marktführer. (Natürlich könnten sich die Dinge in Zukunft ändern, falls Figma auch die Bühne für die Plugin-Entwicklung öffnet.) - Importieren von Web- oder JSON-Daten in Prototypen .
Es wäre viel einfacher für uns, mit echten Daten zu entwerfen. Sketch hat kürzlich eine „Daten“-Funktion in v.52 eingeführt, das Craft-Plugin von InVision ist immer noch der Goldstandard, wenn es darum geht, große Mengen unterschiedlicher Daten einfach hinzuzufügen – und im Moment stecken wir fest, Textfelder manuell auszufüllen. - Mehr Bewegung .
Die Prinzip-Integration ist nett (wenn Sie Prinzip haben), aber grundlegende Animations- und erweiterte Prototyping-Funktionen in Figma zu haben, wäre viel besser. - Ein reibungsloseres Offline-Erlebnis
Wie bereits erwähnt, ist alles in Ordnung, solange Sie die Figma-Datei geöffnet haben, bevor Sie offline gehen. Das ist wahrscheinlich für die meisten Leute in Ordnung – aber wenn Sie Ihren Computer jede Nacht herunterfahren möchten, kann es schmerzhaft sein, wenn Sie ihn morgens in einem Zug oder Flugzeug öffnen und feststellen, dass Sie vergessen haben, Figma geöffnet zu lassen.
Open-Source-Design
Vor ein paar Monaten twitterte der immer umstrittene Dann Petty kürzlich über Entwickler mit GitHub, Fotografen mit Unsplash – aber Designer, die keine Plattform haben, um Dinge kostenlos zu teilen. Design Twitter️ kam herein und löschte seinen Tweet, bevor ich einen Screenshot bekommen konnte, aber eine Sache, die ich erwähnen möchte, ist, dass wir bei Liferay Open Source sehr leidenschaftlich sind. Zu diesem Zweck haben wir ein Figma-Projekt für Ressourcen erstellt, die mit der Design-Community geteilt werden können.
Um auf eine dieser Dateien zuzugreifen, besuchen Sie liferay.design/resources/figma und bleiben Sie dran, während wir wachsen und mehr teilen!
Weiterführende Lektüre
- „Unsere ersten 6 Monate bei Figma“, Danny Saltaren
- „Warten Sie auf ein Zeichen, um mit dem Aufbau der Komponentenbibliothek Ihres Designteams zu beginnen?“, William Newton
- „So rationalisieren Sie Ihren UI/UX-Workflow mit Figma“, Nicole Saidy
- „Erste Schritte mit Teams in der Figma-Organisation“, Thomas Lowry
- „5 Möglichkeiten, Ihren Workflow mit Seiten in Figma zu strukturieren“, Josh Dunsterville
- „Best Practices: Komponenten, Stile und gemeinsam genutzte Bibliotheken“, Thomas Lowry
- „Figma: Ein fließender und modularer Designansatz für die Typografie mit Komponenten“, Mirko Santangelo
Andere Ressourcen
- Figma-Community im Spektrum
- Figma Design Handbook von David Ukauwa