Power Apps Figma UI Kit – A Year in Review

Introduction

In December 2022, Microsoft announced plans to integrate Figma, the collaborative design tool, with Microsoft Power Apps. Figma is a software company that offers an innovative, collaborative design and prototyping tool. It allows designers and teams to create, prototype, and share designs for websites, mobile apps and other digital products.

How does Integration work?

Whilst Figma has previously offered Integration to other Microsoft products such as Office 365 and Teams. The Figma UI Kit published by Microsoft allows the Power Apps platform to take full advantage of Figma design files.

What is the Figma UI Kit?

A Figma UI kit is a pre-designed set of user interface (UI) elements that can be used as a starting point for designing a user interface in Figma. UI kits typically include a range of common UI elements such as buttons, forms, navigation bars, and other interface elements that are commonly used in web and mobile app design. Using a Figma UI kit can save designers time and effort by providing a set of ready-made UI elements that they can customize to fit the specific needs of their project. UI kits can also be useful for ensuring consistency in the design of a user interface, as they provide a set of standardized elements that

can be used throughout the design process.

The Microsoft Figma UI Kit (Preview) released by the Microsoft team, combined with the ability to directly import Figma files into Power Apps, allows for rapid prototype to app creation. Think of the Figma UI Kit as a great starter pack for your next Power Apps project.

Tips for integrating Figma into your Power App development workflow.

I am pleased that we took the leap into working Figma into our development workflow for Power App projects. It has not been without some teething issues, which I will cover later, but the investments made have increased client satisfaction and project success in the projects which we have deployed with.

I’ll be summarising my thoughts with the caveat that I work for a global systems integrator and not necessarily as an end user. Here are my tips for how you could integrate Figma into your development workflow

1. Upskilling – I sought to understand as much as I could about the Figma tool to the point where I could develop a simple storyboard. Online tutorials were a great starting point; however, proficiency, as with all new tools, comes with extended time with those tools. Reusable components, developing custom colour palettes, and rapidly importing assets from the Figma community were important in improving workflow with the tool.
2. Workshop Preparation – What was done in the past with sticky notes and a virtual whiteboard could now largely be performed with Figma.  I attempted to show and experiment in real-time with workshop participants using Figma. One of my learnings was to ensure that we were going into a workshop well prepared – creating a branded Power App template ahead of time, ensuring required members of the team had editor access to Figma, and having a simple 3-5 page storyboard configured. This allowed clients to feel immersed from the get-go and for our facilitators to quickly iterate on ideas raised during the workshops.
3. Playback and Presentations – Playbacks and demonstrations are helpful in selling an idea. In this case, the idea is how your clients can see themselves using your app. Take the time to refine your prototype and ensure your team addresses all of the concerns raised from prior workshops. It may be helpful to engage a design/UX consultant who can really put on the final shine to your presentation.
4. Technical Handover – As with technical documentation, your Figma Design files are equally important to development teams. It serves as a vital point of reference and ensures all members of the team can quickly get on the same page. Your design files should form a part of your documentation handover package.

Improvements that I would like to see

The following are challenges I was presented with during our adoption of Figma and using the Power Apps UI Kit and some suggestions for improvement for the Microsoft product team to improve adoption figures for the Figma UI Kit.

1. More controls in future versions. I would expect that most of the first-party controls will be available in future versions; currently (v0.1), there is limited support for Power App Layouts, Gallery Support and a number of other more advanced controls within Power Apps.
2. Better rendering within Power Apps. Importing Figma design files into Power Apps still requires a significant amount of rework. Often fonts do not carry over, sizes and alignments are not respected, and while not difficult to rework, it is unnecessary and time-consuming.
3. A clearer roadmap for Figma and its role with Power Apps. There was some uncertainty, especially during the acquisition of Figma by Adobe in September 2022 and Microsoft’s future commitment to the platform. We’re hoping there will be a definitive statement that this feature is still on the path to general availability.

Conclusion

Figma is a powerful collaborative prototyping tool that has demonstrated quantifiable improvements to the delivery of Power Apps projects and should be seriously considered by system integrators in the early prototyping phases of a project. We eagerly await future improvements to the Figma UI Kit in the next release.