Sketch 43 — This changes everything
Chris Thelwell explores the open file format update to Sketch and how it will change the way designers work forever.
On 06 April 2017, Bohemian Coding released an update to their popular design tool, Sketch 43. Designers around the world hailed it as a game-changer for the design tool industry. But the launch passed without the massive fanfare you’d expect for something so big, leaving most designers wondering what had actually changed and why it was so significant.
I will help explain the changes that were introduced and ask if Sketch 43 really is a game-changer to the design process of the future.
Game-changer from day one
To understand the impact of Sketch 43 we have to rewind seven years. On 7 September 2010, Bohemian Coding — a small two-year-old company in The Hague, Netherlands — unveiled Sketch to the design community.
At the time, designers mainly used Adobe’s Creative Suite of applications. The relationship between designers and Adobe went back years, and persuading them to shift to a new tool was seemingly impossible.
For years designers had to live with constraints, workarounds and hacks to make Adobe Photoshop and Illustrator work for them. But Sketch was different. Bohemian Coding built Sketch from the ground up with the needs of modern digital designers in mind. Higher resolutions, pixel perfection and consistent styles and patterns were built in. Plus an open-sourced API allowed a community to emerge building plug-ins and tools to make it even better.
But the real game-changer was the price. Sketch launched with a much smaller price tag (less than £100) than Adobe charged for its subscription model.
After a slow start Sketch started to get traction in the design industry and a community of advocates grew around it. Fast-forward 7 years and almost every designer I know uses Sketch as their go-to design tool.
Revised file format
At the top of the release documentation for Sketch 43 are three simple words: ‘Revised File Format’. But what does this mean, and why is this such an important change for the new leader of design tools?
This revised file format is the new way that Sketch files are saved, with a ‘.sketch’ extension at the end of the file name. The new open format uses JSON formatting. JSON is a commonly used format for transferring and storing data. It’s easy for humans to read and write and for machines to create and use.
So what? Isn’t this just the way the file is saved? Yes and no. What this actually means is that anybody can create and modify Sketch files, whether they have Sketch or not. You can even open and create design work in a text editor. In fact, machines will be able to create and update files automatically.
Design is code and code is design
So Sketch now opens and saves HTML and CSS, right? This is the confused question I keep hearing when speaking to friends and colleagues. That would be cool, but unfortunately it can’t. It’s actually doing something much better.
The file itself is like a repository of components much like the repositories used by our developer colleagues. The components explain the design in code using the JSON format, creating new ways to create and edit the design.
This means we will be able to share, manage and co-create design projects just like developers do using services like GitHub. The design process will be integrated directly into the development process.
Share, manage and co-create design projects just like developers do using services like GitHub. The design process will be integrated directly into the development process.
This is a huge game-changer for design tools. Other tools have been focusing on owning the whole process, from early idea through to prototyping, testing and managing the hand-over to developers. But Sketch is tackling this differently.
By opening up the code behind Sketch they have made it easy to integrate with other services and tools. They have opened up the relationship between designer and developer enabling them to choose the process and tools that work for them. Other tools, take note.
The new design process
This is all really good news for Bohemian Coding and Sketch. But what about you as the designer? How will this new human-readable file format change the way you design? Let’s fast forward to the future and see…
Integration
Sketch already has a thriving community of designers and developers expanding its capability through plug-ins. The new file format allows more powerful integrations for these plug-ins. Whatever we need Sketch to do is possible thanks to this ever-growing community.
Services like InVision and Zeplin that help with the hand-over from designer to developer are closely integrated with Sketch. Developers can access assets and styles directly from within those tools. They can even make a change which updates instantly in the designer’s Sketch file. The link between code and design has become really close.
Stepping back to today, this is already happening. The Airbnb design team have created an app for translating React (the open-source JavaScript code library) directly to a Sketch file. This enables their design team to include logic and data in their designs and to bridge the gap between designer and developers and the steps between vision and reality.
Collaboration and version control
Looking a little further to the future, designers will start to adopt design repositories. Similar to how developers use repositories like GitHub, designers will use Sketch to manage and version-control their design work.
By creating branches of the master and then merging them together, many designers will be able to collaborate on the same project at the same time. If one designer updates a master style it gets inherited into the work of all the other designers. Quality and speed will both increase and peer reviews will be introduced to ensure our designs hit a new higher standard.
The code is always the source of truth in a product — as that’s what the customer sees. When a developer makes a change they will also update the master Sketch files through the code. Our UI kits, style guides and master designs will always be up-to-date and reflect the final code that the customer sees.
Automation and Continuous Design
Fast-forward even further into the future. Remember, the new file format can be created and updated automatically. This means we don’t always need a developer to translate our designs into the product. Designers move much closer to the customer by removing the need for the developer.
Continuous Design will become the norm. Just like developers with Continuous Delivery our designs will follow an automated process to move from idea through to the end product. When a designer updates a colour, that new colour will be seen by the customer just a few seconds later.
Artificial Intelligence removes the need for a designer in some cases. A set of rules and styles are created then all the designs are automatically created and implemented into the product. This can even be created in real-time as a product is used, creating a really personal experience.
Still early days
It’s still early days, the new open file format needs a lot of documentation and stability to achieve all the possibilities mentioned here. It is a potential game-changer for Sketch, just needing designers and developers to adopt it, use it and hack it to develop it further.
We will then see a big shift in the way designers work and how they interact with developers. This could be the beginning of the Continuous Design era.
This article was first published in July 2017 as a feature article in Net Magazine issue 295 on 15 June 2017