Share
Wenn Sie noch nie davon gehört haben, ist Sympli ein Tool, mit dem Sie die Erstellung einer in Photoshop oder Sketch entwickelten Benutzeroberfläche vereinfachen und für das Web oder als funktionale iOS- oder Android-Anwendung implementieren können. Der Workflow funktioniert folgendermaßen: Zunächst erstellt ein Designer eine Projekt für Web, iOS oder Android, die eine beliebige Anzahl von enthalten können Designs. Diese Designs stellen die verschiedenen Bildschirme dar, die in der von Ihnen entwickelten Anwendung verfügbar sein sollten. Als nächstes kann der Entwickler diese Designs verwenden, um auf einfache Weise eine Schnittstelle für eine Website oder eine neue App zu erstellen.
In diesem Artikel zeige ich Ihnen einige der vielen Funktionen, die Sympli Entwicklern bietet, um Apps für iOS oder Android auf einfache Weise zu erstellen, und bauen auf der Arbeit der Designer auf.
Wenn Sie sehen möchten, was Sympli für Designer zu bieten hat, lesen Sie diesen Artikel von Kezz Bracey:
Die Verwendung von Sympli als Entwickler beginnt mit dem Herunterladen und Installieren eines Plugins für Android Studio oder Xcode. Die Installation dieser Plugins ist sehr einfach und die auf den verlinkten Downloadseiten angezeigten Video-Tutorials helfen Ihnen bei Problemen.
Das Sympli-Plugin für Android und Xcode bietet Zugriff auf interaktive Designspezifikationen (einige Teams verwenden den Begriff "rote Linien"). Öffnen Sie ein Modell und klicken Sie auf die Designelemente, um alle erforderlichen Informationen zu erhalten, um das Design in Ihrer App zu implementieren.
Wie im folgenden Screenshot gezeigt, bietet Sympli Ihnen alle Informationen, die Sie möglicherweise zu einer bestimmten Ansicht benötigen, sodass Sie einen pixelgenauen Entwurf manuell in Code oder in Interface Builder oder Layout Editor implementieren können.
Beachten Sie, dass Sympli Pixel in Entwurfsmodellen automatisch in Punkte sowie andere Parameter wie Füllungen, Schatten und Rahmen in Android- oder iOS-spezifische Begriffe und Einheiten umwandelt.
Falls das Modell in Sketch erstellt wurde, zeigt das Sympli-Plugin die Regeln für die Größenänderung an, die auf Widgets in Sketch angewendet werden. Dadurch können Entwickler die richtigen Einschränkungswerte festlegen.
Eine der wichtigsten Funktionen von Sympli für Entwickler ist die Möglichkeit, Ansichten aus einem Entwurf in eine Android-XML- oder iOS-Storyboard-Datei zu ziehen. Sympli kümmert sich beim Erstellen von Schnittstellen um eine Menge Aufwand, indem Sie Ihre Ansichten genau so positionieren und skalieren, wie sie im ursprünglichen Design erscheinen. Darüber hinaus kann Sympli viele andere Attribute konfigurieren, z. B. Hintergrundfarbe und benutzerdefinierte Schriftarten für Textansichten.
Um die vorhandene Ansicht im Interface Builder in Xcode mit Stil zu versehen, klicken Sie auf die Schaltfläche "Shift", und ziehen Sie das Design-Element per Drag & Drop in die Ansicht.
Um einen Stilcode für die programmgesteuert erstellten Ansichten zu generieren, ziehen Sie mit gedrückter rechter Maustaste in den Code Ihres Controllers.
Von hier aus müssen Sie lediglich die Einschränkungen Ihrer Ansichten ändern, um sie so anzupassen, wie Sie es auf Geräten mit unterschiedlichen Bildschirmgrößen erwarten würden. Für iOS bedeutet dies das Hinzufügen von Einschränkungen für das automatische Layout und für Android die Konfiguration der Ansichten entsprechend dem Layout Ihres Designs.
Neben der Erzeugung von Stilcode für Standardansichten hilft das Plugin von Sympli für Xcode Entwicklern dabei, benutzerdefinierte Steuerelemente auf der Grundlage der Vektordaten aus dem Entwurfsmodell zu erstellen.
Wählen Sie im Modell eine Vektorform aus und klicken Sie im Detailbereich neben dem Namen einer Ebene auf die Schaltfläche "Ausschnitt". Daraufhin wird ein Popup-Fenster mit Swift-Code angezeigt, das auf dieselbe Weise wie programmgesteuert gezeichnet wird. Es gibt auch eine praktische Option zum Kopieren eines Xcode Playground-Ready-Codes, um mit dem Erstellen einer benutzerdefinierten Ansicht und einer Live-Vorschau des Spielplatzes fortzufahren.
Dies ist äußerst nützlich für Anwendungen, bei denen einige manuelle Ansichten auf dem Bildschirm erforderlich sind.
Solange alles vom Designer richtig konfiguriert und hochgeladen wurde, kann Sympli den Import von Bildern und benutzerdefinierten Schriftarten übernehmen, die im Design verwendet werden. Beim Importieren fordert Sympli den Designer auf, das Bild oder die Schriftart gemäß den Best Practices der Plattform zu benennen. Zum Beispiel, wenn ein Bild aufgerufen wird Bild 1 Wird ein Android-Projekt hochgeladen, fordert Sympli den Designer auf, das Projekt umzubenennen image_1. Dadurch wird sichergestellt, dass Sie keine Entwicklungszeit damit verschwenden müssen, Dateien umzubenennen, damit sie problemlos geladen werden können. Darüber hinaus können Entwickler Umbenennungsregeln erstellen, sodass sie bei jeder Aktualisierung des Modells angewendet werden.
Wenn Sie in den Xcode- und Android Studio-Plug-ins auf die unten abgebildete Schaltfläche klicken, während Sie die Bilder oder Schriftarten in einem Design anzeigen, werden diese in Ihr Projekt importiert.
Sympli ist sehr intelligent beim Importieren von Assets. Bilder werden unter iOS in Ihre Asset-Kataloge und auf Android in den Ressourcenordner Ihres Projekts eingefügt. Es werden sogar automatisch skalierte Versionen für verschiedene Geräte erstellt.
Hinweis: Das Sympli hat angekündigt, dass es in Kürze eine Option für Android Studio und für Xcode-Plugins zum Exportieren von Vektorobjekten (PDF für iOS und VectorDrawable) aus einer beliebigen Vektorebene im Modell hinzufügen wird.
Standardmäßig ermöglicht Sympli die automatische Synchronisierung für das Design Ihres Projekts in den Xcode- und Android Studio-Plugins. Das bedeutet, dass das neue Design sofort in Xcode und Android Studio verfügbar ist, wenn der Designer einige Änderungen vornimmt und diese in Sympli hochlädt.
Wenn Änderungen an einem Design vorgenommen werden, lädt Sympli automatisch die neueste Version des Designs herunter und benachrichtigt Sie über das Update. Dadurch wird sichergestellt, dass Sie niemals manuell prüfen müssen, ob Sie mit den neuesten Designs arbeiten. Außerdem müssen Sie vom Designer nicht benachrichtigt werden, wenn er Änderungen vorgenommen hat.
Mit Sympli können Sie nicht nur automatisch die neuesten Entwürfe für Ihr Projekt herunterladen, sondern auch die Anzeige früherer Versionen eines Designs. Sowohl in den IDE-Plugins als auch in der Web-App von Sympli können Sie sehr einfach auf frühere Versionen eines Designs zugreifen.
Dies kann besonders nützlich sein, wenn Sie nicht sicher sind, welche Änderungen in der neuesten Version eines bestimmten Designs vorgenommen wurden. In der Web-App von Sympli können Sie problemlos zwischen verschiedenen Versionen desselben Designs wechseln, um zu sehen, welche Änderungen vorgenommen wurden:
Schließlich kann dieser Rückstand früherer Versionen auch sehr nützlich sein, wenn für die Überarbeitung Ihrer App ein älteres Design erforderlich ist. Um den Aufwand zu vermeiden, eine alte Datei in Ihren Downloads in einer E-Mail zu finden, können Sie mit Sympli einfach eine Version aus einer einfachen Dropdown-Liste im IDE-Plugin auswählen:
Sympli Webapp bietet einen Änderungsbrowser, mit dem Sie zwei Versionen des Designmodells visuell vergleichen und die Änderungen nebeneinander anzeigen können. Dadurch werden Ergänzungen, Löschungen und andere Aktualisierungen sofort für das Auge sichtbar, wodurch die Produktivität des Teams erhöht wird. Darüber hinaus können Entwickler die Änderungen auch auf einer Eigenschaftsebene sehen - zum Beispiel, wenn sich eine Farbe geringfügig ändert oder ein Rand um 1 Pixel dicker wird.
Für jedes Modell, das mehrmals in Sympli hochgeladen wird, befindet sich in einer oberen Leiste eine Schaltfläche zum Durchsuchen von Änderungen, über die ein Browser für die Änderung nebeneinander geöffnet wird. Wählen Sie die zu vergleichenden Modellversionen aus und klicken Sie auf die hervorgehobenen Bereiche, um die tatsächlichen Änderungen anzuzeigen.
6. Projektzusammenfassung
Sowohl die Sympli-Web-App als auch die IDE-Plugins können Ihnen eine Zusammenfassung für jedes Projekt. In diesem Übersichtsbildschirm werden alle im gesamten Projekt verwendeten Farben und Schriftarten angezeigt. Dies kann sehr nützlich sein, wenn Sie die Details einer bestimmten Farbe oder Schriftart benötigen und nicht sicher sind, in welchem Design diese Ressource verwendet wird. Sie kann bei der Entwicklung Ihrer App auch als ständig verfügbare Referenz verwendet werden Sie müssen eine genaue Farbe oder Schriftart an einem Ort verwenden, an dem Ihnen kein Design zur Verfügung gestellt wurde.
Wie Sie sehen, vereinfacht Sympli die Entwicklung einer App aus von anderen entworfenen Schnittstellendesigns. Sympli erledigt die manuelle Arbeit, die zum Konvertieren von PSDs oder Sketch-Dateien in ein Storyboard für iOS oder ein XML für Android erforderlich ist. Diese Zeit, die durch Sympli eingespart wird, kann produktiver genutzt werden. Beispielsweise können Sie Ihre Zeit mit der eigentlichen Funktionalität verbringen, anstatt Farbcodes und Bilder mühsam zu kopieren!
Wenn Sie mehr über Sympli erfahren möchten oder es selbst ausprobieren möchten, besuchen Sie die Website und sehen Sie sich einige der großartigen Video-Tutorials zur Installation und Verwendung der Xcode- und Android Studio-Plugins an.
Bitte hinterlassen Sie wie immer Ihre Kommentare und Rückmeldungen in den Kommentaren unten.
Accentsconagua