Technologien

Zeplin

Bewerten:

Zeplin ist ein weiterer Online-Grafikeditor, der die Zusammenarbeit zwischen verschiedenen Teammitgliedern — UI/UX-Designer, Entwickler und Projektmanager — im Designprozess unterstützt und einen organisierten Arbeitsbereich bietet. Es kann mit Sketch integriert werden, wodurch Designer Mockups oder Projekte direkt aus Sketch hochladen und zu den Projektordnern von Zeplin hinzufügen können.

Anmerkungen (Größen, Farben, Ränder und sogar CSS-Vorschläge für einige Elemente), die im Zeplin-Arbeitsbereich gemacht werden, werden automatisch zu Projekten hinzugefügt. Lösungen dieser Art ermöglichen es Teams, gemeinsam ein Projekt zu erstellen, das die einzige Quelle der Wahrheit ist, bei der jedes Teammitglied sofortigen Zugriff auf Änderungen, Korrekturen, Ressourcen und Kommentare eines anderen Teammitglieds hat.

Mitglieder teilen

Zeplin ist eine Quelle der Wahrheit über die Schnittstelle einer Anwendung in der Entwicklung für das gesamte Team, nicht nur für die Entwickler. Dank dieses Tools können alle gleichzeitig zusammenarbeiten.

Am besten ist es, nur den Entwurf auf Zeplin zu veröffentlichen, der später von den Projektmanagern und Entwicklern analysiert wird (dank der Freigabefunktion). Auf diese Weise enthält Zeplin nur die Entwürfe, die vom Team akzeptiert und in die Produktion übernommen wurden.

Zeplin bietet eine Funktion, die es Produktteams ermöglicht, die veröffentlichten Entwürfe zu kommentieren und Anmerkungen hinzuzufügen.

Gemeinsames Design

Entwurfsdateien und Daten werden in Zeplin projektbezogen organisiert, und der Projekteigentümer gewährt den übrigen Teammitgliedern Zugriff darauf. Jedes Projekt kann eine unbegrenzte Anzahl von Dateien haben, und Zeplin erleichtert deren Organisation durch die Bereitstellung von angemessen benannten Abschnitten.

Designsystem

Zeplin bietet mehr als nur die Gestaltung von App-Bildschirmen (UI-Mockups, Rahmen). Es ermöglicht dem Benutzer auch, die in den Mockups verwendeten Komponenten zu veröffentlichen und zu organisieren. Zeplin macht es möglich, das gesamte Designsystem (Farben, Textstile, Abstände und Layout) in die Produktion zu übertragen.

Die Komponenten werden im Styleguide-Bereich jedes Projekts gespeichert und aus Sketch, Figma oder Adobe XD exportiert. Einige Komponenten liefern auch Codeschnipsel an Zeplin, sodass Entwickler ein CSS-Stylesheet schneller erstellen können, was zu kürzeren Web- und Mobilentwicklungsprozessen führt.

Verwaltung von Designs

Zweifelsohne unterstützt Zeplin den gesamten Entwicklungsprozess und gehört zu den Management-Tools. Neben den oben genannten Integrationen (Figma, Sketch, Adobe XD) bietet Zeplin auch die Kommunikation mit anderen beliebten Management-Anwendungen: Slack, Jira, Teams, Trello und Storybook. So können wir alle wichtigen Updates unabhängig von der verwendeten Anwendung teilen.

Um Änderungen an veröffentlichten Entwürfen und Codes vorzunehmen, müssen diese wieder nach Zeplin exportiert werden. Das Werkzeug überschreibt die alte Entwurfsversion mit einer neuen, solange der Rahmen in Zeplin und dem Design-Tool, das ihn erstellt hat, den gleichen Namen hat.

Systeme: Der Platz von Zeplin in diesem Prozess

Zusammenfassend lässt sich sagen, dass das Zeplin-Tool ein wichtiges Element in unserer Produktionskette ist (Design-Apps: Figma, Sketch, Adobe XD -> Zeplin -> Storybook), mit dem wir schöne Produkte liefern können. Es hat seinen Platz an der Schnittstelle von Design und Programmierung.

Zeplin verfügt über ein umfangreiches Berechtigungssystem (das Team besteht aus einem Eigentümer, einem Administrator und Mitgliedern). Es ermöglicht uns, die Designarbeit nicht nur in Form von Frames, sondern auch in einem Designsystem zu verteilen. Es wird verwendet, um Änderungen zu kommunizieren und die neueste Version eines Designs zu pflegen.

Vorteile der Verwendung von Zeplin

Entwickler
Zeplin ist eine einzige Quelle der Wahrheit für das Entwicklungsteam. Es bietet Integrationen mit Tools wie Jira, Storybook, VC Code, Slack und Teams. Es ermöglicht den Download des CSS-Stils einer Komponente und von Dateien, die in grafischen Designs verwendet werden (SVG, WEBP, PNG).
Designer
Ein Designer verwendet Zeplin, um die endgültigen grafischen Entwürfe zu übermitteln.

Tipps & Tricks zur Verwendung von Zeplin.

Exportieren von Assets aus Figma
Zeplin kann automatisch Grafiken, die in einem Grafikdesign verwendet werden, in verschiedenen Maßstäben und Formaten (SVG, WEBP, PNG) zum Download generieren. Die markierten Grafiken werden als Assets bezeichnet.
Wie erstellt man ein Asset zum Herunterladen in Zeplin?
Sie können Assets in Figma mit der Slice-Funktion erstellen und den Rahmen, der das Asset enthält, nach Zeplin exportieren. Wir empfehlen das Plug-in Fast Slice für das „Aufschneiden“ eines Assets in Figma.
Warum sollten die Namen der Rahmen eindeutig sein?
Wenn zwei oder mehr Rahmen den gleichen Namen haben, wird nur einer in Zeplin exportiert. Der zuletzt exportierte Rahmen überschreibt den Rahmen mit demselben Namen.
Spielt die Länge des Rahmennamens eine Rolle?
Zeplin hat eine Grenze von 100 Zeichen für Rahmennamen. Im Exportprozess ist dies von Bedeutung, und zwei Frames mit einem Namen, der erst ab dem 101. Zeichen eindeutig ist, werden von Zeplin als Duplikate betrachtet.

Nächster Schritt

Figma

Dział
Design stack