Import your Figma design in Power Apps

When you see people creating Power Apps most of the time they don’t think about the design. When you create mobile apps you normally start with the design. Now its possible first to let your designer create a design in Figma and then import that design into Power Apps.

Create your design in Figma

You can just start designing your application as you should normally do in Figma.
The nice thing about Figma is that you have more design options than in PowerApps. In Figma you can create custom shapes with the pen tool where with PowerApps you only have predefined shapes. In Figma you can also create color pallets that you can reuse in your whole design.

Import your design into Power Apps.

When you finished your design you can start importing it in PowerApps.
In Power Apps go to “home” and click on Figma.

Link your Figma project to Power Apps

Next you need to create a link between your Figma project and your Power App.

Give your application a name.
For “link to Figma page” open your figma project and right click on “page” in your layer menu and then on “copy link to page”.
To get your “Figma personal access token” go to the settings of your Figma account. On the bottom of the settings you can generate a personal token. Don’t forget to copy it because you can only access the token then, after you close the window you can’t access it any more. Than you will have to create a new token.
After that choose if your design is for tablet or phone and then click “Create”

Add the logic to the Power App

After loading you will see that your screens are created in PowerApps and you can start adding the logic.