Erstellen von Komponentenbibliotheken in Figma, Einsparen eines Budgets am Beispiel einer Online-Auktion

In diesem Artikel werden wir erzählen, wie wir keine Kugel im luftleeren Raum entwickelt haben, sondern eine echte Bibliothek von Komponenten, und wie wir es geschafft haben, übermäßigen Perfektionismus (nicht zum Nachteil des Projekts) zu ignorieren, um 25% des Budgets einzusparen .

Dies ist der erste Teil des Artikels, in dem es viele langweilige, aber konkrete praktische Informationen zum Erstellen von Komponenten in Figma sowie zu den Nuancen, Fallstricken und Realitäten beim Erstellen von Projekten mit einem begrenzten Budget in einer Provinzumgebung geben wird =)

Dem Arbeitsbeginn ging eine lange Verhandlungs- und Analysephase voraus, auf deren Grundlage ein detaillierter ToR mit einer Aufteilung in funktionale (dynamische) und statische Blöcke erstellt wurde. Details dazu finden Sie in diesem Artikel . Wenn Sie noch nicht an einem solchen TK arbeiten, empfehlen wir es dringend. Sehr positive Erfahrung für das gesamte Entwicklungsteam und das gesamte Projekt.

Aber zurück zum Design

Es ist erwähnenswert, dass Figma auf dem Höhepunkt der Arbeit ein sehr angenehmes Update herausgebracht hat, sodass es kein Wort über Farbe und Textstile geben wird. Wir hoffen, dass ein aufmerksamer Leser auch ohne diese Nuancen etwas Nützliches für sich selbst lernen wird. Wenn Sie nicht über ein grundlegendes Verständnis der Prinzipien zum Organisieren von Komponenten in figma verfügen, empfehlen wir eine Suche auf habr.com (es gibt viele großartige Materialien zu diesem Thema).

Bevor wir mit dem pixelgenauen Design beginnen, erstellen wir in den meisten Fällen ein Designkonzept. Normalerweise handelt es sich um eine Art Rohlayout (von der visuellen Seite), das im Hinblick auf das Verhalten auf verschiedenen Bildschirmen gründlich durchdacht werden sollte und die Hauptfunktionalität berücksichtigt. Dies ist notwendig, um in Zukunft unangenehme Überraschungen zu vermeiden, wenn ein vergessener Block nicht in die genehmigten Layouts eingebettet ist. Daher ist ein Konzept eher ein Entwurfslayout für reale Seiten als ein Styleboard, das dennoch einen grundlegenden Satz von Stilen und grundlegenden Layouts für zukünftige Seiten bereitstellt.

In diesem Fall war das Konzept wie folgt:



Im Allgemeinen nichts kompliziertes. Das einzige, was besondere Aufmerksamkeit erfordert (auf dieser Seite), ist eine Vorschau der Lose (diese Karten), die aus einem unbegrenzten Satz von Positionen (diese Zeilen befinden sich in den Karten) und einem unterschiedlichen Satz von Schaltflächen für verschiedene Rollen bestehen.

Es gibt immer noch einige unerklärliche Nuancen, aber wir waren uns einig, ehrlich zu sein und auf unnötige Körperhaltung zu verzichten, sodass wir erzählen werden, wie sie dabei aufgetaucht sind.



Also - alles ist vorbereitet. Wir haben TK mit vorgeschriebenen Funktionen zum Verständnis der Funktionsweise von Komponenten; Styleboard als Konzept zum Verständnis des Stils von Elementen; der Standard für die Benennung von Komponenten für die schmerzlose Übertragung von Design auf Layout und eine unendliche Anzahl von Beruhigungsmitteln aller Art und Farben ...

Sie können anfangen, in der Figur herumzustöbern

Der Entwicklungsalgorithmus für das Entwurfssystem wird eine Bewegung von einfachen, unteilbaren Komponenten (Atomen) zu komplexeren sein, und für eine visuelle Darstellung der Hierarchie werden wir jede nächste Komplexitätsstufe in einer neuen Spalte zeichnen.

Text

Zunächst definieren wir unteilbare Elemente: einen Standardsatz von Überschriften, einen Absatz und einzelne Stile für Schaltflächentext, einen Stil für Platzhalter und Filternamen und etwas anderes. Vergessen Sie nicht, alles in Komponenten zu verwandeln!



Montserrat Medium als Hauptschrift und Montserrat fett für Überschriften und Highlights.
Gehen Sie zu den Symbolen. Wir haben sie aus der kostenlosen Bibliothek "Feather" gezogen.

Symbole

