A Component-based Workflow for Sketch

September 12, 2017

The way we design is changing, and so are our tools.

Give people a tool, and they’ll find different ways to put it to use. No two designers work the same way, but I’m predicting that will change over the next couple of years. Modern digital design grew out of hacking photo editors to draw user interfaces, losing track of work inside systems designed not to lose work, and an endless cycle of recreating existing screens when things get lost in translation…

Over the past decade, designers began to re-evaluate their approach and gravitated toward a component-based workflow. Photoshop introduced Smart Objects (being able to “place” other Photoshop files in a PSD). This new feature allowed designers to share a centralized version of a component, without worrying about having duplicates of that component across their files. Sadly, this never really turned into a workflow across design teams — it was more of an exception than a rule.

When Sketch introduced symbols, the value of components became more clear. Despite being constrained to a single file (but not for long), symbols make components extremely easy: create a component, and then reuse it infinitely throughout the file across artboards and pages. Initially static, symbols soon became a more robust feature with responsive resizing and the ability to overwrite values. I’m convinced symbols will have more powerful customization options in the future.

The real breakthrough came when Sketch enabled nesting symbols inside of other symbols. Even as a single designer, there is tremendous value in properly defining, naming, and structuring symbols. Coincidentally, this is how developers structure components as well: starting at the bottom where they define things at a micro level, all the way up to entire screens on a macro level.

Having such an expansive collection of components, the artboards holding the actual designs usually don’t contain more than a handful of symbols. The first page in my Sketch file holds all the key screens of the app, while other pages are dedicated to flows including all the possible edge cases.

So how will design change?

Design and engineering workflows are slowly creeping towards each other. On the design end, drawing tools like Sketch build new and more powerful functionality with each update which creates a solid, predictable, and reliable workflow. On the engineering side, there are new developments building better components for a variety of platforms. Both sides are standardizing similar processes, and this excites me.

Standardization, combined with extensive new tools, and a shared vocabulary, elevates the design process to the level our engineering counterparts have been operating on for decades.