Working With Microsoft Sketch 2 Code

In this article, we will learn what is Microsoft Sketch 2 Code and how to use it to convert your Ideas to HTML.

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.

Microsoft Sketch 2 Code 

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. 

Microsoft Sketch 2 Code

It will take hardly a minute to convert into HTML.

Microsoft Sketch 2 Code 

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

Microsoft Sketch 2 Code 

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

Microsoft Sketch 2 Code 
Also, you can directly take a picture and process images to HTML. 

How it Works,

Microsoft Sketch 2 Code

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. 

Microsoft Sketch 2 Code

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.

Microsoft Sketch 2 Code

You can also predict object details.

Microsoft Sketch 2 Code

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