Jedes Symbol wird in einem 24x24-Pixel-Container platziert und in der Mitte entlang zweier Achsen ausgerichtet (nur für den Fall). Alle Symbole werden nach Geschmack aufgerufen, jedoch mit dem Präfix „i“, damit die Namen keine Duplikate enthalten, und gruppieren Sie sie, um das Bedienfeld nicht mit Ebenen zu überladen.



Wir werden auch soziale Netzwerksymbole und zusätzliche E-Mails für Benachrichtigungen über unvollständige Eingaben, Filter-Reset, ein Sternchen für erforderliche Positionen im Los, einen Chevron für Dropdowns und ein Häkchen für Kontrollkästchen und Funk-Batttans haben. Alle diese Symbole sind kleiner und leichter als die wichtigsten, aber aus Gründen der Standardisierung werden sie auch in einen 24x24-Container gelegt.

Als nächstes gehen wir zu komplexeren Komponenten über. Wir werden sie rechts positionieren und sie aus Elementen aus der ersten Spalte und Stöcken zusammensetzen.

Kontrollkästchen

Beginnen wir mit etwas Einfacherem.

Kontrollkästchen und Radiobuttons in Behältern mit 16 x 16 Pixel. Erstellen Sie für jeden Status eine separate Komponente. Dies ist erforderlich, damit wir bei der Gestaltung von Seiten (zusammengesetzt aus diesen Komponenten) über das INSTANCE-Bedienfeld einen Status durch einen anderen ersetzen können.



Wir machen dasselbe mit allen dynamischen Elementen, die Führungszustände haben, aktiv, passiv usw.

Zähler und Schieberegler

Wir brauchen auch einen Zähler, um die Menge von etwas anzuzeigen. Dies sind je nach Standort unterschiedliche Daten. Wir machen einen 20x20 Rahmen und eine Figur in der Mitte.

Schaltflächen für die Schiebereglerobjekte sind auch für uns nützlich. Wir machen sie 30x30 und platzieren die Chevron-Symbole bedingt in der Mitte. Wir erstellen Komponenten für verschiedene Zustände.

Katalogbaum

Vor kurzem haben wir begonnen, uns an das Prinzip zu halten, dieselben Komponenten auf verschiedenen Geräten wiederzuverwenden, um keine unnötigen Entitäten zu erzeugen und die Reinheit des Codes (so weit wie möglich) beizubehalten. Daher erstellen wir den Katalogbaum ausgehend von der mobilen Anzeige. TK sagt uns, dass die maximale Verschachtelungsebene eines Baumes 3 beträgt.

Wir beginnen mit der ersten Ebene: Ein Rahmen mit einer Höhe von 60 Pixel und einer dimensionslosen Breite (er passt sich dem Container an), das Symbol ist vertikal ausgerichtet und 20 Pixel vom linken Rand entfernt. Der Name des Zweigs stammt von der h4-Komponente. All dies wird im CONSTRAINS-Bedienfeld auf die linke Seite geklebt. Kleben Sie die Anzahl der Lose (auch h4) und den Chevron auf die rechte Seite.

Zeichnen Sie die Komponente für den offenen Zweig neu. Wir organisieren die zweite Ebene des Katalogs auf die gleiche Weise, aber weil Wir werden diese Stile nirgendwo wiederverwenden - klonen Sie einfach die Absatzzeilen in Schritten von 20 Pixel. Wie in Photoshop - keine Probleme. Ähnliches gilt für die dritte Stufe + Stick + Linienfarbänderung.

Als nächstes folgt eine Reihe kontinuierlicher Kompromisse

Menü

Das Registerkartenfeld für alle Arten von Menüs und Registerkarten wurde in einem 60-Pixel-Container in der Höhe platziert, und die Elemente selbst wurden in der Mitte platziert. Mit Blick auf die Zukunft sagen wir, dass dieser Ansatz nicht zutrifft, denn wenn Sie ein vollständig gummiertes Layout erhalten möchten, muss jede Lasche in einem separaten Rahmen platziert werden. Andernfalls funktioniert es nicht, das Verhalten der Registerkarten relativ zueinander festzulegen. Aber wir haben es im Gespräch mit den Entwicklern mit ruhigem Herzen geschafft.

Listen

Mit der Zeit erinnerte ich mich an eine Kleinigkeit wie nummerierte und nicht nummerierte Listen. Um eine Zahl hinzuzufügen, kehren wir zur ersten Spalte zurück und erstellen eine zweistellige Zahlenkomponente.

Eingänge und Filter

Der Moment kam, als wir unsere eigenen Hierarchieregeln verletzten und die Komponenten und Komponenten, die aus diesen Komponenten bestehen (* _______ *), in einer Spalte platzierten (erinnern Sie sich: Die Regel war, sie rechts zu platzieren und sie in einer separaten Spalte herauszunehmen). Es war möglich, darauf zu verzichten, aber wir haben entschieden, dass der Block (Filter oder Eingang) und sein Dropdown eine Komponente in verschiedenen Zuständen umfassen. Wie Salvor Hardin sagte: "Lassen Sie sich niemals von der Moral davon abhalten, das Richtige zu tun."

