Photoshop was the goto tool for UI Designers for a long time. But in wake of the mobile industry boom, especially apps, agile methodology, etc., UI Designers now use variety of tools like Sketch, iDraw, inVision etc. These tools do not offer tons of features like Photoshop and Illustrator, but when it come to UI designing, they have every thing that is needed and simplified.
When a designer works using Photoshop, he/she has to provide the style guides(colors, font) and image assets to the developer separately. This is a complicated process, even for a small change. This is were Sketch helps out, it reduces the time spent on developing prototypes, exporting assets based on mobile OS (iOS and Android) and other simple features. But still there was a gap between the design and development processes.
This is where Zeplin comes in!
Zeplin enables collaboration between UI designers and front-end-developers. In this blog I have explained some of the features that Zeplin has and how it makes life easier for Front-end developers like me.
Zeplin:
Zeplin was launched on July 2015, with the mission in bridging the UI designers and the front-end-developers. Zeplin is available as both, a web tool and as a Mac App (MacOS). There is a plugin for Sketch through which the selected art-boards or if need be, the whole project can be directly exported to Zeplin, using the shortcut cmd+E, this works only with the Mac App. In case of the web tool, whole of the project as .sketch file can be imported to it.
Now let us see how Zeplin enables collaboration between designer & developer:
Zeplin has many cool features to enable a smooth collaboration between the UI designers & front-end developers. I have briefed some of the features below.
Color Palette:
It depends on the kind of project platform you require, you’ll be able to export the color palette in XML for Android, as required for Objective-C or Swift in iOS and in plain CSS or SASS, LESS and Stylus incase of web projects, all of this with code snippets. This is a great time saving feature for both the designer and developer.
Assets:
We can export the assets according to platform we have selected. If you select Android as the platform, you will get the asset in all of the sizes as of mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi and for iOs you can export them as @1x, @2x, @3x with ease.
Typo:
This feature helps us to find the exact font size used in the design and also we can get the type of font used. Zeplin also allows us to copy the contents directly.
Position:
We can also know the position of the components placed in the design. Just by clicking the component, it shows the X, Y position.
Latest Update!
As I was writing this blog, a new feature has been updated. Generating CSS for web components.
After updating Zeplin, select web as the platform to get css for the selected component. You can copy the code and use it.
You can also have a look at our blog on Choosing right screen size while importing from Sketch
Thanks to Zeplin, it has reduced the dependency gap between designers and developers in our company.
[…] To know more read Zeplin – Collaboration between UI Designers and Front-end Developers […]