Design your app using the UI kit

Article
03/03/2023

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

To create an app from a Figma design, you must start with the Create Apps from Figma UI Kit. The UI kit consists of components, sample apps, and several additional resources such as:

Information about what’s supported and what isn’t.
Step-by-step instructions on how to design your app in Figma so that it can be converted in Power Apps.
A list of supported components—from base-level screens to individual components such as buttons, drop downs, and text inputs.
Important guidance on how to use the components.

Get the UI kit

Go to the Create Apps from Figma UI Kit page.
If necessary, sign in with your Figma credentials.
Select Duplicate, and then choose the Figma team you're a member of. For more information about duplicating projects in Figma, see Figma: Duplicate files or projects.
If necessary, select the down arrow next to the file name, and move the file out of your drafts.

Read the instructions

Read the instructions from the Read this first and Step 1: Getting started pages inside the UI kit. The instructions on these pages help you understand general guidelines about using this kit. You'll also learn more about the resources used by the kit, such as the font styles, component guidelines, supported components, and more.

Design your app

Follow the instructions in the Step 2: Design your app page inside the UI kit to get started with using the kit to create your own app design.

Do’s and Don’ts while designing

The kit contains detailed guidance on how to use the components. However, here are some of the top do’s and don’ts to keep in mind while designing the app:

Do read each page carefully so that the design process and the conversion process go smoothly.
Do design only using the supported components from this kit.
Do use only the supported fonts listed in the kit.
Don’t change the component names.
Don’t change the component layers.

More information

The kit also provides additional pages for more information as summarized below:

Step 3: Convert into an app - a visual representation of converting the app design into an app. To follow step-by-step instructions, see Create a canvas app from Figma.
Step 4: Next steps - explains the possible next steps you can take to further prepare your app for your business scenario. These steps include connecting to data, adding app logic, adding more screens and controls.
Supported components - lists information about supported components. For more information, see Components supported by the UI kit.

Next step: Create a canvas app from Figma