Wir haben diesen Kompromiss aus folgendem Grund eingegangen: Die Zusammensetzung der Eingabe und beispielsweise Kontrollkästchen sollten zum gleichen Schwierigkeitsgrad gehören (eine Spalte), aber die Dropdown-Liste in der Eingabe kann Kontrollkästchen enthalten. Wir wollten wirklich, dass die Dropdown-Listen eine einzige Einheit mit Eingabe bilden - um eines schönen Schattens willen.



Sie können sagen, dass Sie dann die Eingabe mit den Dropdowns in eine separate (nächste Spalte) setzen mussten und Sie werden Recht haben. Dabei wurde uns jedoch nicht sofort klar. Und seit der Einführung des Förderers waren wir aufgrund des Budgets und der Fristen gezwungen, gegen dieses ungeschriebene Gesetz zum Bau atomarer Entwurfssysteme zu verstoßen. Lassen Sie sich aus Erfahrung erzählen - kein einziger Designer oder Entwickler hat darunter gelitten.

Wir werden zum praktischen Flugzeug zurückkehren.

Eingänge

Innerhalb des 60px-Rahmens platzieren wir die Absatzkomponente als Platzhalter. Wenn die Eingabe scharfgestellt ist, wird der Platzhalter nach oben verschoben. Wir geben ihm einen Einzug von 20 Pixel und kleben ihn an den linken Rand. Fügen Sie am unteren Rand des Blocks eine Linie von 2 Pixeln hinzu (verwenden Sie Rechtecke!). Kleben Sie vertikal nach unten. Horizontal können Sie Skalieren auswählen. Weiter rechts können wir in verschiedenen Situationen entweder eine Maßeinheit oder einen Dropdown-Chevron haben. Fügen Sie sowohl das als auch ein anderes hinzu und kleben Sie es an die rechte Kante. Jetzt ist alles ordentlich gestreckt, und alle Kopien dieser Komponente erben das Verhalten des übergeordneten Elements.



Wir fügen Komponenten für verschiedene Zustände hinzu: Cursor über Cursoreingabe, Fokus, Dropdown-Liste öffnen, gültig und ungültig. Eine Möglichkeit, schnell Zustände zu erstellen, besteht darin, eine Komponente zu klonen, Option + Befehl + b oder „untergeordnete Instanz“ über das Kontextmenü zu drücken. Wir bearbeiten, was wir brauchen, und verwandeln es in eine neue Komponente. Vergessen Sie nicht umzubenennen.



Bei Filtern ist die Situation ähnlich und mit Ausnahme des Standardstatus und des Hinzufügens eines Kreuzes zum Zurücksetzen von Werten unterscheiden sie sich nicht von Eingaben. Vergessen - die Eingaben werden horizontal nacheinander verschoben, sodass am rechten Rand eine graue Linie von 2 Pixel hinzugefügt wird. Vergessen Sie nicht, es an die rechte Kante zu kleben.

Knöpfe

Es gibt zwei Arten von Schaltflächen in unserem Projekt.

Erstens: die üblichen Schaltflächen, die überall verwendet werden, mit Ausnahme der Vorschaukarten des Loses. Ihre Anatomie ist folgende: Ein 30 Pixel hoher Rahmen mit transparentem Hintergrund, ein Rechteck ähnlicher Größe mit einer Rundung von 15 Pixel (im Bedienfeld EINSCHRÄNKUNGEN legen wir den Skalierungswert in beiden Achsen fest) und die btn-txt-Komponente, die wir in allen Achsen in der Mitte ausrichten (für jeden Feuerwehrmann entscheiden wir plötzlich Erhöhen Sie die Höhe der Taste?) Wählen Sie in einer separaten Komponente den Tastenstil beim Hover und einen separaten zum Drücken aus.



Die zweite Art von Schaltflächen sollte in den Stil der Vorschaukarten passen und Symbole enthalten. Zusätzlich zur Push-Funktion melden die Tasten über einen Zähler aus derselben Spalte (Verzeihung), beispielsweise wie oft die Taste gedrückt wurde.



Wir machen sie aus 60px hohen Rechtecken, deren Breite vom Inhalt abhängt. Wir binden die Komponenten des Symbols und von btn-txt auf allen Achsen ein und zentrieren sie. Wir setzen die Zählerkomponente so auf das Symbol, dass die untere linke Ecke mit der Mitte des Symbols übereinstimmt. Die Schaltflächen werden nacheinander angeordnet, sodass wir auf jeder Seite einen grauen Streifen von 2 Pixeln zur visuellen Trennung hinzufügen. Unnötig, dann an Ort und Stelle ausschalten. In diesem Fall in der Vorschau-Komponente des Loses.

