Sketch Viewer - Spec App Concept for Sketch

In my whole design process, making specs is the most boring part for me. It is very time consuming, I have to measure all the distances between UI elements, mark all the font properties, button size, colors and shadows...And I feel terrible for developers too, because the markup looks so unreadable with massive annotations.

What if we can have an app to make this work much easier while the UI specs also looks clear and friendly to the developers? I mean, we don't even need to mark any annotations, the app will do all the work.

Here is my concept: The app is made for Sketch only. You can consider it as an inspector for Sketch documents. Let's call it Sketch Viewer. After designers finished the design in Sketch, developers just need to open the .sketch file in the Sketch Viewer and he can get any UI spec in a click. In another word, spec document is not static images anymore. It is interactive, so it can contain more detailed information and showing them more directly.

Please check the real pixel mockup here.

I also added some notes for better understanding.

Here are the features and how it works:

Measuring distances.
Sketch's measure feature works like magic. In Sketch Viewer it will be the same. Developers select one object and hover the cursor on the second one to view the distance.

Object properties.
Object properties will be shown on the right column after the object was selected, including size, opacity, fill color / gradients, shadows, borders, corner radius, font property...etc.

Slice filename.
Sometimes it's tough for developers to find and recognize slice images. Sketch Viewer will show the slice filename for the selected object. I guess this could save a lot of time.

Exporting CSS attributes.
A must have feature.

Loupe, color picker and ruler.
These small tools help developers to zoom in and zoom out, snap color and measure sizes easily.

Extra comments.
Designers can leave detailed messages to developers by adding comments in Sketch.(hover the white dots to view each comment)

Auto-converted units.
If Artboard titles contain suffixes like "@2x"/"xhdpi"(e.g. Timeline@2x), Sketch Viewer will automatically convert the distance/object size to @1x/dp.

This is a very rough concept and obviously have some problems(e.g.How to select overlapping layers). But I think the whole idea is very feasible. Really hope the Bohemian Coding team will release something like this one day.

Thoughts and constructive comments are welcomed.

P.S. This concept is based on Sketch 2, looking forward to the Sketch 3 magics. ;)

Posted on Mar 24, 2014

More by Wei Liu

View profile