Sketch2Code is a tool that can convert your hand-drawn wireframe into a working HTML prototype. This blog talks about the different tools that are out there, how to use them and what are the benefits of using these tools in general.
The advantage of sketching is that it is a very efficient way of communicating. It is fast, it communicates ideas across languages and cultures and it doesn’t require any specialised skills. Most people can doodle on paper or in the back of a napkin and the more you practice, the better you get at creating readable sketches.
Sketching has been around for ages but what makes sketch2code stand out is its ability to convert those sketches into actual code. The need for this tool came from the fact that we needed to create a lot of prototyping material for our UX projects and we needed to do it quickly and efficiently. We were looking for something that would speed up our UI Prototyping workflow but also something that would allow us to validate our ideas early on in the process.
In this blog I will talk about why we started using Sketch, why we built sketch2code, how it can be used in your workflows and some of the challenges we faced along the way.
There are several tools out there to bridge the gap between UI design and code. At Microsoft, we have been working on a set of tools one of which is called sketch2code. It is an experimental tool that transforms a hand-drawn user interface stored as an image into valid HTML markup.
In this blog post, I’ll talk about how our team uses this tool in conjunction with other tools to automate much of our UI prototyping workflow.
The Process
The process starts with a designer who has created a prototype in Sketch or Photoshop. The designer saves those images as PNG files and shares them with the rest of the team. Typically, these wireframes get passed to a front end developer who then has to convert them into HTML and CSS for further integration into the rest of the application.
This is where sketch2code comes in handy. It can help automate most of the conversion from a wireframe image to valid HTML and CSS markup that you can use today without having to worry about writing your own parsers or dealing with errors that may result from trying to interpret what is contained within those images.
All you need to do is upload your file on https://sketch2code.azurewebsites.net/ and out comes a
You’re probably starting to see a lot of activity in the Sketch developer ecosystem. Rightly so, as Sketch is quickly becoming the tool of choice for UX and UI designers.
If you’re not familiar with Sketch yet, it’s a vector-based design tool (like Adobe Illustrator) focused on user interface design. It has a robust library of plugins that let you extend its functionality to do things like automatically generate color palettes and export your designs in different formats.
Sketch has been around for about 6 years now, but it has really only become popular within the last 2 or 3 years — at least among developers.
The growing popularity of Sketch has led to an influx of new tools like Craft and Zeplin that help designers and developers collaborate more effectively. Not only that, but a lot of people are starting to ask: “How can I use my Sketch designs to create actual web pages?”
Enter sketch2code — a project created by Microsoft Garage interns Kevin Ashley and Andrew Ikenberry. The idea behind sketch2code is simple: feed a simple image into their AI model, and get back fully functioning web page code!
If you are a UX designer or a UI developer, you have probably spent many hours in wireframing and prototyping tools like Sketch, Figma, Invision, Axure. But what if we could transform the design from those tools into working code automatically?
The Microsoft AI team recently released sketch2code, an application that does exactly that: it takes a hand-drawn design and uses AI to generate HTML code for it.
sketch2code uses Azure Computer Vision to detect hand-drawn UI components and Azure Custom Vision to detect handwritten text.
I was curious to test if this tool actually worked as advertised and if it would be useful to me. This is what I found out:
I recently had a chance to work with a small team of developers and designers on a project over the weekend. The goal was to build a widget that allows users to input information, click a button and receive a response from an API (Application Programming Interface).
We spent the entire afternoon designing our UI in Sketch. I was disappointed that we didn’t have enough time to code it before we had to present it later that evening.
As I mentioned in my last post, we built this app for Hack for LA, and the deadline for submission was 5pm the next day. We did not want to rush through the coding part at the expense of quality, but there was no time for me to code everything up! Luckily, I heard about an AI tool called Sketch2Code that can convert our designs into HTML/CSS/JS code.
And because I am a big fan of Microsoft technologies, I thought it would be fun to use their Azure Cognitive Services, specifically their Computer Vision API to extract text from images and their Text Analytics API to analyze the text data.
The ever-increasing demands of the customers have put a lot of pressure on product teams to deliver faster. In an agile environment, where products evolve in a rapid manner and every sprint has new features, it becomes imperative that the UX design and development teams work in parallel.
This results in significant reduction in development time with improved UI quality.
The tool is available as a web app at www.sketch2code.ai or as a Visual Studio Code extension.
To use the tool, the designer first needs to create a Sketch file using some pre-defined templates that are provided with the product. The file should have a particular structure so that it can be processed by the tool. This is explained in greater detail later in this blog post.
In the first step of processing, the tool performs Optical Character Recognition (OCR) on all text objects from each artboard and stores them into JSON format along with their coordinates. It also finds out all information about other UI elements like buttons and images etc which are stored as XML elements within the sketch file. It then converts these files to HTML format along with CSS for styling purposes and JavaScript for logic related to buttons etc.
The output folder is then uploaded to Azure Blob Storage from where it can be
In the last couple of years, Sketch has been gaining a lot of traction within the design community. Many companies are beginning to use Sketch for UI/UX prototyping, but the transition from a Sketch prototype to a working app is still challenging.
We’ve spent the last few months building a tool that helps you turn your Sketch designs into code. It allows you to upload your design as an image, and get back HTML and CSS code of your design.
Our goal is to make it easier for designers to share their ideas with developers by allowing them to export their work directly into code. We also hope this will make developers’ lives easier by saving them time when implementing designs.