News

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

Featured

  • Hands On: New VS Code Insiders Build Creates Web Page from Image in Seconds

    New Vision support with GitHub Copilot in the latest Visual Studio Code Insiders build takes a user-supplied mockup image and creates a web page from it in seconds, handling all the HTML and CSS.

  • Naive Bayes Regression Using C#

    Dr. James McCaffrey from Microsoft Research presents a complete end-to-end demonstration of the naive Bayes regression technique, where the goal is to predict a single numeric value. Compared to other machine learning regression techniques, naive Bayes regression is usually less accurate, but is simple, easy to implement and customize, works on both large and small datasets, is highly interpretable, and doesn't require tuning any hyperparameters.

  • VS Code Copilot Previews New GPT-4o AI Code Completion Model

    The 4o upgrade includes additional training on more than 275,000 high-quality public repositories in over 30 popular programming languages, said Microsoft-owned GitHub, which created the original "AI pair programmer" years ago.

  • Microsoft's Rust Embrace Continues with Azure SDK Beta

    "Rust's strong type system and ownership model help prevent common programming errors such as null pointer dereferencing and buffer overflows, leading to more secure and stable code."

  • Xcode IDE from Microsoft Archrival Apple Gets Copilot AI

    Just after expanding the reach of its Copilot AI coding assistant to the open-source Eclipse IDE, Microsoft showcased how it's going even further, providing details about a preview version for the Xcode IDE from archrival Apple.

Subscribe on YouTube

Upcoming Training Events