Sketch is a digital design toolkit built to help you create your best work — from early ideas, through to final assets. Sketch is built for designers. With useful features, an intuitive interface and powerful plugins built by a community of developers, it helps you focus on what you do best.
We were using sketch in our organisation for a long time now and everyone was well versed it it. We also used Zeplin along with Sketch to handover to the developers but there was always something missing here and there. We just could not find a seamless handoff in between us. There were various factors involved in this, resource allocation, some one with no knowledge of Zeplin was assigned to work with us and so on. Even for making trivial CSS changes we had to wait for a resource to be allocated. So we then decided to figure out a way around this and started digging.
We just could not find a seamless handoff in between us. There were various factors involved in this, resource allocation, some one with no knowledge of Zeplin was assigned to work with us and so on. Even for making trivial CSS changes we had to wait for a resource to be allocated. So we then decided to figure out a way around this and started digging.
The solution we figured out is quite interesting and I’ll explain the entire working below. I am well versed with my html and javascript and being the only technical person in my team I took up this assignment. We knew exactly what result to achieve but not how, what came next was interesting!
So the use case for this prototype is as, we were often required to change css especially tweaks colours or change themes in our application. For this we used to approach our developers and then something this trivial used to turn into an elongated process. So we decided to figure out a way to convert our design into code directly.
The way Sketch works is pretty cool, on its backend it converts all your design into JSON. And SketchApp developers made this JSON accessible to all. In order to view the JSON file, one has to compress the Sketch file and then decompress it back. Doing this manually every time was also a tedious process, so we made it all automatic using GulpJs. Yayy!
So we figured ways to pipeline the process through Gulp and then on every save on sketch, we ran the Gulp scripts in the background and changed the css in a jiffy!
Will explain the process in detail shortly in the blog, not ready! Coming soon :P