The brand-new AI-powered feature is available in Power Apps – Express design. Create a design using a tool or piece of paper, upload the image to the Power Apps portal, and it’s… almost done. I tested it for a few hours with different designs and it looks good. It has limitations and beta functions, but I think that it’s worth checking. So, let’s go and play with Express design!
Introduction
Express Design in Power Apps is the new way to create an application using mockups. AI-based technology analyzes your design and creates fields and Dataverse tables for you. This is a Preview feature!
There are 2 options:
Image
Upload JPG or PNG file with mock-up. The image must contain only a one-page form with light (white suggested) background color. Complex forms, forms with colored backgrounds, multi-page forms, and forms with underlined input boxes aren’t supported.
There is no info about image size, but mock-ups should be small (KBs if created in dedicated tools or MBs if you want to use scans/photos).
Figma design
You can use Figma design files to create Power Apps. Figma is a commercial online tool dedicated to designs, prototyping, whiteboarding, etc. You can test it using a free plan.
Using this option, you need to paste a link to a Figma design file (online).
Limitations:
- You can use it to create a canvas app only
- Single-page forms are allowed at this time
- Supported Power Apps objects – Button, Check box, Data cards, Date picker, Dropdown, Edit form, Label, Radio, Rating, Slider, Text input, Toggle
Image-based app
I will test Express design using uploaded files. This should be more common because we’re not limited to one supported tool. You can any tool you want (Wireframe, Miro, Balsamiq, Axure) and save your work as an image. You can also use any graphic tools (Editor in Snagit, Photoshop, Paint) – we only need basic shapes and text.
The 3rd option is to create a mockup on a piece of paper and scan it/take a picture of it.
1. Navigate to the Power Apps portal (https://make.powerapps.com/) and select Image (preview) from Start from section
2. The first screen shows basic information about form image quality, tips, etc. On the next one, you must provide the app name, select the image from your computer, and choose the format (phone or table).
If you want to play with samples provided by Microsoft, select Start with a sample image.
I used the following form with basic fields (text input, choice dropdown, date picker, and toggle).
3. Click next and AI will do the rest. On the results screen, you can check AI accuracy and correct it. I had to correct the toggle field and date picker, but other fields were recognized correctly.
4. If you want to change the existing field type, just click on the field, and select the proper type. If a field wasn’t recognized at all, select it, and choose the right type from the context menu.
5. There are 2 options on the next screen – create a table in Dataverse for your app or skip this step. If you skip it, you will get the app with fields only.
6. Optional – create a table in Dataverse. If you selected Create a new table in Dataverse you can now check all fields with assigned names, internal names, and data types. You can modify them if you want to. When it’s done click the Next button.
7. If you created a table for your app or skipped the Dataverse part, you will get a working Power App application with all fields. In my example, all fields are connected with my Dataverse table, and the Form object is connected to that table.
Fields are created and aligned based on your mock-up, although some fields are shifted for a few pixels. I tested it with sample images and the results were the same (some fields were shifted).
Now you can enhance the app layout, add logic, and add advanced objects.
Sketch
I tested also a mock-up created on a piece of paper. Same fields and design but using my very own drawing skills.
Recognized fields are the same, so even a simple hand drawing will do the job.
Summary
Express design is another option to start creating apps in Power Apps. This time it takes care of the initial step and creates all required fields and text labels for one screen.
It will help you transform mock-ups (you should have mock-ups for every app) into working screens during the initial phase of creating the app.
The Preview version has limitations and some bugs (I spotted 3 so far) but I think that the final version should be polished, and I hope that it will support more types of objects. If the updates bring multi-page support and more controls available, the feature will play a major role in app making cycle.
I’m curious how this feature will evolve and how fast AI will replace basic operations in Power Apps.
