The Microsoft Power Platform received quite exciting announcements during Microsoft Build, from Power Pages joining the Power Platform family as its own standalone product to new features being added onto PowerApps that will make the app building experience more seamless, exciting, and faster.
Objectives
- Understand what Express Design is
- Understand what the Image to App & Figma to App features are
- Build an app using the Image to App feature
- Build an app using the Figma to App feature
Understanding Express Design
Express Design is a new way to quickly get started with PowerApps by instantly transforming your visual design into an app. With Express design, makers can quickly turn existing design artifacts—including paper forms, whiteboard sketches, or Figma files—directly into a working app. Express design currently supports design artifacts in the form of an image or a Figma design file.
Understanding the Image to App & Figma to App features?
Image to App
The app making journey typically involve a design phase to plan out what the app should look like. Whether the design is based on an existing paper form, a whiteboard drawing, or even an image of a legacy app, it can take a considerable amount of time to build the app from scratch. With the Image to app feature, you can now create an app from a visual design and connect it to data through a few simple steps in the guided interface. This feature makes it easy for makers of all skill levels to jumpstart the app development process
Figma to App
Designers can create designs in Figma using the Create Apps from Figma UI Kit, which provides supported components for Power Apps and includes detailed instructions for how to use the kit. Once the designs are created, simply provide the link to the Figma design file and Power Apps will generate a new canvas app based on those designs. The design frames are automatically converted into screens in Power Apps.
Build an app using Image to App
- Sign into PowerApps
- Click on Create on the left navigation and then click on Image (Preview)
- You will be presented with a dialogue box with tips and recommendations on what type of forms you can and cannot upload when building an app using this feature the click on Next. Please note that it is recommended to use simple forms, forms with no colored background and forms with only one page.
- To kick off the app development process, you will be required to provide the name, an image to build the app from and an app format (tablet/phone). You can also opt for using the sample images that are already existing within PowerApps.
Picture showing the Image to App steps
- Next, you need to identify and confirm the components for your app (these will be UI controls on your app). On this step you only need to tag and assign the components to their correct UI controls.
Picture showing component/UI control taggingNote: This uses a similar process with the Object Detection model in AI Builder uses.
- Next, you will be asked to add Data for your app or you can skip this step. If you choose add data, you can choose the option Create a new table in Dataverse – this will create table for you in Dataverse with columns that are directly related to the information on your form/app. Then click on Next.
Picture showing creating a Dataverse table option
- Once you have chosen to add data to your app, you will be asked to tag the columns you want to be in your Dataverse table based on the image of the form you uploaded, with their provisioned column names and data types. Once done click on Next.
Picture showing Dataverse table column creation and tagging
- Next, you will be asked to review and confirm the columns tagged for your Dataverse table – Once happy with the tagged columns then click on Create
- Your app will be created within a few seconds/minutes, resembling your form that you uploaded as an image with all the UI controls. Please note that when using this feature only the user interface is created for your app and no logic is added, example PowerApp Functions.
Picture showing PowerApp created from picture
- Lastly, if you check data sources in your app you will find your newly created Dataverse table as part of the app.
Picture showing available datasources in a PowerApp
Build an app using Figma to App
- Sign into PowerApps
- Click on Create on the left navigation and then click on Figma (Preview)
Piicture showing PowerApps create screen
- Next, you will be presented with a dialogue box to fill in the details of your app. You can provide a Name for your app then leave the Link to Figma page or Frame and Figma personal access token blank, you will get these two at a later step.
Picture showing Figma to App feature
- Still on the dialogue box, click on the Figma UI Kit link provided on the description of the feature. This will take you to the Figma website with the PowerApps Figma kit.
Picture showing the Figma UI Kit
- On the Figma website you will be presented with the PowerApps Figma UI Kit, the kit has all the information you need to understand on how to use the kit and how to build Figma designs/wireframes that can be translated properly onto PowerApps.
- Once you have read through the kit (optional) to better understand it, click on the blue button labelled Duplicate. This will make the Figma UI Kit into a wireframe that we can use to build our app on.
- Once the Figma UI Kit is made into a wireframe with different pages, on the left-hand side of your screen you will see a list of pages of the UI Kit. Scroll down on the list of page to choose and click on Sample App. This will open up a sample app design we will use to create our PowerApp.
Picture showing Figma design
- Notice on the sample app you have 3 screens which are Start, Sign-up & Thank you screens. To get this to your PowerApp, right click on the word Sample App and click on copy link to page. This will copy the link to the sample app which we will use in PowerApps.
Picture showing Figma page options
- Once you have copied the link to the sample app, navigate back to the tab where you first opened the Figma UI Kit. Click on your Profile, then click Settings. You will then be presented with a dialogue box, at the top of the box click on Account.
Picture showing Figma dialogue box
- You will then be presented with your account details, scroll down to Personal access tokens section then on the Create a new personal access token text box type in your access token description then press enter. This will create an access token for you.
Picture showing Figma personal access token creation
- Once the token is created, click on Copy this token.
- Once the token is copied, go back to PowerApps and paste in the link to Figma page we copied in step 8 and also paste in the access token we copied on step 11 then choose Phone as your app’s format since the Figma design is in Phone format then click on Create.
Picture showing Figma to app creation with details
- Your app is now created with 3 screens you saw on your Figma design. Please note that the app is created with the User Interface only and does not have any logic, if you want to add logic to your app you will need to do that manually.
Picture showing Figma to app creation completed
