Konsistente Designsysteme in Sketch mit Atomic Design und dem Auto-Layout-Plugin

Entwerfen Sie digitale Produkte (oder Websites) und übergeben Sie Designdateien an Entwickler zur Implementierung? Wenn Sie mit Ja geantwortet haben, lehnen Sie sich zurück! Während die Debatte „Sollten Designer programmieren?“ andauert, werden wir uns ansehen, wie die Ergänzung Ihres Design-Workflows um eine Methodik Sie schneller, konsistenter und bei allen Entwicklern beliebt machen kann … auch wenn Sie nicht programmieren.

Tauchen wir ein!

Warum eine Methodik?

In der Entwicklungswelt scheint es, dass mindestens die Hälfte Ihrer Karriere darin besteht, über neue Technologien auf dem Laufenden zu bleiben und Ihre Fähigkeiten zu verbessern. Während das Tempo in der Designlandschaft vielleicht nicht ganz so hektisch ist wie in der Entwicklung, gab es in den letzten drei Jahren definitiv einen enormen Wandel bei den Werkzeugen.

Werkzeuge wie Sketch haben viele der alten Probleme bei der Arbeit mit Designdateien der Vergangenheit angehören lassen. Intelligente Kombinationen von Textstilen, Objektstilen, Symbolen und Bibliotheken bedeuten jetzt, dass Änderungen mit nur einem Klick möglich sind. Kein Durchwühlen von 40 Photoshop-Ebenen mehr, um eine einzige Farbänderung vorzunehmen.

Doch flächendeckende Farbänderungen auf einer Marketing-Landingpage sind nicht mehr die größte Designherausforderung. Design- und Entwicklungsteams sollen heute komplexe Benutzeroberflächen mit Interaktionen und bedingten Zuständen liefern … für jedes verfügbare Gerät jetzt und morgen. Als Designer und Entwickler habe ich die Reibungsverluste im Workflow von beiden Seiten erlebt.

Über Werkzeuge hinaus brauchen Designer einen Ansatz.

Denken in „Komponenten“-Begriffen

Wenn Sie in irgendeiner Funktion im Technologiebereich tätig sind, haben Sie wahrscheinlich schon von Frameworks wie React, Angular oder Vue gehört.

Ähm ja, ich bin Designerin, das betrifft mich nicht wirklich, tschüss.

Irgendwie schon. Aber wenn Sie Designarbeit für moderne digitale Produkte leisten möchten, besteht eine ziemlich hohe Wahrscheinlichkeit, dass diese Produkte mit einem dieser Frameworks erstellt werden. Niemand erwartet, dass ein Architekt die Strukturen selbst baut, aber er sollte ein Grundverständnis davon haben, was die Werkzeuge sind und wie sie verwendet werden.

Hier ist also, was Sie über moderne Front-End-Frameworks wissen müssen

Sie haben einen Paradigmenwechsel für Entwickler eingeleitet, bei dem Produkte durch die Kombination einer Reihe kleinerer Komponenten zu komplexen Systemen aufgebaut werden, die sich an verschiedene Kontexte und Geräte anpassen lassen. Dies erleichtert die Wartung des Codes und macht das gesamte System flexibler.

Aus einer Vielzahl legitimer Gründe haben viele Designer diesen Paradigmenwechsel nicht so schnell wie die Entwickler mitvollzogen. Uns fehlt ein mentales Modell, um die Teile, aus denen sich diese Benutzeroberflächen zusammensetzen, unabhängig von ihrer Umgebung/Seiten/Bildschirmen/Viewports usw. zu erstellen.

Ein solcher Ansatz ist Atomic Design.

Was ist Atomic Design?

Atomic Design, erstmals von Brad Frost geprägt, ist eine Methodik, die versucht, eine einfache Frage zu beantworten: Wenn wir aufgrund von Hunderten von Gerätegrößen nicht mehr effektiv „Seiten“ gestalten können, wie gestalten wir dann überhaupt?

Die Antwort liegt darin, alles, woraus eine „Seite“ oder „Ansicht“ bestehen könnte, in immer kleinere Teile zu zerlegen und ein „System“ von Blöcken zu erstellen, die dann zu einer unendlichen Anzahl von Variationen für unser Projekt kombiniert werden können.

Sie können es sich wie die Zutaten in einem Rezept vorstellen. Sicher, Sie könnten Muffins machen, aber Sie könnten mit derselben Zutatenliste genauso gut einen Kuchen backen.

