Webinar Recap | Accelerate Custom Power App Creation – Convert Figma Designs to Power Apps Automatically.
Thank you for your interest in “Accelerate Custom Power App Creation – Convert Figma Designs to Power Apps Automatically.” If you were able to join us for the webinar, we sincerely thank you for being there. We hope you had as much fun getting to learn about Figma, Power Apps, and UI/UX as our speakers did sharing their knowledge with you.
Didn’t get a chance to catch our session live? We’ve got you covered.
The gap between design and development is difficult to bridge. In fact, some fast-paced teams might even go without one or the other. With design apps like Figma or coding platforms like the Microsoft Power Platform, citizen designers and developers — as well as their teams — are empowered to be leaner teams, move faster, and accelerate project timelines. Now, designers can also apply their custom UI to Power Apps designed in Figma using the Create Apps from Figma UI Kit. But you may be wondering, what’s possible? And how do you set up your designs for an easy transition? Well, you’re in luck! In this webinar recording, our branding and UI/UX experts, Maude Tanguay and Kunaal Sharma, show you how to elevate your Power App experience without coding.
- Overview of the Power Platform and Figma
- Key differences between UI and UX
- Learn UI/UX best practices
- Discover why you should leverage grids for interface design
- Top three Power Apps design pitfalls – and how to combat them
- Learn Figma best practices for Power Apps
- See a live demo on how to convert from Figma to Power Apps
11:05 – Power Platform & Power Apps
The Microsoft Power Platform is a robust set of applications that allow you to automate processes, build solutions, analyze data, and create virtual agents.
“It’s a group of products offered by Microsoft to develop sort of custom business solutions to analyze, draw data visualizations, automate a business process, or build virtual agents for communications, and all of these are encompassed within the Power Platform. What we’re focusing on today, part of this Power Platform is Power Apps. Microsoft defines Power Apps as a suite of apps, services, connectors, and data platforms that provide a rapid development environment for you to build your custom applications quickly and easily. In short, it’s the way for you to create your business line of apps.”
11:57 – Figma
Figma is a cloud-based design application focused on collaboration. You can use it to create all kinds of design work.
“Figma is the hot new thing for designers recently. It’s the tool that all of us designers love to work in. It’s a web-based interface application, and you can do all kinds of graphic design work, not just user interface. You can create vector artwork, create wireframes for your website and your apps, and create social media posts. So basically, anything in between, from website designing to social media posts, you can do it all within Figma. It’s very easy and works on any platform and any browser, so that’s the one great thing about it. The big selling point is that you don’t need a desktop application to do this; it can all be done within your browser.”
13:19 – What is the difference between UI and UX?
User interface (UI) is the series of visual elements that allow people to interact with a product or service. User experience (UX) is the internal experience that a person has as they interact with every aspect of a company’s products and services.
“When we talk about UI, we’re talking about the interface that you’re using to access a product or a service. It is, by nature, a digital product, so we’re talking about apps, websites, and web pages. It leverages some of our senses, not all of our senses, so you’re talking vision, touch to some level, and hearing. What we get to play with as designers are graphic elements; we have the fonts, images, and pictures. When we’re talking about UX, it goes way beyond just an application. It is a physical experience— it can be physical in real life, or it can be digital as well, just like UI. However, it leverages all of our senses and, on top of that, also leverages our minds, our feelings, and our emotions. It is what you do and how you interact with others on your way to getting the service and product you want. After that, the user experience is going aim to remove as many pain points and challenges as possible for you as a buyer and end user. The UX designer has to see them coming or answer them when they get put forward through testing. For tasks that are related to UX specifically, you’re going to have more encompassing tasks. You have to research your competitors, write user stories, and research personas and users. You have to be an integral part of the product strategy.”
19:40 – UI/UX Best Practices
There are some very important concepts that will elevate your designs and make them look much cleaner and more professional.
20:07 “So, there’s the concept of balance. When you’re creating elements and putting them together on a page, you want to make sure that there is a sense of balance between the two elements so that if I am to draw a fictional line between them the alignment of each side of the two items is the same, its mirrored, and everything is really on the same imaginary axis and you have your sense of grid, building itself from the balance of your element.”
20:32 “Another thing you can use to create importance and hierarchy in your design is using scale. You can use the same elements and put them together through different sizes and different scales, automatically creating a sense of importance. Understanding that rank in your composition is something primordial – what are you trying to get people to do in that specific screen? That should not necessarily be the biggest one, but the scale should be according to the different layers of actions that you want them to perform in that screen.”
21:04 “Another thing that’s important to master is contrast. The juxtaposition of different elements that are either similar in size or similar placement on the page by creating contrast between the color of the element. Sometimes you want to use contrast in texture, so that’s something that’s also very important to convey their difference in the user experience with your interface.”
21:32 “Next, visual hierarchy. As a designer and even as an end user yourself, when you do look at an interface, what is the most important thing to do? What is the second thing? What is the third thing? Where should your eye be drawn to? Is something that you need to think about whenever you design something. It’s not only about making it pretty – defining that hierarchy should be rule number one.”
22:21 “Lastly, one of my favorite design principles, The Gestalt Principle. That’s really just a way of saying that our minds are so smart that they don’t need the full element. As designers, we can use that to convey information to create more vivid designs.”
26:30 – Top three Power App design pitfalls
There are three common pitfalls that fall around specifically designing interface for Power Apps. These are “making it pretty”, doing it alone, and defaulting your way through.
Making it Pretty
27:30 “When it comes to making it pretty, I think that my problem with it is that you need to plan user experience in mind. So, it goes beyond making a pretty; it needs to be thought of and planned from the beginning.” eams share or contribute to the same key result but have different objectives which they are looking to achieve. Or not at all, the teams don’t have any dependencies between them.”
Doing it Alone
28:20 “When we talk about doing it alone, a lot of people do it from scratch, they build the whole thing, they’re isolated in their silo – they don’t implicate the rest of the team. After the thing is coded, we try to see if it’s used. By leveraging a template, you’re 100% sure that whatever you create is going to look and feel amazing. You’re sure that it’s going to be better, the best practices of UI are already built-in, and then you can customize it to your own versus just starting from scratch.”
Defaulting your Way Through
29:50 “If everyone uses the default settings, then everyone’s apps are going to look the same. There’s also the fact that if you look at the alignment and the balance of those elements by default, they don’t all have the same length. So, I can tell as a designer that this is unrefined and that it’s straight out of the box. Really take the time to style it, to make it yours, to apply your company’s guidelines, talk to your marketing department, and talk to your internal designers. They chose those colours and fonts for a reason. If you have an internal brand guideline, use It. If you don’t or if you’re doing client work, ask them if they have some references or if fonts are important for them. It might not be for you but for the person that finds those elements and that actually put them forward, there’s always either a reason or an important storyline behind it.”
31:45 – Figma best practices for Power Apps
Keep these key points in mind before you start creating.
31:51 “Download the Segoe font. If you’re working with SharePoint or any sort of 365 product, Segoe is their go-to system font.”
32:15 “There’s a supported list of components; take a look at that before you get started with your Power Apps design. Just kind of see what’s there so that you can make informed decisions when starting to plan out and create your product.”
32:31 “While you’re in Figma, don’t try to change the component names that are set in a way where, once it does get converted over to power apps, it uses that to create some interactions, such as a button that has a hover to it – that gets transferred over to Power Apps from Figma.”
33:24 “Pay attention to the font size conversion. Currently, Microsoft is still using points for Power Apps, but Figma utilizes pixels. Once you move it over to Power Apps, there’s a conversion that happens.”
33:50 “For developers, if you’re jumping into Figma, make sure your designers are giving you edit permissions into the Figma file. That way, you can see what’s there if there’s anything that is glaringly needing to be updated. You can give feedback, and then we can update that before jumping into power apps.”
34:30 “The default start screen in Power Apps is always the screen at the top unless you specify one in the StartScreen property of the App Object.”
And there you have it! We hope this recap has provided some valuable insights that you can put into practice. We also covered a demo on how to convert from Figma to Power Apps – check out the recording for details!
Check out our next webinar on October 27th, where we will break down the many modules of Microsoft Viva and show you how they can bring transparency, efficiency, and productivity to your workforce.