With the growing popularity of Power Apps, and “Custom Pages (within Model Driven Apps)” we now have, more then ever before, the opportunity to design and build any custom UI we want.
For me, comming from that traditional Dynamics CRM background where we mainly had the “Model Driven App” UI to play with, this is major mindset shift. Yes we can still build custom UI using webresources or PCF controls, but they often take more dev time to build and require a level of maintenance when new releases are pushed by Microsoft.
In this article I am describing my approach for using prototypes when designing custom UI’s for your Dynamics 365 or Power Platform project.
A prototype will help you with the following:
- Gain insights from real users on how they will use a functionality.
- Limit design assumptions. If you can’t decide between a few design options, test a few versions of and see which works best.
- Identify design flaws before it’s too late. Prototypes enable you to fail early and cheaply; they’ll expose a weak or unsuitable approach before you’ve invested too much time or money.
No matter how much time you spend analysing and write specs, many people find it difficult to truly conceptualize something until they have seen it. Prototypes allow you to iterate, refine, rework and make improvements until you have it ready for your dev team to implement.
The Scenario
For a specific scenario, I needed to display a list of records grouped by 2 levels categorization where you could also preview the content of a file by clicking on it.
Before using a specifc prototyping tool, I followed a similar approach to what Hamish Sheild recommended in the following post:
So using my tablet I created the following sketch of the prototype:
Prototyping tools
After having some further discussions my stakeholders, we clarified assumptions and decided to take the prototype to a higher level of fidelity.
To create the prototype, I could use a few different tools: PowerPoint, Diagram.net, Visio, etc. But I was also curious to know what other professionals are using to do the job.
Below is a LinkedIn post I created to ask my collegues in the industry about their favorite tool to prototype custom UIs.
From the abobe poll, it seems that Figma is the tool of choice with almost 50% of the votes. A few other tools were mentionned in the comment like “Canvas Apps Editor”, “Miro” or “Balsamiq”.
Figma also made press recently when Microsoft released the Express Design for PowerApps.
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.
Learn at Microsoft
Using Figma to help with the layout design.
Figma is one of the most popular UI design tool available on the market. Figma let you create Frames, shape layers, text layers, smart guides, add icons, etc, and will let you quickly mock up static designs and wireframes.
You can take a look at the design file I created for our scenario. (Clicking on the image will take you directly to my design file)
Using Figma to show a working prototype.
The Prototype feature in Figma provides you the ability to easily create transitions between frames. You can use a variaty of action like on-click, on-drag, on-hover, and delay, you can transition to a new frame, switch component variants, open/swap/close overlays, go back, ‘scroll to’, and open links.
Figma’s simple prototyping feature eliminates the need for another tool that does slideshow style prototyping.
See below how I could share the prototype using a link or an embed code to be used in an iFrame.
Please let me know in the comment section below how you create your prototypes. Do you use other tools? And if yes why.
And if you use Figma, feel free to share the use case you used it for.