June 7th, 2022

Express Design – AppDev on Steroids

Developer Support
Cloud Solution Architects

Tahir Naveed spotlights Express Design, a new way to quickly get started with Power 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 Design (Preview) 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.

Convert Figma files, PDFs, paper forms, and hand drawn sketches into apps with express design in Power Apps.

Design an app: I created the following prototype using sticky notes and took a picture. It doesn’t get quicker & dirtier than this. This feature requires PNG/JPG/JPEG image format (not iphone’s HEIC) so I decided to crop it too while converting it in to PNG format.

Text, letter Description automatically generated A picture containing text, whiteboard Description automatically generated

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

Graphical user interface, application Description automatically generated

Step 1: Image screen – Give name of the app, provided the app design image.

Step 2: Components screen – Express Design’s AI detected the labels, input boxes and buttons for the desired app as expected.

A picture containing graphical user interface Description automatically generated

It missed the Age input box as I made it little smaller, so I decided to add it manually.

Graphical user interface Description automatically generated

Step 3: Data screen – Leave Create a new table in Dataverse checked. It will allows the automatic table generation in the Dataverse.

Graphical user interface, application, Teams Description automatically generated

Step 4: Table 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 in my app should be a number column so I fixed it here.

Graphical user interface, application Description automatically generated

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

Graphical user interface, text, application, email Description automatically generated

Result:

The final app and table looks like this:

Table Description automatically generated

Text Description automatically generated

Conclusion:

Express Design has produced a working app with backend database table…which works perfectly. What’s 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… and that too without writing a single line of code.

This surely is a great feature for citizen developers and will also shorten the time for idea to execution for pro-developers.

Author

Developer Support
Cloud Solution Architects

Microsoft Developer Support helps software developers rapidly build and deploy quality applications for Microsoft platforms.

0 comments

Discussion are closed.