How to Use Sympli’s Sketch plugin, web app, and Android Studio plugin
We wanted to take a moment to show you how to use the Sympli collaboration platform for mobile developers and designers and the Sympli plugin for Sketch.
If you haven’t signed up for our FREE Beta yet, you can do so by clicking here: http://bit.ly/1T76HJn
After designers are done with the design, they can mark layers, or the layer groups that they want to be assets with exportable property and they don’t have to configure all the options. Any export option is enough. After they do that, they can open the Sympli plugin by pressing command-Y, and they will be prompted to choose the project they want to upload the design to. In this case it’s the Android projects with the baseline resolution of MDPI code slip tracker.
They can also select multiple art boards for uploads, in our case is just one, and the Sympli plugin collects all the information about the design that includes very detailed specification of every single design element, and generates assets, color palettes, and a custom font list.
After the design is uploaded to our cloud, designers can send a URL to share access to the project with the developer.
For developers, Sympli provides several entry points: the web app, as well as extensions for Android Studio and Xcode.
First we’ll discuss the web app. In our web app you can access your projects, each of which may contain multiple screens. Developers can inspect designs interactively by clicking on design elements. By doing so, you will get detailed specs about each.
All these specifications are in a Platform Specific Units, and they contain information about sizes, positions, font names, font sizes, text alignments, colors, fills, borders, shadows, and inner shadows. Also developers can measure the distance between elements by holding the shift button before they click the second element.
Usually screens like this are not coded as a one single monolith view. We have a tool that shifts the origin of the access to custom positions and developers can set it to any custom position, measuring the relative distance from the beginning of the new origin.
This is the Asset Browser. In the Asset Browser, developers can visually map assets to the design elements and get the file name that represents this particular asset. This works both ways, from design to Asset list and vice-versa.
Sympli provides developers with a complete font list. It collects all the custom fonts that are not supported by the mobile platform, so far it works with OTF and TTF file and we’re working on the converter for other fonts too.
Sympli also generates the color pallet, and we name the colors for the developers so they don’t have to spend time naming multiple hex represented colors.
They can download Colors Hex now for Android projects right from the web as well as the full archive with all their assets. Developers can also inspect the design by browsing through the original hierarchy of the layers.
Also through our web app, the design can be shared, you can switch to a different version of the screen, and developers can access activity on the screen, switching between screens in the project.
Android Studio Plugin
In our android studio plugin, we have the same structure of the projects which contain the designs or screens; the main differences are that the android studio plugin works offline, and the android studio plugin integrates a little bit more tightly with android projects.
From the design inspection perspective, you’ll notice that everything is very similar to the web app. The tight integration of android studio plugin with android projects is represented by visual assets merged dialogue which gives developers a sense of their asset based list showing how new assets are different from the assets they have in the projects.
So you’ll see the list of the assets in the project on the left and on the right you’ll see assets from the design. You can choose which assets to merge into the project, or tweak it on the per DPI level for each particular asset.
The Sympli plugin for Android Studio also provides a colors merging feature that will add missing colors in the colors XML to the selected colors XML file.
We provide a feature for merging of the fonts into the project, and if designers spend time on creating color mapping for android material theme, in our web app, we also have a feature that generates android material team for the project. We’re going to make this style look a little bit more visual for designers to make it easier for them to map the colors.
Also in the Android Studio plugin, developers can switch between versions, and are able to compare versions of the designs, so that they can see what’s changed in the latest version.
The Android Studio plugin also integrates with an auto completion feature, so when developers edit a layout file and they have design element selected, they’ll be prompted to work on fields like height, width, margins top left bottom right they will be prompted with the values of the selected element which is very handy.
A quick note: the panel on the far right is actually scrollable, so you can access all the information about the design in this panel.
We also have experimental features on generating styling code for the text labels. Sympli generates the big code snippet which is custom text view, that supports multiple shadows, borders, inner shadows, and gradient fills.
We don’t force developers to use any kind of framework or even the code generated by Sympli plugin, but this can be used as a reference implementation where some code/snippets can be copied from.
If you have any questions regarding Sympli, please shoot me an email at max@Sympli.io.
