Embracing the Power of Visual Design: A Deep Dive into Microsoft Power Apps' Express Design

[Shadrack_Kiprotich]

What is Express Design?

Microsoft Power Apps introduced Express Design exciting features that allow anyone with an app idea to turn it into a functional app that can be used. With Express Design you can take a design sketch or what is referred to as App wireframes and convert it into an app. Those wireframes or app ideas can be jotted down on paper, PDFs, Word documents, or tools like Figma.

This sounds intriguing, right? In this blog, we will be looking into the new world of Express Design with Microsoft Power Apps. We will see how you can draw an app on paper and convert it to a full application in Power Apps

If you are new to Power Platform. Power Platform is a suite of applications that enables individuals and organizations to easily build custom apps, automate workflows, analyze data for insights, rapidly design, configure, and publish modern websites, and build intelligent bots. Learn more here: Power Platform 

Our focus here is Power Apps. Power Apps is a component of the Microsoft Power Platform which is a low-code or no-code platform. It empowers developers and non-developers to create custom applications to enhance their business processes using custom and prebuilt components.  

Express Design in Action

With Express Design, you can convert a visual into a working application in a few minutes. Below are the steps to take to achieve this

• Hand drawn sketches
• Figma design files 
• PDFs and paper forms

The AI feature in Express Design helps in creating applications. 

Hand drawn sketches

Sometimes while you work, you get struck by a random app idea. You grab a piece of paper and a pen and start sketching how the app might look like, creating all the layouts, buttons and components that your app might look like. With the rise of Express Design you can now convert this into a fully working application moving from just an idea on a paper sketch to an app.

Below are the steps on how to achieve this

1. Drawing your app idea - All you need is a paper and a pen!

   This will be the first step, where you will draw the app idea that you have in mind. This process is called wireframing, which involves defining your application's layout and adding app components. This involves the creation of the user interface of the app.

   Here is what you need to know when drawing your sketch:

   • Use neat hand-drawn designs.
   • Use a white paper/background.
   • Use a 1-page form or screen for your application.
   • When drawing an application that uses forms do not use complex form

   

2. Take a photo of the app drawn on paper 

   For this step ensure that you take a clear picture of your app idea on paper. Here are the prerequisites of this step;

   
   
   • It should not be more than 4 MB.
   • Ensure that you also have the right file extension for your application preferably a .png and .jpeg extension.
   • Upload it to your computer.
     
     

3. Navigating to Power Apps 

   Go to powerapps.microsoft.com , sign in using your Microsoft 365 account, and ensure that you have a valid license for Power Apps. If you don't have a Power Apps license you can explore the M365 license https://developer.microsoft.com/microsoft-365/dev-program 

   

   
   
   Navigate to Start app from Design and select An Image or Figma file
   
   

   

4. Upload your image to Power Apps Studio 

   For this step, we will follow 5 sub-steps.

   • You will name your application as highlighted in Step 1
   • For step 2 and step 3, upload the app sketch you had drawn on paper. We have an option of using sample images from the application.
   • Choose the format of your application on step 4 whether it is a tablet screen orientation or phone
   • Click on Next to continue

   

5. Tag Components 

   In every application, we have components that make up the application. Once you have uploaded the application, The AI-powered Express Design will be able to detect the app components available in your application. For example, text labels, buttons, date picker

   At times we need to tag some components that your application might skip.

   

6. Setting up data 

   Power Apps offers more than 100 range of data sources that you can be able to use to store your data. For the data sources that are not available in Power Apps, you can be able to build or use the 1100+ data connectors in Power Apps

   Learn more about data connectors at https://learn.microsoft.com/connectors/

   For this step, you can be able to choose the option of using Dataverse as a source of storage or skipping this step and setting it up later

   

7. Customizing your application

   For this step we have our application ready, what we just need to do is adjust and do more customizations to it. This includes adding images, and app colors, redesigning fonts, and adjusting forms.

   

8. Test and publish your application 

   Once you are satisfied with your application you can now share your application with other users. Before sharing ensure that you have published the application

 

Conclusion

In this blog, we've explored the fascinating world of Microsoft Power Apps' Express Design, a groundbreaking tool that effortlessly transforms creative ideas into fully functional applications, accessible to both tech enthusiasts and those who just got started in tech. We've seen how this tool breaks down the barriers to app development, whether you're sketching on paper, working with PDFs, or using advanced design tools like Figma. Express Design has been portrayed as the superhero of app creators, ensuring inclusivity and promising a future where digital creativity shines for everyone. The blog has also emphasized how this tool simplifies app creation, likening it to sketching on a canvas. So, get ready to unleash your creativity and watch your ideas come to life in today's ever-evolving digital landscape with Express Design.

Want to learn more about express design here are some articles. 

1. Learn More about Power Platform Express Design Express design is a new way to quickly get started with Power Apps by instantly transforming your visual design into an app. With Express design, makers can quickly turn existing design artifacts—including paper forms, whiteboard sketches, or Figma files—directly into a working app
2. Join Power Platform HackTogether 14th Sept - 28th Sept HackTogether is your playground for experimenting with the new Copilot and AI features in the Power Platform. With mentorship from Microsoft experts and access to the latest tech, you will learn how to build solutions in Power Platform by leveraging AI. The possibilities are endless for what you can create... plus you can submit your hack for a chance to win exciting prizes! 

2. Join the Power Platform User Group where you will get to learn more about Power Platform, and how you can use these tools to empower yourself and your organization 

3. Microsoft for Start-ups Founders Hub Get your start-up idea off the ground with some free Azure credits and advice from the Founders Hub team. As your idea grows, take advantage of even more resources.

4.  Azure for Students Get free Azure cloud credits and access to essential cloud products that are free for students!

5. Microsoft Learn Student Ambassadors Support your community to learn more and build your leadership skills by becoming an ambassador!

6. GitHub Student Developer Pack Get all the free GitHub resources for students, including GitHub Copilot, extra Codespaces quota, and learning resources. Check out this blog if you need help getting signed up.

7. Imagine Cup Don’t forget to sign up for Imagine Cup to start solving problems and the chance to win $100,000 and mentorship from Microsoft CEO Satya Nadella!