{"id":35068,"date":"2018-02-05T13:50:43","date_gmt":"2018-02-05T21:50:43","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=35068"},"modified":"2019-08-15T12:15:37","modified_gmt":"2019-08-15T19:15:37","slug":"draw-next-app-idea-ink-code","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/draw-next-app-idea-ink-code\/","title":{"rendered":"Draw your Next App Idea with Ink to Code"},"content":{"rendered":"

Imagine that you’ve just been struck by inspiration for your next great app. You might start by jotting some notes and sketching out screens. If you’re thinking about reaching for a sketchbook, a whiteboard, or even the back of a napkin, think about reaching for your computer and installing Ink to Code<\/a><\/strong><\/em> instead.<\/p>\n

Ink to Code<\/em>, a Microsoft Garage project, is the digital version of the back of a napkin for your app ideas. A nimble Windows 10 app, it launches in seconds and provides a quick canvas for you to sketch out screens with your stylus. Let\u2019s give it a try!<\/p>\n

Getting Started<\/h2>\n

The first thing you\u2019ll want to do is install Ink to Code<\/em> from the Microsoft Store<\/a>. Upon launching it, you\u2019ll be greeted by its minimal user interface and large drawing area. To get some guidance on what to draw, click the Guide<\/strong> button in the toolbar. This shows you the different design elements that Ink to Code<\/em> recognizes:<\/p>\n

\"Ink<\/p>\n

Drawing Your App with Ink to Code<\/h2>\n

Let\u2019s pretend you’re inspired to make the next great tip calculator. This video illustrates how you might draw it in Ink to Code<\/em>:<\/p>\n

https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/i2c3.mp4<\/a><\/video><\/div><\/p>\n

 <\/p>\n

As you draw each design element, you\u2019ll notice that Ink to Code<\/em> converts the ink strokes into recognized components. Tapping on each of these items displays a menu that allows you to delete them, or if they were misrecognized, convert them into different components. You\u2019ll also notice that tapping the second button in the left toolbar switches into constraint mode, where you can draw constraint lines that can be used to align other elements.<\/p>\n

How does this magic work? Internally, Ink to Code<\/em> uses the powerful Windows Ink platform<\/a> and some of its own heuristics to recognize common design elements in your app sketches and then convert them into UWP XAML or Android layout XML that can be loaded directly into Visual Studio.<\/p>\n

Exporting to Visual Studio<\/h2>\n

Ink to Code<\/em> is great for quickly sketching the broad strokes of your app idea, but to start refining it into a prototype, you\u2019ll want to export your drawings to Visual Studio. For this exercise, we\u2019ll build a Xamarin.Android app:<\/p>\n

    \n
  1. Click the Export<\/strong> button in the Ink to Code<\/em> toolbar and choose Android<\/strong> from the menu. Then choose a temporary directory in which to export the layout XML file.\n\"Ink<\/li>\n
  2. Open Visual Studio 2017 and create a new Blank Android App project. If you cannot find the project template, ensure that you have Xamarin installed<\/a>. You can also use Visual Studio for Mac and ensure Android<\/strong> is selected during installation<\/a>.<\/li>\n
  3. Find Main.axml<\/code> in your Android project under the path Resources\\layout<\/code>. Replace it with the file you exported in the first step.<\/li>\n
  4. Ink to Code<\/em> uses ConstraintLayout<\/code> in its exported Android XML, so you\u2019ll need to add the Android.Support.Constraint.Layout<\/a> NuGet package to your project.<\/li>\n
  5. Click Run, and you should see the screen you sketched launch in an Android emulator as real, interactive Android widgets!<\/li>\n<\/ol>\n

    You\u2019ll probably want to continue refining your layout in Visual Studio after you export it from Ink to Code<\/em>. To do this, simply double click on the Main.axml<\/code> file and the Xamarin Android Designer will open:<\/p>\n

    \"Exported<\/p>\n

    Unleash your Creativity!<\/h2>\n

    Now that you have an idea of how you can use Ink to Code<\/em> to quickly sketch your next app idea, it\u2019s time to let your imagination run wild! Ink to Code<\/em> is a Microsoft Garage project, which means it\u2019s an experiment and your feedback<\/a> will be pivotal in shaping its future.<\/p>\n

    So please install Ink to Code<\/em><\/a>, sketch your next great app idea, and let us know<\/a> how it goes. Happy inking!<\/p>\n

    Discuss this post in the Xamarin Forums.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    Imagine that you’ve just been struck by inspiration for your next great app. You might start by jotting some notes and sketching out screens. If you’re thinking about reaching for a sketchbook, a whiteboard, or even the back of a napkin, think about reaching for your computer and installing Ink to Code instead. Ink to […]<\/p>\n","protected":false},"author":566,"featured_media":39167,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[5,4],"class_list":["post-35068","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-android","tag-xamarin-platform"],"acf":[],"blog_post_summary":"

    Imagine that you’ve just been struck by inspiration for your next great app. You might start by jotting some notes and sketching out screens. If you’re thinking about reaching for a sketchbook, a whiteboard, or even the back of a napkin, think about reaching for your computer and installing Ink to Code instead. Ink to […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/35068","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/566"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=35068"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/35068\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/39167"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=35068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=35068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=35068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}