Create a canvas app based on a Figma design
By using the Figma UI Kit for Power Apps, you can create a canvas app that you can connect to a data source, and then make it available to users in your organization.
The first steps required for this process involve obtaining connectivity information from Figma to the Power Apps studio:
In the Figma studio, select Back to files.
Select Settings in the menu next to your Figma profile name.
In the new window, under Personal access tokens in the Account section, select Generate new token.
In the new window, provide a name for the token, such as Power Apps, and then select Generate token.
A new token generates. Select Copy this token to use it later in this process.
In Power Apps studio, in the Home section, select the Start with a page design tile.
Select the An image or Figma file tile.
Select the Start from Figma tile and then select Next.
Enter a name in the App name field, and then paste the token that you obtained in step 5 in the Figma personal access token field.
In Figma studio, return to the app design, and then select Copy link to page in the context menu for the page that you want to convert to a canvas app. If you receive an error, replace design with file in the copied link.
In Power Apps studio, paste the link in the Link to Figma page or frame field and then select Create app.
The canvas app is available to modify within Power Apps studio.
Now, you can connect the form to a data source. Additionally, you can complement the app by using Microsoft Power Fx and all available controls in Power Apps to provide a rich experience for app users.
Exercise steps (video)
The following video demonstrates the steps for the exercise in this unit.
Next steps
You've now learned how to create a canvas app based on a design by using the Figma UI Kit. Your next step is to learn how to create a canvas app based on the Figma design that you created for the bicycle repair shop.