Sketch2code microsoft: Design sketches can change code quickly.

What kind of artifact is the recent super Sketch2Code? How does it turn design sketches into HTML code? This article translates Microsoft’s official blog introduction to help you understand how this open source artifact works.
The user interface design process involves a lot of creative iterative work. The process usually starts with sketching on whiteboard or white paper, where designers and engineers share their ideas and try to express potential customer scenarios or workflows. When they agree on a design, they sketch it out and manually output it as HTML code. The output process takes a lot of time and effort, and usually slows down the design process.

What if the hand drawn design on the whiteboard can be immediately reflected in the browser? If we can do this, at the end of the design brainstorming, we can have a ready-made prototype that has been verified by designers, developers, and even customers, which will save a lot of time for website and application development. Now, Microsoft has done this with AI, and they’re opening up the project on Github.

By sketch2code microsoft

1. what is Sketch2Code?

Sketch2Code is a Web-based solution that uses AI to convert hand-drawn user interface sketches into available HTML code. Sketch2Code was developed by Microsoft and Kabel and Spike Techniques. Readers can find Sketch2Code-related code, solution development processes, and other details on GitHub.

The following illustration shows how to use Sketch2Code to transform hand drawn sketches into code. More attempts can be made on Microsoft’s official website.

By sketch2code microsoft

2. how does Sketch2Code work?

Let’s take a look at the process of converting hand drawn sketches to HTML code using Sketch2Code.
Users upload pictures to the website.
The custom visual models predict the HTML elements appearing in the images and mark their locations.
The handwritten text recognition service reads the text in the prediction element.
The layout algorithm generates grid structure according to the border information of the predicted elements.
The HTML generation engine uses the above information to generate HTML code.
The workflow is as follows:

By sketch2code microsoft

3. Sketch2Code architecture design

Sketch2Code uses the following components:
Microsoft Custom Vision: This model is based on image training for different manuscripts and marks information related to common HTML elements such as text boxes, buttons, images, etc.
Microsoft computer vision service: used to identify text in design elements.
Azure Blob Storage: Saves information related to each step of the HTML generation process, including original images, predictions, layout and grouping information.
Azure Function: It acts as a back-end entry point to coordinate the generation process by interacting with other services.
Azure Website: A front-end user interface where users can upload design diagrams and view generated HTML.
The above components are combined through the following architectures:

By sketch2code microsoft

Do you feel eager?

Please leave a message to us, and we will provide links to related courses.


Related reading:

The Ten Largest Graphic Design Trends In 2018

Experience Summing Up! How Do You Self-Study Graphic Design?

Following These 10 Trends, You Can Be Outstanding In 2018 Web Design Trends!