Integrating Sketch in your workflow

walk through the way towards an automated design to code workflow

Ahmed Abd-Elmotey
Nov 7 · 2 min read

The adoption of CI/CD helped massively increasing the velocity of delivering new features however there is an area of enhancement remained abandoned for too long, integrating design systems in the development workflow is an area of potential improvement that can considerably boost your productivity.

we will look at how we could integrate sketch files inside your workflow.

Sketch: vector graphics editor, developed by the Dutch company Bohemian Coding. Sketch was first released on 7 September 2010 for macOS.

According to ux tools survey Sketch is the most popular design tool amongst ux designers.
According to ux tools survey Sketch is the most popular design tool amongst ux designers.
According to ux tools survey Sketch is the most popular design tool amongst ux designers.

History

Sketch files remained closed binaries for too long, in fact the first semi-open sketch file was version 43, in the recent versions the vast majority of the file could be read and integrated in development workflow. here you can explore the content of the sketch file.

Currently there is a full featured API that you can use to interact with sketch files, however to use it is mandatory to have sketch and therefore you are required to have an Apple device, which is kinda sad. but the happy news is that you can still access it through some of the most popular tools and platforms.

Development Workflows Integration

Here we explore how to read sketch file from different tools in order to make use of it in your development workflow.

  • webpack: there is a sketch loader available for webpack, after adding the loader to your webpack config, using sketch file is just a matter of importing the file as a normal js file.
  • node: if you are using node this node sketch module gives you the ability to read and update sketch files from node environment
  • CLI: if you are using macOs sketch cli is a tool that comes shipped with sketch. for other platforms sketch json cli could be used to either expand sketch files or reconstruct sketch files after applying some updates.
  • Manual: if none of the above works for you, just change the .sketch extension to .zip and extract it.

Final thoughts

being able to handle sketch files as readable files opens a whole new areas of developing and enhancing our workflow such as auto generating code, using source control systems for our design files, maintain updated designs and sync it with the code, auto generate automated testing scripts etc…

feel free to comment any questions and wait for the upcoming articles where we explore how we can automatically generate code from sketch files and implement a CI/CD process that starts from bare designs :)

Ahmed Abd-Elmotey

Written by

Web developer and automation enthusiast, I love creating high quality applications while trying to minimize the amount of work needed to create them.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade