Working With Microsoft Sketch 2 Code


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:
What a great way of thinking and using Artificial Intelligence a big thank you to AI Team @Microsoft.
Reference -