Power Apps – Express Design (Build an app in seconds) – Figma to app

In continuation with our first series – Power Apps – Express Design (Build an app in seconds) – Image to app, let us see how Figma app works.

Figma is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows. The Figma mobile app for Android and iOS allows viewing and interacting with Figma prototypes on real-time mobile devices.

Figma to App bridges that gap between design and development, with Figma to App designers and developers can collaborate together to build an optimal experience for the end-users.

As a designer, you will simply create your design using Figma and then you upload that Figma file to Power Apps which will be taking care of converting your design into a working app.

Without further ado, let’s jump into the action.

Design in Figma

• Go to the www.figma.com and create an account, then on the left navigation menu click on Community and look for a template named NETFLIX (first prototype)

• Click on Duplicate to load in the Designer tool – this is the place for all the customizations

• Copy the URL from the URL Bar (see red circle in step 2 image)
• Create a Figma personal access token using the following steps

- On the Figma home page, click settings

- Look for Personal access tokens, add a token description and create a new one

- An important point to note is to copy the token

• Go to Power Apps and create a Figma (preview) app

And voila, once more –?Power Apps has provisioned from Figma?in a few minutes. Please note that this is a huge productivity (design) saver that will allow businesses to roll out user-friendly, great-looking apps to their users in a short amount of time and effort.

In summary, Figma, a versatile vector graphics editor and prototyping tool, offers a unique feature, Figma to App, that bridges the gap between design and development. This feature allows designers to create designs in Figma and convert them into functional apps using Power Apps. As you saw, the process is straightforward: create a design in Figma, duplicate a template, and copy the URL - then, generate a Figma personal access token for authentication. Finally, upload the Figma file to Power Apps, which takes care of the conversion. This efficient and collaborative approach empowers businesses to rapidly develop user-friendly and visually appealing apps, significantly boosting productivity. Stay tuned for more insights on leveraging Figma for your app development needs.

API to app

At the time of writing this blog, the App-from-API feature is to be released in early July 2022.

Coming soon…