Express Design: Create your First Microsoft Power App from an Image

Streamlining App Development with Image to App Conversion

Discover the Power of Express Design

Microsoft Power Apps introduces Express Design, a game-changing feature that allows you to rapidly transform your visual design into a functional app. With Express Design, you can instantly convert various design artifacts, like paper forms, whiteboard sketches, or Figma files, into working apps.

This tutorial will walk you through creating a Power App from an image and evaluate how well the process works.

The six steps — Image to app

There are six steps in the process of creating a Power App from an image:

1. Prepare your image: Ensure the image meets the necessary requirements (file extension, size, and background) and follows the best practices for optimal results.
2. Upload your image: Go to https://make.powerapps.com/ and select the “Image” option from the Home screen. Name your app, choose “Upload my own” and upload your saved image file.
3. Tag components: Power Apps will automatically tag components within your uploaded image. Review and adjust the auto-assigned tags as needed by clicking on the tag and selecting the correct component type or deleting it.
4. Set up data: Connect your app to a data source by choosing the “Create a new table in Dataverse” option, or skip this step if you prefer to do it later.
5. Customize your app: After the initial setup, you can make further adjustments to your app, such as resizing text inputs, changing background images, modifying font weights, or adding icons.
6. Review and test your app: Compare your final app with your original image to see how well the design was preserved, and make any necessary adjustments to ensure the app functions as intended.

Try it for yourself

Begin by reviewing “Create a canvas app from an image — Power Apps | Microsoft Learn.” Keep in mind the limitations of Express Design to ensure your project is suitable:

• Supported components: Button, Check box, Data cards, Date picker, Drop down, Edit form, Label, Radio, Rating, Slider, Text input, Toggle
• Only canvas apps are supported
• Upload limit: one image per app
• Unsupported features: complex forms, colored backgrounds, multi-page forms, underlined input boxes
• Limited style and responsiveness support

For this tutorial, I created an image using a wireframe that I created using Figma.

Screenshot of the wireframes created using Figma.

Start from an image

Go to https://make.powerapps.com/ and select the “Image” option from the Home screen. Name your app, choose “Upload my own” and upload your saved image file.

There are Seven options to create an app from.

Next, Name the app, select “Upload my own”, choose the file and then select the format.

Ensure your image meets the following requirements:

• File extension: .jpg or .png
• Image size: less than 4 MB
• Background: light, pure-color or white
• For optimal results, use high-contrast images, brighten up dark areas, and ensure clarity in the design elements.

Uploading an image to create your Power App.

Tagging Components

Power Apps will automatically tag components within your uploaded image. Review and adjust the auto-assigned tags as needed by clicking on the tag and selecting the correct component type or deleting it.

In my example, I made five adjustments based on the auto-assignment, such as correcting vertical lines identified as text inputs and background images identified as buttons.

It’s easy enough to delete a tag or to change the tag by clicking on it and selecting the correct tag in the context menu.

Setting Up Data (Optional)

Connect your app to a data source by choosing the “Create a new table in Dataverse” option, or skip this step if you prefer to do it later.

Customising Your App

After the initial setup, you can make further adjustments to your app, such as resizing text inputs, changing background images, modifying font weights, or adding icons.

If you want the exact design styles to be preserved when you create your app, consider creating a canvas app from Figma.

Result after making the changes manually

Comparing Results

Compare your final app with your original image to see how well the design was preserved.

Final results: Figma wireframe and Power App import from an image

Conclusion: A Beginner-friendly Solution with potential for Further Enhancement

Express Design is a beginner-friendly tool that simplifies the process of creating Canvas apps, making it ideal for those new to Power Apps. It does save some initial time by generating a basic app structure from a single image, but as it currently supports only single-screen designs, you’ll need to create additional screens manually if your app has multiple screens. This is a limitation worth considering, and I hope to see the option for adding more screens from multiple images in the future.

Although I had to make several adjustments to match the Power App to the original wireframe, the feature still expedited the app development process. Keep in mind that further refinements may be necessary to achieve an accurate design representation.

Give Express Design a try and share your experiences in the comments below!