Preparing & exporting UI design made with Sketch for development in a coherent and maintainable manner
A non-coding designer guide to looking FE dev in the eye with dignity when when submitting design
There is a plethora of articles on why Photoshop is bad and Sketch is good for UI designers from designers point of view but not so much about why it is so from the developers point of view, which is a pity. Any slick pixel perfect zoomable .sketch file has to be sent to the developer at some point and thats where it gets sketchy (haaa!). It’s better when you work as a part of a team cause you can directly speak with the guy/guys but if you are freelancing you might not even see or speak with the dev at all, and keeping in mind that lots of them are used to just cutting up a .psd you might have some trouble ranging from silent disapproval to a full scale scandal in front of the client.
This article is about exporting sketch files to HTML specs and how to avoid that messy sketch to psd conversion. Lets start by outlining some questions:
- What format to export?
So you can either simply send the .sketch file, either export your stuff to .png or pdf. Its unlikely that someone will go through trouble of learning sketch, .png lacks of layers or anything at all and although there is a way converting a .sketch file through .pdf to Illustrator to .psd it is far from usable cause what you get is a huge mess all the elements you have within you design without any names. - Style structure
There are usually a lot of text styles and elements within a design and you as a designer keep all of that in your head, it might be hard to distinguish that #424242 from #585858 in your design. Its kinda messy within .psd so thank god there are styles within Sketch, although that still has to be communicated.
So what to do?
Create a styleguide early on
Pretty much right away I’d say. There is a nice article on Style Guide Inspirations by Muzli here on medium which is totally worth a read. I usually start assigning style names on a very early stage of design, just before wireframing when I have all the data hierarchy I gonna use. This way the hierarchy won’t screw up while doing visual adjustments to the design and that all caps caption on a field will stay what it is across all the design. Same goes for colors: name them and make sure you are consistent with their usage, so if a clickable stuff is blue it is blue across the board. I usually create a separate artboard where I hoard all the buttons and text styles which makes it easier to grab when you need them. Of course the best solution is to handcraft your styleguide but if you are in an MVP situation you can use a neat Sketch plugin called Style Inventory (manual is inside the link) which will do the work for you, although from my experience it still needs some cleaning up afterwards.
Export actionable stylesheet
For me the problem with a simple styleguide is that it still requires the person to write down css, it can have the color mising (and usually its some shade of grey which is juuuuust right ain’t it) and I believe I never saw a type style for ui design with line height or letter spacing which can lead to stuff not looking exactly as you wanted it too. By the way there is a great web typography resource with classical modernist taste here, check it out.
Luckily there is a fun function in Sketch which helps extracting absolutely all parameters from typography and ui, right click the object of interest and voilà you have all of the info as CSS in your clipboard which is what you need.
/* button-bg: */
background: #6BD400;
box-shadow: 0px 2px 0px 0px #5CB204;
border-radius: 3px;
/* Shape: */
background: #FFFFFF;
/* COMPLETE PURCHASE: */
font-family: Lato-Black;
font-size: 13px;
color: #FFFFFF;
letter-spacing: 0.5px;
line-height: 16px;Attaching this data to the stylesheet and exporting it as a pdf from sketch creates an actionable document which doesn't require unnecessary poking around through layers and panels or trying to get dropshadow to look exactly as it looks on a screenshot. It’s just copy, paste and go and by reducing uncertainty in the process you create better UX for your UI development.
By opening this pdf dev can start building up his css or sass or whatever is used right away without going through too much analysis phase and you start speaking the same language right away so H1 or List caption means the same to you. Also if you keep it updated (and you should for your own sake) you can rapidly implement changes to global styles.
Export the actual design
Mkay, the stylesheets are nailed, whats next? Well another Sketch plugin comes to play which is called Measure. It’s main feature is measuring and annotating design, but the most fun part is exporting an interactive HTML spec where you can measure the position of any element and see the elements CSS properties. Of course the same properties are already listed in the stylesheet, but still it is handy to help identify what style or element is used. I also export the stylesheet itself as Measure spec which is useful for UI parts which have several elements inside (like forms with infield labels) so you can see how the elements are aligned and distributed. The most fun part of the spec is that it displays distances to the container, not to the actual type pixels which means that yay all your line heights actually have meaning and typesetting becomes extremely precise. You can check out a spec example without downloading here.
There are a couple of quirks about the spec.
- You can change the measurement units and scale between several scales and units including density independent pixels for true jedi. You can also change the color format.
- If you select multiple artboards when exporting you can have multiple artboards in the spec, which is usefull for multiple resolutions, multiple steps and multiple everything basically. Measure creates a pretty fat artboards.js file if you do so, which is unique to every spec, so its worth noting when you export multiple specs with artboards to a single folder.
And that’s about it
Exportwise only one thing is left which is exporting vector or raster assets if you use them to .svg (because svg is off the hook) or .png (don’t forget to optimise png), and its easily done by sketch itself. Personally I recommend using iconfonts as much as you can since they are easy to maintain and awesome to use. My last advice is to always speak a lot with devs since you can find out much more about how your design is actually implemented or come across some game changing new tech.
PS There is also this tool called Avocode which is lets anyone open the .sketch file without having sketch or learning it, but I never tried it since it seemed hard for me to convice people to use a paid service while cause the freelancing designer wants so.
I’m very much open for suggestions for this workflow!
Contact me hi@alsoko.net
…or read about my thoughts about