Brad entschied sich für die Chemie-Analogie und schlug daher vor, dass unsere Systeme aus

• Atomen
• Molekülen
• Organismen

bestehen. Der Einfachheit halber betrachten wir, wie wir dies auf eine Website anwenden könnten.

Atome

Atome repräsentieren die kleinsten Bausteine, aus denen unsere Benutzeroberflächen bestehen. Stellen Sie sich ein Formular-Label, ein Formular-Eingabefeld und einen Button vor. Jedes davon repräsentiert ein Atom.

Moleküle

Moleküle sind einfach Gruppen von Atomen, die zu etwas Neuem kombiniert werden. Für unsere Zwecke können wir Moleküle als Gruppen von unterschiedlichen UI-Teilen betrachten, die zu einer aussagekräftigen Komponente kombiniert werden.

Organismen

Organismen bestehen aus Gruppen von Molekülen (oder Atomen oder anderen Organismen). Das sind die Teile einer Benutzeroberfläche, die wir als „Bereich“ betrachten könnten. In einer Rechnungsanwendung könnte ein Organismus ein Dashboard sein, das eine Schaltfläche „Neue Rechnung“ (Atom), ein Suchformular (Molekül), eine „Offene Gesamt“-Karte (Molekül) und eine Tabelle mit überfälligen Rechnungen kombiniert. Sie verstehen das Prinzip.

Betrachten wir, wie ein Organismus „Featured Block“ in unserer einfachen Website aussehen könnte.

Stacks für Konsistenz verwenden

Wie erstellen wir nun diese Bausteine, da wir ein mentales Modell für den „Kram“ haben? Sketch ist out-of-the-box großartig, aber die verfügbaren Plugins bieten riesige Performance-Tools … genau wie Texteditoren für Entwickler. Wir werden die integrierten Symbolwerkzeuge von Sketch sowie die erstaunliche Stacks-Funktion aus dem Auto-Layout-Plugin von Anima App verwenden.

Die Verwendung dieser Werkzeuge bietet unschätzbare Vorteile, auf die ich im Laufe der Zeit hinweisen werde, aber zumindest können Sie sich darauf verlassen:

• bessere Designkonsistenz und schnellere Iteration
• ein Konsistenz-Check durch die Verwendung konsistenter Abstandsmultiplikatoren
• schnelleres Neuanordnen von Inhalten
• Hilfe bei der schnellen und frühen Identifizierung von Designproblemen

Was genau sind Stacks?

Wenn Sie Entwickler jemals begeistert über Flexbox zum Erstellen von Layouts in CSS sprechen gehört haben, dann können Sie sich Stacks als das Sketch-Äquivalent vorstellen. Stacks (wie Flexbox) ermöglichen es Ihnen, eine Reihe von Ebenen zu gruppieren und dann deren Abstand und Ausrichtung auf einer vertikalen oder horizontalen Achse zu definieren.

Hier gruppieren wir drei Elemente, richten sie an ihrer Mitte aus und stellen einen vertikalen Abstand von 48px zwischen jedem ein.

Die Ebenen werden automatisch in einem blauen Ordner mit einem Symbol aus vertikalen oder horizontalen Punkten gruppiert, um zu zeigen, welche Art von Stack Sie haben.

Schauen Sie sich das an! Sie haben gerade Flexbox gelernt, ohne eine Zeile Code anzufassen. 😂

Verschachtelte Stacks

Die wahre Stärke von Stacks liegt in der Verschachtelung von Stacks in anderen Stacks.

Hier sehen wir eine Card-Komponente, die aus mehreren Stacks besteht.

• card__cta-Link aus dem vorherigen Beispiel.
• card__copy-Stack, der die Ausrichtung und den Abstand für Kopfzeile und Text verwaltet.
• card__content, das den Abstand und die Ausrichtung zwischen den card__cta- und card__copy-Stacks steuert.

Eine kurze Anmerkung zur Ebenennennung

Ich verwende fast immer die BEM-Namenskonvention für meine Komponenten. Entwickler schätzen die Logik, wenn ich Designdateien übergeben muss, da sie oft mit den Namenskonventionen übereinstimmt, die sie im Code verwenden. Wenn ich das Projekt selbst entwickle, gibt mir dies einen kleinen Vorsprung, da ich im Designstadium bereits über das Markup nachgedacht habe.

