Edit

Overview of creating apps from Figma

  • Article

[This article is pre-release documentation and is subject to change.]

The ability to create apps from Figma design files directly helps bridge the gap between design and development by accelerating the app UI development process. It allows developers and designers to collaborate effectively and efficiently to deliver great end user experiences with low cost and effort.

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. Once the app UI is ready, you can extend this app by connecting to data, adding app logic, adding more screens and controls.

Getting started.

Design your app.

Convert into an app.

Next steps.

Step 1 - Before you start designing, read the instructions from the Create Apps from Figma UI Kit about what's supported and what isn't supported.

Step 2 - In Figma, you'll design your app on this page, which contains instructions and guidance for how to work with supported components.

Step 3 - In Power Apps, you'll convert the app. You'll do this by providing a Figma link and token.

Step 4 - After conversion, you'll take some next steps that will make your app even more interactive and useful.

Design your app in Figma

Design your app in Figma using the Create Apps from Figma UI Kit. Use the Power Apps components supported in the kit when designing your app.

Create Apps from Figma UI Kit.

Create an app from your design

After you've finalized the app design, follow the quick and easy steps to create a canvas app from the Figma design.

Continue building your app

Continue building your app in Power Apps Studio by adding more screens and controls. You can also extend your app by connecting it to data, or customize it further by adding app logic.

Next step: Design your app using the UI kit

See also