Power Apps Figma UI Kit – A Year in Review and Future of Express Design

Introduction

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.

In May 2022, Microsoft announced plans to integrate with Figma, the collaborative design tool, when they introduced Microsoft’s Express Design.  This enabled auto-generating apps from Figma files and other image files.

According to Ryan Cunningham (VP, Power Apps) more than half of the people using AI to generate apps from images or designs are new to the platform, and more than a third of all makers are getting AI-powered suggestions in Power Apps today.

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 via Express Design.

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.

At some point during the application development lifecycle, you’ll want to test your ideas and validate assumptions with clients using a prototyping tool (be in a UI tool, directly within Power Apps, or hand sketching).

Within our team at IBM Consulting, 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 hope this article aims to prepare you for.   Still, overall the investments made have considerably positively impacted client satisfaction and project success in the projects we have deployed with.

I’ll summarise my thoughts with the caveat that I work for a global systems integrator and not necessarily as an end user.

Here is how I incorporated Figma UI design into the early phases of our project development workflow:

1. Upskilling – I sought to understand as much as we 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.   Learning to develop reusable components, developing custom colour palettes for each client, and identifying relevant and useful assets from the Figma community were critical in improving workflow with the tool.
2. Workshop Preparation – Ideation with whiteboards and sticky notes could now largely be performed with Figma.  Experimenting in real-time with workshop participants using Figma and ensuring you have adequate workshop time to do so was helpful.  One of my learnings was to ensure that we were going into a workshop well prepared to make the most of our face-to-face time with clients – this included creating a branded Power App template ahead of the workshop, ensuring required members of the team all had editor access to Figma, and having a simple 3-5 page storyboard pre-configured. This allowed the team to quickly iterate on ideas raised during the workshops, maximising our productivity during workshops.
3. Playback and Presentations – Playbacks and demonstrations are helpful in immersing your client and having them visualise themselves using your app.  Expect a lot of feedback, and ensure that you take the time to refine your prototype ensuring your team addresses all of the feedback from workshops – this demonstrates that you have listened carefully and understood their requirements.  It may be helpful to engage a design/UX consultant who can elevate the level of immersion of your app.
4. Technical Handover – As with technical documentation, your Figma Design files are equally important to development teams. It is a vital point of reference and ensures all team members can quickly align on requirements. Your design files should form a part of your documentation handover package.

Improvements that could be made to aid adoption

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. Whistly, the Figma UI Kit has a vast number of controls; they are not the exhaustive list of controls available to Power Apps (understandably as a first release). However, this limits our ability to fully demonstrate the breadth of capability of Canvas Power Apps to clients. I hope to see parity of available first-party Canvas controls in future versions, such as better Layout support, Gallery support and perhaps several other more advanced controls within Power Apps (image controls etc.).
2. Better rendering within Power Apps. Importing Figma design files into Power Apps still requires significant 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 more precise Release Plan for Figma and Express Design, similar to what we have for Dynamics 365 roadmaps. Especially with the Figma acquisition by Adobe in September 2022, we are keen to hear what Microsoft’s commitment to the platform will be. Also, a timeline to general availability would be helpful for partners looking to adopt.

The Future of Express Design and Power Apps

Though we do have some information from Ryan Cunningham to the future investment into Express Design, he states that – “overall the response has been very strong, and we have a lot of continuing investment in this area of AI-assisted development. With how quickly the underlying tech in large language models and generative AI is evolving, you can indeed expect more from us on this front in the coming year. 

We are also doing some interesting work around our controls and theming this year which you’ll see more of in the coming release waves (and will set up some big steps forward for the design of Power Apps in general, including via design tools like Figma), so stay tuned for more on that front as well.”

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.