Wenn das sehr verwirrend ist, machen Sie sich keine Sorgen. Machen Sie einfach die Arbeit Ihrer Kollegen ein wenig einfacher, indem Sie Ihre Ebenen organisieren und ihnen beschreibende Namen geben.

Stacks-Schnickschnack, ich habe große Liebe zum Detail und kann das alles manuell machen!

Sie haben absolut Recht! Aber was ist, wenn Sie 10 Elemente sorgfältig angeordnet haben, alle mit unterschiedlichen Größen, und jetzt brauchen sie zusätzlichen Platz dazwischen? Oder Sie möchten einem dieser Elemente eine Textzeile hinzufügen? Oder Sie müssen Inhalte in drei Spalten statt in vier aufteilen?

Das passiert nie, oder? 😱

Eines von zwei Dingen passiert normalerweise in dieser Phase:

1. Sie beginnen, alle Dinge manuell neu zu organisieren, und jemand zahlt für die verschwendete Zeit (entweder Sie oder der Kunde).
2. Sie fummeln irgendwie herum … schließlich weiß der Entwickler sicher, was Ihre ursprünglichen Absichten waren, bevor Sie jeden Rand in Ihrem Layout um ein paar Pixel verschoben haben. ¯\_(ツ)_/¯

Hier sind die Vorteile von Stacks:

• Sie können die Ausrichtungs- oder Abstandsoptionen beliebig ändern, indem Sie einfach einen Wert anpassen, und die Dinge aktualisieren sich magisch.
• Sie können Elemente in der Größe ändern, ohne an Ihrem Zeichenbereich herumfummeln zu müssen, um alles neu anzuordnen.
• Sie können Elemente im Stack-Ordner neu anordnen, hinzufügen oder entfernen und beobachten, wie sich die Elemente gemäß Ihren Einstellungen neu verteilen – genau wie beim Code. 🎉

Beachten Sie, wie schnell es geht, Inhalte zu bearbeiten und verschiedene Layouts auszuprobieren, während die Konsistenz gewahrt bleibt.

Okay, jetzt wissen wir, warum Stacks fantastisch sind. Wie nutzen wir sie tatsächlich?

Stacks erstellen

Das Erstellen eines Stacks ist eine Angelegenheit des Auswählens von zwei (oder mehr) Ebenen und des Drückens auf das Stacks-Ordner-Symbol im Inspektor. Von dort aus können Sie entscheiden, ob Sie Ihre Ebenen horizontal oder vertikal stapeln und den Abstand zwischen den Elementen festlegen.

Hier ist ein Beispiel, wie wir eine Atom-Komponente mit Stacks erstellen würden.

Und jetzt wenden wir das Stacks-Konzept auf eine komplexere Molekül-Komponente an.

Symbole aus Stacks erstellen

Wir haben über die vielen Vorteile von Stacks gesprochen, aber wir können sie noch effizienter machen, indem wir das Symbolwerkzeug von Sketch darauf anwenden. Das Ergebnis ist ein Stack, der von einer einzigen Quellinstanz verwaltet und überall wiederverwendet werden kann.

Atom-Symbol erstellen

Wir können den eben erstellten Call-to-Action-Stack nehmen und ihn zu einem Symbol machen. Dann können wir Overrides für den Text verwenden und wissen, dass Stacks den Abstand einhalten.

Wenn ich später beschließe, den Abstand um ein paar Pixel zu ändern, kann ich einfach die Stack-Abstände auf dem Symbol anpassen und sie werden auf jeder Instanz aktualisiert 🎉

Molekül-Symbol erstellen

Ähnlich kann ich mehrere gestapelte Atome zu einer Komponente gruppieren und diese zu einem Symbol machen.

Symbole + Stacks = 💪

Wäre es nicht schön, wenn wir die räumlichen Anforderungen, die wir festgelegt haben, beibehalten könnten, unabhängig von späteren Änderungen? Ja!

Ein Element innerhalb einer Komponente durch ein anderes ersetzen

Nehmen wir an, unsere Card-Komponente benötigt jetzt einen Button anstelle eines Links als Call-to-Action. Solange wir diesen Button im richtigen Stack-Ordner platzieren, geschieht das automatische Pixel-Nudging magisch.

Moleküle und Organismen im Handumdrehen bearbeiten 🔥

