Does Sketch 43 force designers to learn coding?

Daniela Li
Design + Sketch
Published in
4 min readApr 12, 2017

In the last week, the Bohemian Coding company finally launched the latest big update, Sketch 43.

All design reviews gave the highly positive evaluation, let’s see what the most important changes are.

First of all, I’d say there is an internet design concept revolution; the design file is not only a simple design file anymore! (Hmm…this sentence sounds weird, I’ll explain myself.)

For developers, there is an idea of dev repo (development repository), the code is not stored in a single file, but many code files in a bigger folder. Right now with Sketch 43, we can consider the .sketch file as a “design repository.” We can simply change the file extension .sketch to .zip and then unzip this file; you will get a full JSON folder, all design information is inside of it. Moreover, this process is invertible; you can compress this folder and then change the extension back to .sketch, then use Sketch app to open it again. Sounds cool? It is. I think the designer should not feel unfamiliar with the idea of the repository, when we use inDesign to create printing layout, at the final, we will get a big folder which includes fonts folder, image folder, and .indd file, I think it is a similar concept of a repository.

JSON is a popular readable format for structuring data and can be opened by any text script. We know all computer files store data, in the old version of Sketch app, the .sketch file stored binary data, which was not readable by a normal human. Now in Sketch 43, the data is stored in JSON file, a human-readable open format, which means developers can directly create, read, write, and revise .sketch file on any text script application.

In before, .sketch is only opened by Sketch app in Mac OS; all bitmap images have to be exported by Sketch app too. With the power of Sketch 43, whatever operation system you use, Windows, Linux, or Chrome OS, the developers can handle .sketch file on their computer. All bitmap will be exported into a single folder with original size (e.g. the original image size is 2000*1000px, then designer resizes it to 1000*500px, the exported image keeps in 2000*1000px in the exported folder.) So, front-end engineers, you have no excuse for not being able to edit .sketch file anymore.

There are many benefits from this new format; I’ll list some of my ideas. The developer can change texts and images by the program, do not need to ask designers to change text copy word by word manually. Since all bitmap images will be exported to a single folder, it will be highly efficient to optimize images for web use. On local or server end, by programming to automatically generate tons of .sketch template files, and then exported them to images, for those who needs hundreds and thousands of similar images, it just takes minutes to be done. For large companies, maybe there are hundreds or thousands of .sketch files, it will be efficient to be automatically indexed and tagged for searching purpose.

Another significant point, the design file can be applied to version control finally. Git is a version control system, for those many people cooperation takes, the version control is significant. Engineers use Github to manage development process, each engineer can create branches, edit code, and pull requests by themselves, and finally, a manager is responsible for merging these branches. This method is super efficient to handle conflicts and to manage the version control. I always think when the design files can be treated as those programs. Nowadays people are using Agile workflow for developing; designers are not just throwing design assets to developers then feel free to leave away. At the same time of engineers’ developing, designers are still woking on revising design files, especially when there are multiple designers to work on the same project, the version control seems an impossible task. Finally, with Sketch 43 now, we can run the text diffs and visual diffs using version control system, and be able to feed design assets directly to development pipeline and integrate .sketch file at the same time as development.

Sketch 43 also debugs a lot and improves the SVG export.

Somebody said, “With Sketch 43, design is code, code is design”. In my opinion, Sketch 43 does not force designers to learn how to code; designers still can use the traditional design process to build creative design. Designers and engineers are not be replaced to each other. Sketch 43 just create a better and more efficient communication method, we can expect the communication of designers and engineers will change a lot in the future, and try to avoid those repeated, boring, and cumbersome work.

--

--

Daniela Li
Design + Sketch

SF bay area based product designer. I design for the other side of screens to solve real problems. http://danielalidesign.com/