Create a canvas app from an image

The app-making journey typically involves a design phase to plan what the app should look like. Whether the design is based on an existing paper form, a whiteboard drawing, or an image of a legacy app, it can take considerable time to build the app from scratch.

Create an app from a visual design and connect it to data through a few simple, guided steps.

Prerequisites

• A Power Apps license. If you don't have a license for Power Apps, you can sign up for free.
• If you're using your own image, the image file extension must be .jpg or .png, and the file size must be no more than 4 MB.
• The image must contain a clearly legible one-page form with a light background color. For the best results, edit your image so that it has a white background and high contrast.

Create an app

1. Sign in to Power Apps.

2. On the home screen, select Start with a page design.

3. Select An image or Figma file > Start from an Image.

4. Review the examples of recommended images and tips. For the best experience, make sure your image adheres to these recommendations. Once you’re done, select Next.

5. Enter a name for the app.

6. Upload your own image. If you don't have an image ready, select Start with a sample image and choose one of the available sample images.

   Note

   When using your own image, ensure the image meets the image requirements mentioned in Image requirements.

   For example, here are two sample images with acceptable and unacceptable qualities:

   Acceptable quality	Unacceptable quality

7. Based on the dimensions of your image, the format (tablet or phone) is automatically selected for you. For the best results, we recommend that you keep the suggested format. Using the suggested format ensures the closest match between your input image and the final app. Select Next.

   

8. Your image is automatically tagged based on the components that were identified. For example, in the following sample image, the box that says “Enter your first name” was identified as a Text input control.

   You can draw a new tag by selecting and dragging to select the region that encompasses the component. Then, choose the type of component that you want to associate the new tag with.

   To make edits to an existing tag or to delete it, select the tag. You can then assign a different component for that tag, or adjust the dimensions of the tag by dragging the corners to change the size. If you'd like to remove the tag, select Delete tag.

   

   Tip

   Select the Guidance tab on the right-side of the screen to learn more about the different types of components and how to accurately tag each one.

   After you've reviewed the tags and ensured that each component is correctly tagged, select Next.

9. Set up data. For the best experience, we recommend that you connect your app to a data source by selecting Connect to a Dataverse table. If you choose this option and select Next, you're guided to either select an existing Dataverse table and map the fields in the image to the columns in that table or create a new table in Dataverse and add columns based on the form fields in your image. Your app contains a form component that is connected to your Dataverse table.

   If you don't want to connect to Dataverse, select Skip this for now. If you choose this option and select Create, your app is created as-is, which means that the components you tagged in the previous step are generated directly. They aren't placed into a form component, and your app isn't connected to data.

   

   If you choose to skip connecting to Dataverse, select Create and the app is created for you. Later, you can add data connections to your app to connect the app with your data.

   Note

   The option to Connect to a Dataverse table will be disabled if you don't have Dataverse in your environment.

10. If you chose to connect to a Dataverse table and selected either create new table or an existing table, you can now edit the table and column details. Each tag corresponds to a data column based on the form fields identified in your image.

    Select a tag to modify the column properties, such as Display Name, Name, and Data type. To remove an existing column, select the tag and then select Delete column.

    

    You can add a data column by drawing a new tag and setting the properties. When tagging columns, most of the time you'll draw a tag around two things: a label, and something the user will enter data into, like a text input.

    Tip

    Select Table properties on the right-side of the screen to view and edit the properties for your new table.

    Upon selecting Next, you'll be able to review the table and column structure.

    

    Once you've completed the review, select Create to create the app. App creation might take a minute or two.

11. Once the app is created, your new app opens in Power Apps Studio so you can continue building and customizing your app.

    

    If you chose to create a new table in Dataverse, your form will be automatically connected to your new table.

    

12. Continue to build and customize your app by adding more components or modifying the style properties.

    Here are some common next steps to take your app to the next level:

    1. Add a new screen named Screen2 to your app and a gallery to display the records. Set the data source of the gallery to your new Dataverse table.
    2. On the screen that contains your form, add a button (if you don't have one already) to submit the form data. Set the formula for the OnSelect property to SubmitForm(Form1).
    3. Select the form, then select the Advanced tab on the right-side of the screen and set the property OnSuccess to Navigate(Screen2). This way, after the form data is successfully submitted, the app will navigate to the screen that contains the gallery to display the records.
    4. Select Play on top-right side of the screen to preview your app. Fill in the form, and select Submit to submit the form. Your new record will appear in the gallery screen.

13. Save and publish the app.

Image requirements

• The image you want to upload must have the file extension .jpg or .png. If you have a design image with another file extension, save the image file with a .jpg or .png file extension to use it with this feature.
• Image size must be less than 4 MB.
• If you're using screenshots or digital sketches, alter the background to a light, pure color if white isn't available.
• If you're taking a picture, use higher contrast or make it brighter. Ensure the part you want to tag is clear and bright.
• If you're taking a picture using a camera or phone, use higher contrast to favor light backgrounds. Use any available photo-editing apps to edit the picture contrast.
• If you're using hand-drawn images, try to use a white sketch pad without any lines on it.

Limitations

• Supported components: Button, Check box, Data cards, Date picker, Drop down, Edit form, Label, Radio, Rating, Slider, Text input, and Toggle
• Only canvas apps are supported.
• You can upload only one image at a time to create an app.
• Complex forms, forms with colored backgrounds, multipage forms, and forms with underlined input boxes are not supported.
• Support for styles is limited. The styling of the components in the app, such as fonts and colors, will be based on the Office Blue theme in Power Apps.
• Support for responsiveness is limited. More information: Building responsive canvas apps

See also

• Add and configure controls
• Get started with formulas in canvas apps
• Add data connections to canvas apps