Cutting Corners — Inside SALIDO UX/UI with Zeplin

Real design nightmare: drafting visual UI spec documents and exporting assets. Imagine pulling teeth through your fingertips and eyes at the same time — it hurts almost as much as it sounds. Communicating a design to an engineer should be simple, but let’s break it down:

Layout: Page/screen size(s), element padding, alignment, element hierarchy

Visuals: Colors, corners, gradients, shadows, sizes, border thickness, opacities

Text: Fonts, weights, point sizes, colors, line spacing, character spacing, rotation angle

Actions: Destinations, behavior, animations, validations

I had to actually design the design spec. And after all that, the little time left gets spent exporting any design assets — icons, images, fonts, patterns. This stacks up to weeks of time, weeks after all the design and iterations were actually completed and finalized. A most tedious effort without creativity.

There had to be a better way.

Part of my design experience led me to Sketch, and several months later, I discovered a beta-product called Zeplin on SketchTalk. Sketch is important to mention here since Zeplin integrates with it.

Oh man. Zeplin. This tool was marvelous from the first day I used it. I don’t say that lightly — even Sketch had a learning curve. Zeplin just did the stuff I needed without making me tell it to do that stuff.

Zeplin converts a Sketch artboard into an interactive view of every object on the page, allowing a user to see properties and relative dimensions for the intended device. It also exports and packages assets tagged by the designer and creates a stylesheet based on the design contents — all in the format required for the right development environment. Today, it even generates iOS Objective C/Swift code.

Check out the full write-up on the SALIDO Digest:  https://medium.com/salido-digest/cutting-corners-inside-salido-ux-ui-with-zeplin-164a21770382#.gpto0ihb0