{"id":40845,"date":"2022-06-07T00:22:35","date_gmt":"2022-06-07T07:22:35","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/premier-developer\/?p=40845"},"modified":"2022-06-02T12:11:19","modified_gmt":"2022-06-02T19:11:19","slug":"express-design-appdev-on-steroids","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/express-design-appdev-on-steroids\/","title":{"rendered":"Express Design – AppDev on Steroids"},"content":{"rendered":"

Tahir Naveed<\/a> spotlights Express Design, a new way to quickly get started with\u00a0Power Apps by instantly transforming your visual design into an app.<\/p>\n

\n

As soon as the announcement of Express Design<\/a> came out on Microsoft Build<\/a>, I wanted to get my hands dirty with it. Here is a quick tutorial on how it works.<\/p>\n

Express Design (Preview)<\/a> is a new way to quickly get started with Power Apps by instantly transforming your visual design into an app. App design can be in the form of paper forms, whiteboard sketches, or Figma files without the knowledge of the database or any programming language.<\/p>\n

\"Convert<\/p>\n

Design an app:<\/strong> I created the following prototype using sticky notes and took a picture. It doesn\u2019t get quicker & dirtier than this. This feature requires PNG\/JPG\/JPEG image format (not iphone\u2019s HEIC) so I decided to crop it too while converting it in to PNG format.<\/p>\n\n\n\n
\"Text,<\/td>\n\"A<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Launch Power Platform Maker Portal<\/a> and you will see a new option of Image<\/strong> & Figma<\/strong> on the home page to build an app. Select Image<\/strong> as our app design is in the form of a PNG image.<\/p>\n

\"Graphical<\/strong><\/p>\n

Step 1:<\/strong> Image<\/strong> screen – Give name of the app, provided the app design image.<\/p>\n

Step 2<\/strong>: Components<\/strong> screen \u2013 Express Design\u2019s AI detected the labels, input boxes and buttons for the desired app as expected.<\/p>\n

\"A<\/p>\n

It missed the Age<\/strong> input box as I made it little smaller, so I decided to add it manually.<\/p>\n

\"Graphical<\/p>\n

Step 3: Data<\/strong> screen – Leave Create a new table in Dataverse<\/strong> checked. It will allows the automatic table generation in the Dataverse.<\/p>\n

\"Graphical<\/p>\n

Step 4:<\/strong> Table <\/strong>screen – This screen maps your labels to the table column. You can change the datatype for your columns too as by default all the columns will be of type text. Age<\/strong> in my app should be a number column so I fixed it here.<\/p>\n

\"Graphical<\/strong><\/p>\n

Step 5:<\/strong> Review<\/strong> screen – Review and hit Create<\/strong>. It will take a couple of minutes for AI to generate the app (HTML\/CSS\/JS) and table (in Datavserse) and integrate them.<\/p>\n

\"Graphical<\/strong><\/p>\n

Result:<\/strong><\/p>\n

The final app and table looks like this:<\/p>\n

\"Table<\/p>\n

\"Text<\/p>\n

Conclusion:<\/strong><\/p>\n

Express Design has produced a working app with backend database table\u2026which works perfectly. What\u2019s really cool about this whole experience is that it took me less than 5 minutes from designing to development of this app, including the backend database table\u2026 and that too without writing a single line of code.<\/p>\n

This surely is a great feature for citizen developers and will also shorten the time for idea to execution for pro-developers.<\/p>\n","protected":false},"excerpt":{"rendered":"

Tahir Naveed spotlights Express Design, a new way to quickly get started with\u00a0Power Apps by instantly transforming your visual design into an app. As soon as the announcement of Express Design came out on Microsoft Build, I wanted to get my hands dirty with it. Here is a quick tutorial on how it works. Express […]<\/p>\n","protected":false},"author":582,"featured_media":40858,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9923],"tags":[10631,10203,10621],"class_list":["post-40845","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-power-platform","tag-express-design","tag-power-apps","tag-tahir-naveed"],"acf":[],"blog_post_summary":"

Tahir Naveed spotlights Express Design, a new way to quickly get started with\u00a0Power Apps by instantly transforming your visual design into an app. As soon as the announcement of Express Design came out on Microsoft Build, I wanted to get my hands dirty with it. Here is a quick tutorial on how it works. Express […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/40845","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/582"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=40845"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/40845\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/40858"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=40845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=40845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=40845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}