Microsoft Garage Turns 'Ink' Sketches into Visual Studio Source Code

Putting a new twist on the term "low code," a new project from Microsoft Garage lets developers export wireframe sketches into Visual Studio, turning them into source code for basic UI constructs such as labels, buttons and text fields.

The project from Microsoft's experimental coding team -- dubbed Ink to Code -- is designed to quicken the prototyping of Universal Windows Platform (UWP) and Android UIs. The "Ink" refers to Microsoft's Windows Ink technology that lets users "draw" on computing devices with a digital pen, for tasks such as editing Word documents, editing PowerPoint slides or writing math equations in OneNote. With Ink to Code, users draw on touchscreen-enabled devices with a stylus, and the app cleans them up and turns them into the beginnings of UI elements.

The new Garage project uses artificial intelligence (AI) technology -- specifically machine learning -- infused into the Windows 10 Fall Creators Update to help turn wireframe sketches into UI code snippets.

"Ink to Code translates common design symbols into the beginnings of an app in Visual Studio," the Garage team said in a Jan. 25 post. "The first version supports basic app visual elements including labels, text fields, text paragraphs, images, and buttons. While Ink to Code can't bring a full app vision to life, it significantly cuts down on creating the basic foundation of the app with the power of automation.

"Perhaps even more valuable is the way it enables developers and designers to collaborate differently. Ink to Code can be used as a more productive canvas in brainstorm meetings, or even more significantly, as a tool that can bridge the gap between collaborators with different levels of design or technical knowledge."

After being proposed as a project for Microsoft Garage (which lets staffers and interns tackle experimental projects that may not be related to their day jobs) by the Xamarin mobile dev team, it was taken up by a group of Garage interns who were later joined by other MIT interns.

Microsoft likened Ink to Code to improving the time-honored tradition of sketching out rough outlines of an idea on a paper napkin -- subsequently turned into the more modern whiteboarding technique -- to get projects started.

"We've all been in that situation as developers," said Alex Corrado, a senior software engineer on the Xamarin Designer team, who helped originate the project. "Getting your ideas for a new app or feature onto paper is one of the fastest, most natural parts of the brainstorming. But then, you ultimately need to turn that sketch into code and sooner than you know it, 10, 20, 30 iterations of a sketch really add up."

Ink to Colde
[Click on image for larger view.] Ink to Code (source: Microsoft).

George Matthews, identified as a key originator of Ink to Code, also weighed in on the project.

"Developers are crazy diverse, and no experience could serve them 100 percent on day 1, but their feedback can help us get closer, faster," Matthews said. "The gut reaction of any app creator is to make sure your project is polished and perfect before shipping it, especially when releasing to an audience of your developer peers.

"The Ink to Code team is embracing the mindset of getting feedback early, and developing with the customer and for the customers. The feedback from our first customers will really help us stack rank our backlog."

Microsoft is soliciting feedback on Ink to Code on the UserVoice site, where the No. 1 item as of this writing is to "Make it available outside the United States and Canada."

As of now, it's available to residents of those two countries via the Microsoft Store, providing they have Visual Studio 2017.

comments powered by Disqus


Subscribe on YouTube