Schnelltipp So verwenden Sie Zeplin, um Style Guides zu erstellen

Wir haben bereits darüber gesprochen, wie Designer mit Zeplin mit dem Entwicklerteam zusammenarbeiten können, aber es gibt noch ein bisschen mehr. Zeplin ist auch ein hervorragendes Werkzeug zum Erstellen von Style-Guides. Es sorgt dafür, dass Ihr Team konsistente Erfahrungen macht, indem es einen aktuellen Online-Leitfaden für alle Benutzer von überall her zur Verfügung stellt. 

Sie können Schriftarten und Farbinformationen speichern und umbenennen und sogar CSS exportieren. Der Style Guide und die Inspect-Funktion sparen viel Zeit, wenn die Zeit für die Qualitätssicherung (Qualitätssicherung) ansteht. Lass uns schnell sehen, wie es funktioniert!

Styles hinzufügen

Wählen Sie zunächst einen Bildschirm aus dem Projekt-Dashboard aus.

Wählen Sie dann das Element aus, dessen Eigenschaften Sie dem Style Guide hinzufügen möchten (z. B. select) H1 Titel Schriftfamilie, Größe und Farbe hinzufügen).

Bewegen Sie den Mauszeiger über das Inspektor-Tool und suchen Sie nach dem Symbol Aa+ die durch die Textstile angezeigt wird, um sie dem Schriftartenbuch hinzuzufügen:

Ausgewählter Titel und seine Eigenschaften im Inspektor

Das Hinzufügen von Farben funktioniert auf ähnliche Weise. Klicken Sie auf das Drop-Symbol neben jedem, um Ihre Farbpalette zu erstellen:

Gleiche Sache mit Farben

Ihr Style Guide

Um Ihren Style Guide in Aktion zu sehen, wählen Sie die zweite Registerkarte aus Gestaltungsrichtlinie oben auf der Seite:

Alle zuvor hinzugefügten Elemente werden dort vorhanden sein. Sie können jetzt fortfahren und jedem einen geeigneten Namen geben. Bewegen Sie den Mauszeiger über den Standardfarbnamen und klicken Sie, um ihn zu ändern.

HinweisVerwenden Sie Namen und Namenskonventionen, die dem gesamten Team bekannt sind.

Machen Sie dasselbe für Schriftarten. Aktualisieren Sie sie mit einem Namen, mit dem Designer und Entwickler vertraut sind. Vergessen Sie nicht, dass Sie bei der Dev-Übergabe helfen, sondern auch ein Repository erstellen, das von anderen Designern verwendet werden kann.

Was Sie am Ende bekommen, ist etwa so:

Exportieren

Wenn Sie nun Teil der dev-Operation sind, möchten Sie möglicherweise das CSS aus der rechten Spalte kopieren. Sie finden es in der von Ihnen bevorzugten Syntax. Sass, LESS, Stylus oder einfaches CSS.

Jede Regel kann einzeln zum Download ausgewählt werden Befehl + A wählt alles zum Kopieren und Einfügen aus. 

Fazit

Keine veralteten Style-Guides mehr gespeichert, die niemand finden kann, keine E-Mail-Ketten mehr, um die neueste Farbe herauszufinden. Zeplin kann Ihrem gesamten Team effizient helfen. Prost zur Produktivität!