8 Steps To Building Your Own Report a Repair App Using Microsoft Express Design

Transforming Figma Designs into Functional Power Apps: A Step-By-Step Walkthrough

Meet RepairAce — your pre-packaged solution to simplify housing repair management, designed to be as user-friendly as baking a cake — available to the Figma community.

⚡ Tl;dr

• The blog post guides you on how to convert this design, created using Microsoft’s ‘Express Design’, into a functional Microsoft Power App.
• ‘RepairAce’ is a customizable app design developed to streamline housing repair needs, making app creation as simple as following a recipe.

🍰 Make me a cake as fast as you can

Ever thought of creating your own app? Most people shy away from this idea, thinking it’s too complex or requires specialist skills. But what if it was as simple as following a recipe? What if you could start with a ready-made design, add your own touches, and whip up an app as easily as baking a cake?

Understanding the struggles and needs of landlords, property managers, housing associations, and facilities management services, I’ve created ‘RepairAce’ using Microsoft Express Design. ‘RepairAce’ is a ready-to-use app design that caters specifically to housing repair needs. It’s like a pre-packaged cake mix — it’s got all the elements you need, and all you have to do is bring it to life!

With ‘RepairAce’, you’re not starting from a blank canvas. You’re starting with a user-friendly design made in Figma that you can quickly and easily turn into your own Power App. It’s as easy as pie and can be done in less than 5 minutes.

So, let’s get started! In this post, I’ll guide you step-by-step on how you can bring ‘RepairAce’ to life in your own Power Apps Studio!

App Development Simplified: Just like how you can enjoy a slice of cake, you can enjoy the process of creating your own app by customising ‘RepairAce’. It’s as easy as baking a cake with a ready-to-use mix!

🎨 Express Design

So lets start with how this is possible. Building on the idea of creating apps from designs or templates that I shared in a previous post, ‘Express Design: Create your First Microsoft Power App from an Image’. I now bring you Microsoft’s next Express Design method, Figma UI Kit to Power Apps.

You can use the Microsoft Power Apps — Create Apps from Figma UI Kit (Preview) to design your own app. This kit lets you use Figma to design your app and then turn that design into a working app with Microsoft Power Apps. It comes with a set of helpful components, a sample app, and clear instructions on how to use it all.

The ability to turn Figma designs into apps makes the whole process of creating an app quicker and easier. It encourages collaboration between the business stakeholders, the designers and the developers, leading to better apps with less effort and cost. To see this in action, check out this tutorial video.

🔧 Creating ‘RepairAce’: A Personal Journey

My experience in the public sector and housing industry exposed me to many challenges that housing professionals face, particularly in repair management. I saw the need for an efficient, user-friendly tool to bridge the gap between these challenges and practical solutions. This led me to create ‘RepairAce’ – an accessible and adaptable design kit freely available to the Figma community. And the best part? Achieving this doesn’t have to be expensive or technically challenging. ‘RepairAce’ proves it’s closer and more affordable than you might think. Through tools like Figma and Power Apps I aim to foster a community where everyone reaps the benefits of technological innovation.

👷‍♀️ Inside ‘RepairAce’

RepairAce’ provides you with a ready to use – Report a repair app experience – 9 screen designs, each created to meet the needs of landlords, housing associations, local authorities, property management companies, facilities management services, and real estate investment trusts. Remember that you’ll need to do a bit more work in Power Apps after converting the design, like connecting the components to data and making any necessary adjustments.

👩‍🎨 How Does ‘RepairAce’ Help?

‘RepairAce’ comes with a ready-to-use design that makes the whole process easier and more streamlined. It’s all about refining and improving rather than starting from scratch. With ‘RepairAce,’ you’re setting out on your app development journey with a working template that you can build on.

The RepairAce sample app is perfect for anyone who is comfortable using Figma for design and wants an easier way to turn that design into a Power Apps application. If you’re part of the housing industry and using Microsoft Power Apps looking for simple solution for reporting repairs, this kit is for you.

📱 What screens are Included in?

‘RepairAce’ has 9 screens, all designed to make the repair reporting process easier:

1. Home Screen: Lets users report a new repair.
2. Location Lookup Screen: Includes a postcode search and address lookup to accurately find the repair location. Requires connecting to your property data.
3. Emergency Options Screen: Provides a list of emergency repair options.
4. Room Selection Screen: Users can select the room needing repair.
5. Common Issue Identification Screen: Provides a list of common issues for quick selection by users.
6. Detailed Description Screen: Users can describe the issue in detail.
7. Visual Evidence Screen: Allows users to upload photos or videos of the issue. Requires connecting to a store such as OneDrive or SharePoint to upload files to.
8. User Contact Information Screen: Allows users to provide their contact details for easy communication.
9. Repair Submission Screen: Provides a place to provide the repair case reference and outlines the next steps in the process.

These screens are designed to make the journey from reporting a repair to getting it resolved as user-friendly as possible with the RepairAce app.

💡 8 steps to add RepairAce to your own Power Apps Studio

Adding RepairAce to your own Power Platform environment is straightforward, you will just need a figma account.

1. Sign in to Power Apps: Visit the Power Apps platform and log in with your credentials.
2. Select Figma under ‘Start from’: Look for the ‘Start from’ section and choose Figma from the options.
3. Enter an App Name: Name your app. For this example, we’re using ‘Repair Ace.’
4. Enter the Figma File URL for ‘Repair Ace’: You will need the ‘Repair Ace’ Figma file URL. Open the Figma file and click on the RepairAce app and then copy that URL into PowerApps.
5. Enter your Figma Personal Access Token: You need a Figma account for this step. Enter your Personal Access Token to authorize the integration.
6. Create Your App: Click on ‘Create.’ Your new ‘Repair Ace’ app will start to materialize.
7. Customize Your App: Your new app will open in Power Apps Studio, where you can continue to build and customize your app. Extend the functionality of this app by connecting to data, adding app logic, and creating additional screens and controls as necessary.
8. Save, Publish, and Share Your App: When you’re happy with your customizations, hit ‘Save,’ then ‘Publish.’ Now, you’re ready to share your brand new ‘Repair Ace’ app!

If you need more information on how to do this read: Create a canvas app from Figma.

🟢 Start using ‘RepairAce’ today

Ready to explore ‘RepairAce’ and see how it can transform your repair management process? The complete ‘RepairAce’ design kit is available for you in the Figma community.

👉 Simply visit this link and begin your journey towards creating a powerful, user-friendly, and efficient repair reporting app.

Give Express Design a try and share your experiences in the comments below!

Want more content like this?

Let me know in the comments below if you want to read more content like this and I’d love to hear how your projects are going.