One of my favorite apps is Zeplin. If you haven’t heard of it before, it’s an amazing desktop app that helps you build pixel perfect mobile apps. To understand why it’s amazing let’s look at a typical workflow for coding up a design. Back when I first started android development the development flow was the following:
The Designer and I would discuss what screen size the file should be which would entail me pointing them at the common screen sizes table found here.
I would tell them to design for a medium density phone so that I didn’t have to do any px to dp calculations. The designer would make a comp in Photoshop then send me the file, I would then open the file and start trying to mimic the layout in my xml file. I’d have to pull out the marquee tool in Photoshop to measure distances between Views or estimate it. Then I’d run my implementation past the designer, get feedback, and make tweaks.
That wasn’t the only downside, I always felt bad having to ask designers for either more or different assets. First Sketch came along and the designers I worked with loved it because it made exporting image assets a breeze, specifically with regards to densities. I was still using Photoshop because I just needed size and placement information. I was stuck in marquee tool land and wasn’t paying attention to Sketch cause it wasn’t making my job any easier.
It was a nightmare.
But then Zeplin opened for beta and things began to change drastically. For starters I no longer needed to have a graphics editor installed at all no sketch and certainly no Photoshop. I work as a programmer why should I need to have a graphics editor? The Zeplin app(at least for me as a developer) is a stand alone app that connects to the cloud and downloads projects, that contain screens. The designers I worked with just had to share the project with me. I would open the app, log in once, then see a list of projects that I had access. After I select the project I see art boards. From there I could open a screen and click on items and helper measurements will pop up showing the distance between items.
It is fantastic.
Even better I don’t need to do any math to convert from PX to DP it’s already in DP! I can’t remember the last time I spoke to designers about screen density. Then there are other extremely important features like hex value representation. I no longer have to ask designers nor pull out the eye dropper tool to get colors, they are all right there. My other favorite feature(I know I have so many) is that I can download the assets from Zeplin. No more emailing back and forth to get them(granted the designer does have to add them). This cut down so much time on my end and on designers end, it let both of us focus on implementation instead of validation. Creative reviews of the App were so much faster as result of the app being more precise in it’s implementation.
If you want to save time you should be using Zeplin. For a demo watch the following video.
Note, I am not affiliated with Zeplin. I just love their app cause it has saved me so much time, and allowed me to uninstall photoshop. 🙂