Programmers Design Differently: Why I Built a CSS Plugin for Sketch 3
Listen to this post here: http://www.narrated.org/narrated/programmers-design-differently
I was hours into designing my next project, and I simply wanted all my icons to have the same amount of space separating them. Why did that have to be such a painfully tedious task?
Programmers have a mantra called DRY. It stands for Don’t Repeat Yourself, and it’s an idea that we bring into whatever we work on. When we design a toolbar we don’t want to set the margins and padding for each and every icon separately. We want to set a rule that applies to all icons, and be done with that, forever.
Design programs like Photoshop and Sketch aim to be as simple as possible. In doing that, you’re given a UI to accomplish all your tasks. Your workflow’s efficiency increases with the more keyboard shortcuts you memorize, but it can never reach a point where you’re not forced to perform frustratingly tedious tasks of alignment and size modifications through the UI, one item at a time.
Text Editors
Programmers and web designers are right at home in text editors. We live in them for much of the time we work on our projects. For as long as design programs have been around, programmers who use them have been waiting for a feature that gives the ability to modify design elements programmatically, just like web designs are created. It’s just the way we like to work. Last week, as I was making a UI mockup in Sketch, I decided that I wasn’t going to wait any longer. I set out to make a plugin that enables you to incorporate stylesheets into your Sketch 3 workflow.
Today I’m proud to present CSSketch, an open source CSS plugin for Sketch.
Stylesheets
I wanted to be able to use complex selectors based on layer names, child layers, parent layers, etc. I knew making a custom CSS parser would be too much of an undertaking, so I outsourced it. Webkit, the same engine behind Safari and Google Chrome, brilliantly handles all the CSS rules you can think to throw at it. By integrating it into CSSketch, it let me focus on coding the rest of the plugin (which was a lot more fun than coding a CSS parser would’ve been).
Pairing your designs with stylesheets feels natural if you’ve ever dabbled with web design. The integration with Sketch is aimed at being intuitive. You only need to select your stylesheet file once per page, and after that changes are automatically detected and applied to your document.
Less
Less is a pre-processor for CSS. It lets you add variables, functions, and more to your stylesheets. It’s a great tool for those who want to take their efficiency to the next level. It was a natural fit for integrating into the plugin, and has enabled me to make many stylesheet rules that would’ve been impossible otherwise.
Here’s a small Less example, showing what it looks like to apply a shadow to a layer, but still maintain legibility for those of us who don’t have CSS’s parameter orders memorized.
Beyond Shared Styles
Shared styles are great when you need every layer to look the same. Pretty soon the limits become glaring and start holding you back. You have many text layers, and they need to be the same color as some of your shapes, so you need two types of shared styles. Some text needs be a different size, some need to be center aligned, etc. Soon your design has fragmented to the point you need a dozen shared text styles, which turns a simple palette change into a true ordeal. With CSSketch, a complete palette change can be as simple as changing one line.
Open to Suggestions
I made CSSketch open source so that anyone can modify it to their liking, or contribute to the project.
You can download it, and start using it, now at github.com/JohnCoates/CSSketch
