Giving Power Apps a face lift

Nowadays there are plenty of Power Apps in organizations. Built by both own employees and external consultants. Usually they fit very well on the purpose they are built for.

And yes. Usually they look like… Well, they look like Power Apps.

But it doesn’t have to be like that. Just ask graphical designer to redesign your existing Power Apps.

Example – Hour tracking tool

We built hour tracking solution for our company (Power Apps + Common Data service). It looked like this.

After gently touch of designer, it looked like this. Small changes, but it looks much more professional now.

What designer should know about Power Apps?

There are just few things you should told your designer before she/he starts working with your Power App.

Fonts

Power Apps has only 12 different fonts with four level of weights. Notice that all fonts doesn’t support all weights.

I made cheatsheet about available fonts. It helps you communicate possibilities (or limitations) to designer.

Icons

Power Apps has nice set of ready to use icons. Usually designers uses them own icons instead. But you can use any svg icons in your Power App. Read Jukka’s post about how to do that.

But there are few limitations. You can’t change icons used in out of the box controls. Like dropdowns and date pickers.

Rounded corners

Designers seems to love rounded corners. Unfortunately you can round corners (radius property) only for buttons and text inputs.

So how did I build this header?

It’s button! Everything you see in UI with rounded corners are buttons.

With this information you can easily brief your designer so that she/he doesn’t design something you just can’t build.

This post is shorter version of post (in Finnish) I originally published on my personal blog.

Show me more apps running on Power Platform!

Are you interested in seeing examples of the kinds of apps we’ve built for our customers & ourselves by using Power Apps, Power Automate and Power BI? Check out the Forward Forever App Gallery for ideas and inspiration on what your organization could also achieve with low-code apps.

Browse gallery