Wir werden auf diese Ebene der Komponenten zurückkehren, aber vorerst weitermachen.

Hut

Gehen Sie zur neuen Spalte und beginnen Sie mit dem Sammeln der Kopfzeile.

Wir nehmen den Rahmen mit der gleichen Höhe von 60 Pixeln als Basis. Fügen Sie unten eine graue Linie von 2 Pixeln hinzu. Nehmen Sie die Breite von 1440px, weil Wir werden alle Desktop-Vorlagen mit dieser Erlaubnis sammeln. Wir folgen bereits dem Standardschema: Ausrichtung mit der Mitte der vertikalen, horizontalen Einrückung von 20 Pixeln, Logo, Menüregisterkarten, Suche (es wurde in Analogie zur Eingabe in der zweiten Spalte zusammengestellt).



Die rechte Seite der Kopfzeile sollte ein Informationsfeld mit den aktuellen Kontoinformationen und sogar eine Dropdown-Liste enthalten. Wir kehren zur vorherigen Spalte zurück und sammeln diese Ware aus den Symbolen und dem Text (Sie wissen bereits wie).



Um eine Dropdown-Liste für eine Vorlage anzuzeigen, fügen wir zwei Komponenten gleichzeitig hinzu (Dropdown-Liste öffnen und schließen). Einer wird ausgeschaltet, indem man in das Auge auf dem Ebenenfeld stößt. Vergessen Sie nicht, den Clip-Inhalt im HINTERGRUND-Bedienfeld zu deaktivieren.



Als nächstes vereinfachen wir den Header für kleinere Bildschirme, indem wir das Unnötige beschneiden. Wir handeln auf bewährte Weise. Wir klonen, trennen, löschen das Unnötige, fügen das Burger-Symbol hinzu, benennen es um und verwandeln es in eine Komponente.
Bei 320 Pixeln können wir den Einzug zwischen den Symbolen leicht verschieben.

Jetzt ist es an der Zeit, den Gummi einzustellen. Wählen Sie dazu unsere Komponente „Header-Desktop“ aus und gehen Sie zu LAYOUT GRID. Wechseln Sie zu den Lautsprechern. Die Anzahl der Spalten spielt in diesem Fall keine Rolle. Hauptsache, das Raster sollte (für verschiedene Aufgaben versuchen Sie verschiedene Raster) Ränder von 20 Pixeln haben. Als Nächstes konfigurieren wir das Verhalten der verschachtelten Komponenten des Headers.



Ausführlichere Informationen zu den Einstellungen der Gummiart der Vorlagen erhalten Sie im zweiten Teil dieses Artikels.

Burger

Jedes Mal, wenn wir die Navigation für einen Burger entwarfen, begannen wir, Krücken zu erfinden, aber in diesem Fall nicht. Es stellte sich heraus, dass wir alles haben, was wir für einen Burger brauchen, mit Ausnahme des Schließknopfes. Wir stellen die erforderlichen Komponenten zu einem Bündel zusammen und verwandeln sie in eine neue Komponente.

Losvorschau

Gehen Sie zu den Vorschaukarten für den Katalog. Zunächst wurde klar, dass Sie separate Komponenten für die Schaltflächen im mobilen Display erstellen müssen (mit den Mitteln der Abbildung können Sie die Symbole nicht zentrieren, wenn Sie den Schaltflächentext einfach ausblenden). Wir gehen zur Spalte mit den quadratischen Schaltflächen und beenden die Zustände für schmale Bildschirme. Fügen Sie ein dreispaltiges Raster hinzu.



Für die Karten selbst erstellen wir zunächst die Werbebuchungskomponente und Blöcke mit Basisinformationen. Wir gruppieren sie so, dass durch eine einfache Neuerstellung ein mobiles Display erzielt werden kann.



An dieser Stelle machen wir eine kurze Pause, um einen bereits immensen Artikel nicht aufzublasen. Im zweiten Teil werden wir darüber sprechen, wie die oben genannten Komponenten zusammen gruppiert werden und reaktionsfähige Seitenvorlagen bilden.

Wir sind zuversichtlich, dass dieser Ansatz immer noch nicht ideal ist, und freuen uns daher über Kommentare zu diesem Thema (insbesondere, wenn Sie wissen, wie Sie die Abbildung produktiver einsetzen können). Ihre Erfahrungen werden uns dabei helfen, unsere Geschäftsprozesse zu verbessern. Rund.