How Sketch update changes everything

[Rss Bot 1]

On 6 April 2017, Bohemian Coding released an update to its popular graphic design tool, Sketch. Designers around the world hailed Sketch version 43 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. So let's explore the changes that were introduced to see if Sketch 43 really is the game-changer it claims to be.

01. Revised file format

Sketch was built with an open-sourced API that allowed a community to build plugins and tools to make it even better (as our 23 top Sketch plugins post shows) – one of the things that set it apart from Photoshop.

Now at the top of the release documentation for Sketch 43 are three words: 'Revised File Format'. But what does this mean, and why is this such an important change?

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 (JavaScript Object Notation) 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.

02. Design is code and code is design

So Sketch now opens and saves HTML and CSS, right? 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 developers.

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 web 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 to prototyping, testing and managing the hand-over to developers. 

But Sketch is tackling this differently. By revealing the code behind Sketch, it has made it easy to integrate with other services and tools. It has opened up the relationship between designer and developer enabling them to choose the process and tools that work for them.

03. Integrated design process

This is all really good news for Bohemian Coding and Sketch. But what for designers? How will this new human-readable file format change the way you design?

Sketch already has a thriving community of designers and developers expanding its capability through plugins. The new file format allows more powerful integrations for these plugins. 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 directly from within those tools. They can even make a change that updates instantly in the Sketch file. The link between code and design is closer than ever.

Stepping back to today, this is already happening. The Airbnb design team has created an app for translating React (the open-source JavaScript code library) directly to a Sketch file. This enables its design team to include logic and data in its designs, bridging the gap between designer and developer and vision and reality.

04. 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 will be inherited into the work of all the other designers. 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 files through the code. Our UI kits, style guides and master designs will always reflect the final code the customer sees.

05. Automation and continuous design

Fast-forward even further into the future, and as the new file format can be created and updated automatically, we don't always need a developer to translate our designs into the product. Designers move 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.

06. Sketch is just getting started

It's still early days, and 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, it just needs designers and developers to adopt it, use it and hack it to develop it further. 

Then, we will 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 originally appeared in net magazine issue 295. Buy it here.

Read more:

• 23 top Sketch plugins
• How to get started with Sketch for app design
• How to add data to your Sketch designs

View the full article