I am a designer and front-end developer. I spend my time fussing with pixels in Photoshop Sketch or pretending I know how to use vim. I live in the cheerful Bay Area and love coffee. ☕

June 17, 2014

Sketch Needs Shared Style Scaling

I use Sketch on an almost daily basis now, near completely replacing Photoshop as my primary UI editing and creation tool. Overall it’s great: it’s performant, it affords context via multiple artboards in the same project, and it allows easy style sharing via linked styles and symbols.

There is one feature that would make my workflow more efficient by quite a margin which is currently missing: scaled (shared) styles.

Now, I tweeted back and forth with the Sketch guys, and they let me know that style scaling would be contrary to the workflow envisioned for Sketch – design once, generate multiple asset sizes on export. In general, I agree with this maxim. It allows for quick iteration and cuts out the tedium of maintaining multiple raw asset files per density.

However, my personal workflow contains a few instances where scaled styles would be extremely beneficial.

I do a large amount of UI design for Android, and if you are at all familiar with Android interface development you’ll be no stranger to nine-patches. Nine-patches are, essentially, a way to bake the streching and padding of an asset directly into the image file itself via 1px black borders. The borders around the image need to be 100% black or 100% transparent to define stretchable/padding regions, and if they arent, the app will fail to build.

With that in mind, you simply cannot create nine-patch assets in Sketch and expect the program to export the assets with the correct 1px borders around the image intact (Sketch’s export will shrink/enlarge the 1px borders and create a malformed nine-patch). So, I have to create multiple instances of the same shape with the borders pre-baked. My secondary artboard often looks something like this:

(As an aside, it would be even more amazing if there was somehow nine-patch support built into Sketch, but I digress.)

This is where scaled styles would be incredibly handy. On my first artboard, I layout the views as they would appear in the app, defining the base styles there. Then, on the secondary artboard where I maintain the shapes with their pre-baked 1px borders, I would link the styles from artboard one. Currently, I can only link the style to the first shape (or whichever shape matches the native density of the project). I then have to copy the style over to the other shapes, and scale down the styles manually. This sucks, and doens’t allow me to quickly iterate on designs as any slight change to the base styles has to be manually copied and scaled across four distinct shapes per object.

If I could simply assign a style to a shape, and then select a scale factor for that style (.75x, .5x, etc) it would allow rapid iteration on nine-patch shape styles.

Agree or disagree with anything I said? Let me know on Twitter! Would love to hear other designer’s thoughts (or if you have a better way of tackling this situation).

Share on Twitter