Refactoring Sketch files
and generating well-written HTML and CSS using Protoship UIPad
Protoship UIPad converts Sketch designs into HTML, CSS and even React projects. But it is not all that magical — the generated code mirrors your layer tree.
If your Sketch layer tree looks like what is seen on the left, then UIPad will produce the ugly looking code you see on the right.
But with just one minute of refactoring effort, you can produce this neat piece of HTML:
Since UIPad uses the layer names from the design to name the CSS classes, all I needed to do was to name them well. And Sketch’s keyboard shortcuts make this easy. This is how I renamed all those layers in one go:
The shortcut key to start renaming layers is CMD+R. Then you can use TAB and SHIFT+TAB to move between layers. If a group is collapsed, you can press ESC, then hit ENTER to expand it, and start renaming again with CMD+R.
We call this process of cleaning up a Sketch file refactoring, a term widely used in programming. It means this: improving the structure of the code without changing how it actually works. Which is exactly what we’re doing with our Sketch design as well.
That was not all. If you’re a front-end developer, you might appreciate if the code was organized into reusable components, like this:
That’s easy too. Just use Sketch’s Symbols feature generously — UIPad will then extract them into separate components, and write the required code to invoke them from its parent.
UIPad can create nice CSS thanks to well-named layers. But it goes one step further: it generates SASS mixins for reusable styles like typography and containers. There is also no specificity hell — we follow a BEM like methodology to organize the CSS.
UIPad also supports nested symbols and symbol overrides. This means if you override a nested symbol, UIPad will detect it and create code with conditionals to represent all those possible states of the symbol.
We’ll show you how to get the best out of these features in our next posts. Follow us on Medium and leave a comment!
If you haven’t signed up for the Protoship UIPad private beta, you can do so now at https://protoship.io/tools/uipad.html. We’re rolling out the invites in batches to make sure that we’re able to talk to every user. So please allow us some time before we’re able to send you an invite.