Sie denken vielleicht, dass dies keine große Sache ist und dass die Anpassung des winzigen räumlichen Problems aus dem vorherigen Beispiel ohne Stacks nur einen Moment gedauert hätte. Und Sie hätten nicht Unrecht. Aber lassen Sie uns für einen Moment auf unsere Vorstellungen von Atomic Design zurückkommen und fragen, was passiert, wenn wir weitaus komplexere „Organismen“ (Gruppen von Atomen und Molekülen) zu bewältigen haben?

Ähnlich wie bei unserem mobilen Beispiel vom Anfang glänzt hier die integrierte Kraft von Stacks.

Mit einer Bibliothek grundlegender Symbole (Atome) und leistungsstarken Werkzeugen für Abstände/Ausrichtung können wir experimentieren und endlose Variationen von Komponenten erstellen. Der Schlüssel ist, dass wir dies schnell und ohne Kompromisse bei der Designkonsistenz tun können.

Komplexe Layouts und Mega-Stacks

Unter Beibehaltung der bereits entworfenen Elemente sehen wir uns an, wie ein Ebenen-Stack für eine einfache Marketingseite aussehen könnte.

Lassen Sie sich nicht von dem anfänglichen Eindruck der Komplexität dieser Stacks abschrecken. Eine nicht-gestackte Version dieses Artboards sähe nicht wesentlich anders aus, abgesehen von der Farbe der Ordnersymbole.

Doch gerade diese Ordner geben uns die ganze Macht.

Wir müssen vielleicht nicht programmieren, aber wir haben die Verantwortung, unsere Werkzeuge für Effizienz zu meistern und neue Arbeitsabläufe mit unseren Kollegen aus der Entwicklung zu erarbeiten.

Das bedeutet, wir müssen aufhören, Design im Kontext von Seiten zu betrachten, und stattdessen Sammlungen von Komponenten erstellen – Module … Zutaten … Legosteine … finden Sie eine Metapher, die für Sie funktioniert, und stellen Sie dann sicher, dass das gesamte Team die Terminologie teilt.

Sobald wir das tun, schmelzen Probleme mit Workflow und Zusammenarbeit dahin.

Geschwindigkeit und Flexibilität

Das sorgfältige Erstellen von Komponenten mit Symbolen und die Verwendung automatisierter und konsistenter Abstände/Ausrichtungen mit Stacks erfordert zwar einen anfänglichen Zeitaufwand. Die Vorteile der einfachen Experimentierfreudigkeit und der Möglichkeit, schnell und kostengünstig die Richtung zu ändern, sind es jedoch wert.

Konsistenz und UX

Das Nachdenken darüber, wie Elemente als Kombinationen und in verschiedenen Kontexten funktionieren, wird UX-Probleme frühzeitig aufdecken und Inkonsistenzen aufzeigen, bevor Sie 13 Bildschirme weit sind. Das Ändern der Richtung durch Anpassen einiger Variablen/Komponenten/Abstandseinheiten ist besser, als den ganzen Tag Elemente auf einem Zeichenbereich herumzuschieben.

Verantwortung und Governance

Eine einzelne 1440px-Seitenansicht des zu erstellenden Objekts bietet einem Entwickler einfach nicht genügend Kontext für mehrere Bildschirme und Interaktionen. Gleichzeitig ist die Erstellung mehrerer hochfideler Kompositionen für winzige Elemente ein Budgetfresser (und das gilt insbesondere für App-Designs). Was passiert also oft in kleinen Teams? Der Entwickler erhält die eine, wunderschöne 1440px-Ansicht … und die gesamte kognitive Last, die Lücken für alles andere zu füllen.

Die Details bereitzustellen ist unsere Aufgabe.

Atomic Design gab uns Geschwindigkeit, kreative Freiheit und Flexibilität. Es veränderte alles.

—Aus dem Vorwort von Atomic Design

Wenn wir mit Entwicklern an digitalen Produkten arbeiten, sollten wir uns freuen, zu lernen, wie die Wurst gemacht wird, und unseren Designansatz entsprechend anpassen. Unsere Werkzeuge entwickeln sich vielleicht nicht ganz so schnell wie JavaScript-Frameworks, aber wenn Sie in den letzten Jahren nicht unter die Haube einiger dieser Apps geschaut haben, ist dies ein guter Zeitpunkt, um einzusteigen!