Share
Lassen Sie uns einen Blick auf Sympli werfen. eine Kollaborationsplattform für Designer und Entwickler. Es funktioniert mit Xcode, Android Studio, Sketch und Photoshop. In diesem Lernprogramm werden wir die Perspektive des Designers erläutern. Anschließend wird in einem Folge-Beitrag gezeigt, wie Sympli aus der Sicht eines Entwicklers funktioniert.
Wenn ein Team an einer App-Benutzeroberfläche arbeitet (sei es für ein Android-, iOS- oder HTML5-Projekt), wird die Übergangsphase vom Entwurf zum Code oft felsig, ineffizient und manchmal etwas schmerzhaft.
Sobald ein auf Photoshop oder Skizzen basierendes Design fertiggestellt ist, wird es normalerweise an das Entwicklerteam weitergeleitet. Von dort kann das Entwicklerteam Bildressourcen extrahieren, Dimensionen abmessen und manuell die Farben, Schriftarteinstellungen und den Textinhalt ermitteln, die in Code übersetzt werden müssen. Wenn Änderungen an den ursprünglichen Designdateien vorgenommen werden, ist das Übertragen von aktualisierten Dokumenten über Dropbox (oder E-Mail) langsam, unübersichtlich und schwer zu verfolgen.
All diese Schritte verlängern den Entwicklungsprozess erheblich, und außerdem müssen Codierer auf Design-Apps zugreifen und diese erlernen, die sie sonst nicht benötigen würden. Dies bedeutet zusätzliches Geld, das für Softwarelizenzen aufgewendet wird, und für die Zeit, die für die manuelle Bearbeitung von Aufgaben aufgewendet wird, die zwischen Design und Programmierung in das Niemandsland fallen.
Hier tritt Sympli ein, um eine Lösung vorzuschlagen. Anstatt, dass Entwickler diese Schritte "zwischen" manuell abwickeln müssen, versucht Sympli, den gesamten Übergangsprozess zu automatisieren. Sobald ein Designer seine Benutzeroberfläche abgeschlossen hat, exportiert er sie nach Sympli, das dann automatisch die Asset-Vorbereitung, die Bemaßung von Layout-Dimensionen, die Erzeugung von Farbpaletten, die Extraktion von Schriftarten und mehr übernimmt.
Entwickler können dann vergessen, dass Photoshop oder Sketch vorhanden sind. Stattdessen können Sie Designs über Sympli anzeigen, wo ihnen alles zur Verfügung steht, um direkt in das Coding-Geschäft einzusteigen.
Designer müssen nur das Sympli-Plugin für Photoshop oder Sketch installieren. Beide sind als kostenlose Downloads verfügbar:
https://sympli.io/downloads/webCodierer haben die Möglichkeit, das Plugin für Android Studio, das Plugin für Xcode oder die Web-App von Sympli für HTML5- und CSS-basierte Projekte zu verwenden. Diese drei können alle für ein einzelnes Projekt verwendet werden. Wenn Sie also mitverfolgen möchten, während wir durch dieses Tutorial zu sympli.io gehen, können Sie sich ein Konto sichern.
Dieser Artikel ist der erste Teil einer zweiteiligen Serie. Wir betrachten zunächst die Design-Seite der Gleichung und zeigen Ihnen, wie Sie Ihre Design-Dokumente am besten einrichten und nach Sympli exportieren. Wir konzentrieren uns auch auf die weborientierte Codierung und schauen uns die Funktionsweise der Sympli-Web-App an. In dem folgenden Tutorial werden wir Sympli mit Android Studio und Xcode verwenden.
Beginnen wir ganz am Anfang: Installieren Sie das Sympli-Plugin in Ihrer bevorzugten Design-Software.
Zuerst müssen Sie die Downloadseite aufrufen und dann das Sympli-Plugin für Ihre bevorzugte Design-App installieren und installieren. Entweder Sketch oder Photoshop.
Nach der Installation können Sie in Sketch auf das Plugin zugreifen Plugins> Sympli> Export nach Sympli. In Photoshop finden Sie es unter Fenster> Erweiterungen> Sympli.
Beachten Sie, dass Sie sich beim ersten Start des Plugins anmelden müssen, um die Kommunikation mit Ihrem Sympli-Konto zu ermöglichen.
Projekte sind der Kern der Arbeit mit Sympli. Jedes Projekt kann mehrere „Designs“ oder Bildschirme enthalten. Sie können auch mehrere PSD- oder Sketch-Quelldateien in ein einziges Projekt einspeisen, wenn Sie dies wünschen.
Projekte können für Web, iOS oder Android mit einer unterstützten Auflösung von 1 ×, 2 × und 3 × erstellt werden. Wie bereits erwähnt, konzentrieren wir uns in diesem Tutorial auf das Web. In Kürze wird es ein weiteres Tutorial geben, das sich auf iOS- und Android-Projekte konzentriert.
Sie können ein neues Projekt online über die Sympli-Benutzeroberfläche "Projekte" erstellen:
Alternativ können Sie dies auch vom tun Projekte Registerkarte im Photoshop-Plugin:
Oder im Sketch-Plugin, indem Sie auf klicken Neues Projekt erstellen dann wählen Sie Ihre bevorzugten Optionen:
Unabhängig davon, ob Sie mit Sketch oder Photoshop arbeiten, können Sie Designs für die Synchronisierung mit Sympli am besten mit Artboards vorbereiten. Jedes unterschiedliche UI-Modell sollte sich beispielsweise in einer eigenen Zeichenfläche befinden:
Der Grund dafür ist, dass nach dem Export nach Sympli (den wir später behandeln werden) jede Zeichenfläche separat abgeholt und verarbeitet wird. Sie können dann einzeln auf sie zugreifen, um ihre Assets und Informationen zum Code abzurufen. Jede Zeichenfläche wird in der Sympli-Weboberfläche als "Design" angezeigt.
Sympli ist darauf ausgelegt, die Skalierungsanforderungen für die Auflösungen 1 ×, 2 × und 3 × zu berücksichtigen. Sie können beispielsweise Layout-Dimensionen durch zwei oder drei teilen, so dass Sie vorher wissen müssen, welchen Skalierungsfaktor Sie benötigen, um die richtigen Ergebnisse zu erzielen.
Wenn Sie beispielsweise eine Benutzeroberfläche mit 2 × Auflösung für das iPhone 6 entwerfen, die eine Anzeigegröße von 375 x 667 Pixeln hat, müssen Sie sicherstellen, dass Ihre Zeichenflächen jeweils doppelt so groß sind wie 750 × 750 × 1134 Pixel.
Wenn Sie ein 2 × Webprojekt nach Sympli exportieren, werden alle Dimensionen in Ihrem Layout einschließlich derjenigen, die in generiertem CSS-Code ausgegeben werden, halbiert (wir werden später mehr über CSS sprechen). Ihre 750px by 1134px-Zeichenboards werden als 375px von 667px-Sympli-Designs mit 2 × Auflösung erkannt, wie in der unteren linken Ecke des Screenshots unten dargestellt.
Sympli extrahiert automatisch Assets für alle erforderlichen Auflösungen. Sie müssen jedoch zunächst festlegen, welche Teile des Designs in Bilder konvertiert werden sollen. Der Vorgang, der dazu durchgeführt wird, unterscheidet sich ein wenig zwischen Sketch und Photoshop.
Wählen Sie in der Skizze die Ebene oder Gruppe für das Element aus, das Sie als Bild exportieren möchten, und klicken Sie auf Exportierbar machen + Schaltfläche unten in der rechten Spalte.
Wenn Sie zum ersten Mal auf die Schaltfläche klicken, wird ein Bild mit 1 × Auflösung für den Export vorbereitet. Sie müssen es also mehrmals anklicken, um zusätzliche Auflösungen wie 2 × zu erhalten (siehe unten).
Wenn Sie mit Photoshop arbeiten, wählen Sie die Ebene oder Gruppe des Elements und dann im Sympli-Plugin-Fenster aus Assets-Dienstprogramm Tab klicken Als Asset markieren. Es fügt der Ebene das Präfix „AST:“ hinzu und markiert es somit als Asset. Sie können die Ebenen auch manuell umbenennen, um dieses Präfix stattdessen hinzuzufügen.
Wenn Ihr UI-Design fertig ist, wählen Sie die Zeichenflächen aus, die Sie exportieren möchten. Wenn Sie noch kein Projekt einrichten, können Sie dies jetzt über das Sympli-Plugin für Ihre Konstruktionssoftware tun. Als Teil dieses Prozesses haben Sie die Möglichkeit, Ihr Design sofort zu synchronisieren / exportieren.
Wenn Sie bereits ein Projekt eingerichtet haben, stellen Sie sicher, dass Sie das richtige im Photoshop / Sketch-Plugin identifizieren, und drücken Sie dann die entsprechende Taste Sync oder Jetzt synchronisieren Taste.
Sympli verbringt einen Moment mit dem Export von Bildern und dem Hochladen Ihrer Designs. Sobald Ihr Projekt exportiert ist, können Sie es auf der Seite "Projekte" von Sympli anzeigen. Von hier aus können Sie jedes Design / Artboard auswählen und es über die Web App zur näheren Betrachtung aufrufen.
Sobald das Projekt exportiert wurde, kann es an das Entwicklerteam übergeben werden. Mitarbeiter können auf das Projekt über einen Link zugreifen, der direkt von der Sympli-Web-App oder über das Plugin in Sketch oder Photoshop kopiert und per E-Mail versendet werden kann.
Während des Exportvorgangs hat Sympli alle Assets vorbereitet und hochgeladen, die Sie in Ihrem Quelldesign-Dokument definiert haben. Diese Assets können auf einmal über das Internet heruntergeladen werden Alles herunterladen Schaltfläche in der Sympli-App oder einzeln, indem Sie auf das nach unten zeigende graue Pfeilsymbol rechts neben dem Element klicken.
Jedes Asset kann als Bitmap- (PNG) oder Vektordatei (SVG) heruntergeladen werden.
Wenn sie als Bitmaps heruntergeladen werden, werden die Bilder mit jeder der während des Projektaufbaus festgelegten Auflösungen heruntergeladen, z. 1 ×, 2 ×, 3 ×.
Nach dem Export in Sympli können Sie Assets auch mithilfe von "Mapping" umbenennen. Das Mapping-System speichert den alten Namen des Assets und ordnet es dem neuen hinzu, den Sie hinzugefügt haben. Wenn die Quelldatei erneut exportiert wird, werden die Assets jedoch korrekt aktualisiert, behalten jedoch ihre neuen Namen.
In der Web-App sehen Sie auf der linken Seite eine kleine Leiste, die Sie mit hilfreichen Tools versorgt.
Durch Erweitern des Ebenenwerkzeugs erhalten Sie eine vollständige Darstellung der Ebenen in Ihrem ursprünglichen Quelldokument. Dies ist besonders hilfreich bei der Auswahl von Ebenen, die möglicherweise hinter anderen Ebenen verdeckt sind und daher mit der Maus schwer zu wählen sind.
Das zweite Werkzeug besteht aus zwei sich kreuzenden Linealen, deren Fadenkreuz Sie auf der Seite ziehen können, um den Abstand zwischen den Kanten der Benutzeroberfläche und dem Mittelpunkt der Lineale zu messen.
Das dritte Tool bietet die Möglichkeit, Kommentare hinzuzufügen, über die Sie mit Ihrem Team kommunizieren können. Aktivieren Sie das Kommentartool, klicken Sie auf eine Position im Design, geben Sie Ihre Nachricht ein und klicken Sie auf Senden.
Eine der Funktionen, die in der Web-App von Sympli verfügbar sind, ist automatisch generiertes CSS. Sie werden wahrscheinlich Ihren eigenen responsiven Layout-Code schreiben wollen, da Symplis CSS pixelgenau und absolut positioniert ist. Wenn Sie jedoch mit Sketch-Designs arbeiten, wird ein großartiges Copy & Paste-CSS für Farbverläufe, Hintergründe, Texteinstellungen, Schatten und Ränder generiert und so weiter.
Erlauben Sie mir, einige schnelle Tipps mitzuteilen, die beim Erstellen von Benutzeroberflächenelementen hilfreich sein können, die von Sympli in CSS konvertiert werden.
Sympli macht es sehr einfach, die Größe verschiedener Designelemente sowie den Abstand um sie herum zu ermitteln. Klicken Sie auf ein Element im Design oder wählen Sie es mit dem Werkzeug „Ebenen“ aus. Daraufhin werden Lineale mit Maßangaben wie unten dargestellt angezeigt:
Sie erhalten die Abmessungen des Elements selbst sowie den Abstand zu den Rändern und zu den Nachbarn im Layout.
Wenn Sie ein Textelement auswählen, sehen Sie auf der rechten Seite der Web-App eine Anzeige, in der die Schriftfamilie, die Schriftgröße, die Ausrichtung und die Textfarbe angezeigt werden. Code mit all diesen Elementen wird auch im automatisch generierten CSS-Abschnitt angezeigt.
Unterhalb der Anzeige kann auch auf die beschriftete Schaltfläche geklickt werden Kopieren um den Inhalt des Textelements zu packen und in den Code einzufügen.
Wenn Sie die dritte Registerkarte rechts auswählen, wird diese mit Aa Sie können alle im aktuellen Design verwendeten Schriftfamilien sehen.
Zusätzlich sind alle im Gesamtprojekt verwendeten Schriftarten im sichtbar Zusammenfassung Abschnitt, über den wir in Kürze sprechen werden.
Farbe wird automatisch aus Ihren Dokumenten extrahiert und kann in RGB- oder Hexcode-Form aufgerufen werden.
Sie können die Farben anzeigen, die in jedem Element Ihres Designs verwendet werden, indem Sie darauf klicken, um die Informationen auszuwählen und dann die Informationen im rechten Bereich anzuzeigen.
Sie können auch eine vollständige Farbpalette erkennen, die in Ihrem Design erkannt wurde, indem Sie sicherstellen, dass nichts ausgewählt ist. Klicken Sie dann auf die zweite Registerkarte im rechten Bereich mit dem Droplet-Symbol.
Wie bei Schriftarten können Sie auf alle Farben des gesamten Projekts zugreifen Zusammenfassung Bereich. Schauen wir uns das mal an.
Um das Projekt zu erreichen Zusammenfassung Gehen Sie auf die oberste Seite des Projekts und wählen Sie dann die Option Zusammenfassung Tab, nach dem Designs Tab. Hier können Sie alle im gesamten Projekt verwendeten Farben und Schriftarten sehen.
Diese Auswahl an Farben und Schriftarten kann in einem von Sympli als "Brandbook" bezeichneten Bereich gespeichert werden. Brandbooks sind mit Stilvorlagen vergleichbar, sodass Sie die Farben und Schriftarten bestimmter Marken nachverfolgen können.
Wenn Änderungen an den Quelldokumenten vorgenommen werden müssen, kann das Hinzufügen zu dem entsprechenden Sympli-Projekt im Wesentlichen auf die gleiche Weise erfolgen wie beim ursprünglichen Export. Wählen Sie die Zeichenfläche aus, die geändert wurde, und führen Sie dann den zuvor beschriebenen Exportvorgang aus.
Wenn Sie beim Hochladen einer Änderung ein Design über die Sympli-Web-App anzeigen, werden die Änderungen erkannt und Sie werden aufgefordert, die aktualisierte Version zu öffnen.
Sympli scheint seinem Namen treu zu sein und den Collaboration-Prozess „Design to Dev“ zu vereinfachen. Um mehr über die Funktionsweise von Sympli und die Gründe für die Erstellung von Sympli zu erfahren, lesen Sie die Präsentation des Gründers, des erfahrenen mobilen Entwicklers Max Ignatyev:
Bleiben Sie dran für das nächste Tutorial, in dem wir die Arbeit mit Symplis Plugins für Android Studio und Xcode behandeln werden.
Und wenn Sie Sympli selbst ausprobieren möchten, besuchen Sie sympli.io.
Accentsconagua