Working With Microsoft Sketch 2 Code

Introduction

 

In this article, we will learn how to convert your sketch to HTML code with Sketch2Code.

 

Sketch2CodeIs a brand-new AI project from Microsoft and the good news is that it is absolutely free of cost.

 

Using the Sketch2Code, we can transform any handmade drawing or wireframe design into an HTML code with AI.

 

Step 1

 

Create a handmade design or wireframes/Mockup.

 

 

 

Here, I have created a sample Sign In page with 2 textboxes and one Button.

 

Step 2

 

Open the site here.

 

Step 3

 

Upload the handmade design or wireframes/Mockup, by clicking on Upload Design button. 

 

 

It will take hardly a minute to convert into HTML.

 

 

 

That's it -- your HTML from your Sketch is ready to use, you can download the HTML by clicking on 'Download your HTML Code'

 

 

 

Check your HTML and make the necessary changes if there are any.

 

 

 

Also, you can directly take a picture and process images to HTML. 

 

How it Works,

 

 

Sketch2code detects design patterns which we have uploaded, then it understands the handwritten text and the structure, and the engine builds the HTML based on the best match as shown in the below screen. 

 

 

By using this technology we can build a system that understands what a UI/UX team or team members have drawn on a whiteboard and can translate that understanding to HTML code. This way we can generate HTML wireframes directly from a hand-drawn image.

 

 

You can also predict object details.

 

 

You can also check the video here: https://youtu.be/uwW2vSGDrlc

 

What a great way of thinking and using Artificial Intelligence a big thank you to AI Team @Microsoft.

 

Reference - https://channel9.msdn.com/Shows/AI-Show/Sketch2Code