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


  • .NET Core Ranks High Among Frameworks in New Dev Survey

    .NET Core placed high in a web-dominated ranking of development frameworks published by CodinGame, which provides a tech hiring platform.

  • Here's a One-Stop Shop for .NET 5 Improvements

    Culled from reams of Microsoft documentation, here's a high-level summary of what's new for performance, networking, diagnostics and more, along with links to the nitty-gritty details for those wanting to dig in more.

  • Azure SQL Database Ranked Among Top 3 Databases of 2020

    Microsoft touted the inclusion of Azure SQL Database among the top three databases of 2020 in a popularity ranking by DB-Engines, which collects and manages information about database management systems, updating its lists monthly.

  • Time Tracker Says VS Code Is No. 1 Editor for Devs, Some Working 15+ Hours Per Day

    WakaTime, which does time tracking for programmers, released data for 2020 showing that Visual Studio Code is by far the top editor/IDE used by its coders, some of whom are hacking away for more than 15 hours per day.

Upcoming Events