Blogs

Create apps from Figma in Power Apps

Inkey, January 30, 2024 994 Views

The ability to create PowerApps 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.

Note: After you convert the design into an app, you will still need to do additional work in Power Apps, You will still need to connect components to data.

Design your PowerApps in Figma

Before you start designing, choose which screen size your app will use. The two choices are phone or tablet.

For more information about designing your app Click here. After completing the design you will convert it into an app

Convert into an app

• When you’re done designing in Figma, go to your Power Apps.
• Go on create tab and click on Figma

• Type a name for your app. Then in the next step, we’ll show you how to get your link and token.

• Now you’ll switch back to Figma to get a link and a token. You’ll paste these into Power Apps so that it can create an app from your design.
• If you have a page with multiple screens to convert, right-click the page (Control-click on Mac) and select Copy link to page.

• If you only want to convert a single frame into a one-screen app, right-click the frame (Control-click on Mac), and then select Copy/Paste as > Copy link.

• With the link copied, switch back to Power Apps, and paste the link into the Link to Figma page or frame box.

• Now you need your personal access token so that Power Apps is able to retrieve your Figma design on your behalf.  This token gives Power Apps read-only access to your Figma design.
• If you’re using Figma in a web browser, select the Figma menu, and then select Help and account>Account Setting

• If you’re using the Figma app, select the Home tab- In the upper-right, select your profile initial or picture, and then choose Settings and then you can generate a token.
• Scroll until you see Personal access tokens. In the Create a new  personal access token box, type a name for a new token. Any name will do.

• After you press Generate token, your token will appear in a yellow box. Select Copy this token to copy it.

• With the token copied, switch back to Power Apps, and paste it into the Figma personal access token box.

• Choose between Tablet or Phone and select Create.
• After you select the Create button, Power Apps will make a new canvas app based on your Figma design.

Note: There’s no continuous connection between Figma and Power Apps. If you want to make changes in Figma, then you’ll need to repeat this process to generate a new app with your changes.

This is how you can create PowerApps from Figma design.

---

Know the number of records in any Dataverse entity or table.
https://www.inkeysolutions.com/entity-record-counter

ATM Inspection PowerApp to ease ATM inspection and report generation process.
https://www.inkeysolutions.com/microsoft-power-platform/power-app/atm-inspection

Insert data into Many-to-Many relationship in Dynamics CRM very easily & quickly, using the Drag and drop listbox.
http://www.inkeysolutions.com/what-we-do/dynamicscrmaddons/drag-and-drop-listbox

Comply your Lead, Contact, and User entities of D365 CRM with GDPR compliance using the GDPR add-on.
https://www.inkeysolutions.com/microsoft-dynamics-365/dynamicscrmaddons/gdpr

Create a personal / system view in Dynamics CRM with all the fields on the form/s which you select for a particular entity using the View Creator.
http://www.inkeysolutions.com/what-we-do/dynamicscrmaddons/view-creator