Figma is all the rage in UX design these days with good reason. There are many things that Figma does undeniably well. For starters, its collaboration and intuitive UX is a seamless (and fun) experience. If you have a project that needs mockups or a prototype with simple navigation without multiple states, Figma is arguably the best tool for the job.
However, if you are tasked with creating a complex, non-linear experience with logic or need to create a near-production prototype without code, Axure RP beats Figma all day.
In a previous role I demonstrated a completely overhauled checkout experience for the CEO. About halfway through the experience, he paused when my boss mentioned in passing that he was witnessing a prototype. He asked, surprisingly, “wait, this isn’t live?”
In retrospect, it’s no surprise that he thought the demo was in a live test environment considering how responsive the experience was with inputs, logic, dynamic states, non-linear navigation — it seemed like the real thing.
The prototype was designed in Axure RP 8.
As an Experience Designer for Slalom Consulting, we regularly use Sketch, InVision, Axure RP, and Figma based on the project and client need. Understanding when to employ each is an important decision that can save you time, headaches, and deliver the results needed for the intended outcome.
My team and I recently collaborated on a project using Figma. This was a giant conceptual prototype that included a custom CRM among other enterprise products. Figma was a breeze to collaborate on information architecture and page designs. Then, we got to the part where we test out interactions during prototyping. Cue the violins.
Then, we got to the part where we test out interactions during prototyping. Cue the violins.
After spending thirty minutes or so with my team, our cursors whizzing across frames, flipping in and out of prototype mode, the problem was abundantly clear: Figma doesn’t allow multiple dynamic states for multiple components simultaneously.
The Figma Attempt
We intended to have a segmented controller for the content in one frame that respects multiple states across other components on the page. This means one could navigate through a sub-menu while changing the states of other items below it. The only way to do this is to “fake it” with overlays. If you have just one series of similarly-sized components (i.e. — the tabbed content or the series of circles below) you can do this no problem by swapping the overlays with the subsequent (‘two’ and ‘three’) circles, and closing the overlays when you click ‘one’. Interact with the example here.
Multiple states across two component sets on the same page ain’t happenin’ in Figma
As you can see in the example above, the problem is that Figma won’t let you control multiple overlays simultaneously. It is mutually exclusive. This means we had to create separate pages for the various tabs and use overlays for the other dynamic content below for the users to accomplish their task in the user testing plan. What happens when you have three sets of dynamically-controlled content on a page? Replicate a host of every possible page combination?
No — you fire up Axure RP.
Axure RP 8 Shows How It’s Done
Axure RP can render multiple dynamic content and component states simultaneously with little setup
What we’re seeing in the example above is Axure RP’s ability to allow the full gamut of potential combinations of content all contained in one page. There’s no duplication of effort and you get an experience that is as close to production that you’re going to get.
This is possible by using dynamic panels for the tabbed content and “widget” (Axure’s standard sets of shapes and UI) states for the circles. Additionally, you can see the hover states that turn the tabs and circles light gray, and the selected states that make the font style bold. Interact with the example here.
1. Build your panel states to show whatever content you like
2. Build simple logic to set the content to match the selected tab
Using Dynamic Panels for the Tabbed Content
Dynamic panels are essentially content containers where you can create events or “cases” and call upon the panels with certain triggers, such as clicking a button (the tabs, in this case).
Understanding and using dynamic panels are key to delivering nested dynamic content such as content in menus, scrolling containers, and segmented controllers (tabs).
You can even set dependencies, but that’s for another discussion.
Axure allows you to easily set multiple styles for a given interaction (such as changing color upon hover)
Select Interaction Styles for Tabs & Circles
What this means for the circles is that you’re creating one circle widget with multiple styles like fill and border colors, font styles, size, among many other possibilities.
You can also set their respective trigger interactions or actions such as page load, mouse over, swipes, drags/drops, input focus, and more.
Setting interaction styles by standard states can be accomplished without setting cases or events. You can set default states and by triggered event if you like.
Axure RP is a true rapid prototyping tool
This design process with Axure RP is more aligned with designing for code in that you’re building components, states, and logic that behave as you would expect in production.
When testing a high-fidelity prototype with actual users, a close parity to the real-world experience ensures your test results won’t be muddied with the limitations of the design tool used or worse — force you to redesign your approach to fit the limitations of the tool.
Everyone has their favorites
Sure, I picked on Figma in this article, but similar limitations are present in Sketch, the dominant design platform permeated across many enterprise UX teams. Considering the vast library and resources available for Figma and Sketch, it is possible to account for many of these shortcomings. Yet, it may be more effort than you’re willing to invest in time and/or money to research, acquire, and learn these plugins and workflows.
Axure RP is the most complete out-of-the-box prototyping tool on the market, notwithstanding it’s deep support, community, and resources.
Parting thoughts and considerations
The landscape of UX tools are constantly improving at a rapid pace. Choosing favorites is fun, but it’s no hill to die on. I think back to when Adobe XD was first released. It was a nice experience, but fairly limited functionality. Today, it features tools that respect a modern UX practice on par with Figma and Framer. That being said, I would absolutely love to see more logic-based functionality and dynamic states in any of these tools and would happily welcome the needed additions.
Case in point: it was brought to my attention prior to publishing this article that a plugin was recently created for importing Figma frames into Axure. This is an ideal workflow for creating architecture and pages, then having Axure work its interactive magic. Figma and Axure fans — rejoice!
Axure RP is wonderful, but it is not free (outside of a 30-day trial). This is in contrast to both Figma and Framer that have free, individual, and team licenses at less monthly cost. Definitely try before you buy.
There is a slight learning curve. Many — if not most — UX designers I know are intimidated by the deep versatility and features offered by Axure that are absent from the pervasive set of Sketch, InVision, and Figma. Fear not! You can use Axure just as you use Sketch or Figma with its standard UX toolset. However, the more you put into it, the more Axure will deliver for you.
Learning and using dynamic panels, states, cases, and conditions will make people regard you as a wizard.
There are no substitutes for good design practices. Axure, Figma, or any other tool can’t account for sound customer/user research, collaboration and alignment with both stakeholders and end users. Agnostic of any tool(s) you end up using, your experience design will only be as good as your approach. For further reading on what a good approach to design looks like check out Dana Moran’s piece on how to “Build Better Products and Avoid Costly Mistakes”.
C.J. Toscano is an Experience Designer with Slalom Charlotte who has led transformational efforts for organizations across multiple industries with a focus on omnichannel experiences. He also enjoys cycling and delivering a mean slice at the ping-pong table.
Examples + Downloads
More on Axure RP
- “Why isn’t Axure RP more popular in UX design!?” by Yichen He
- “Tips to make your wireframes look like the final product using Axure RP” by Marc Oliver
- “How to implement Google Analytics to Axure RP 9 prototype” by Mike Acler
- “Axure RP 8 Tip — Check all inputs in form” by Martin Dymáček
Original post you can find here: https://uxdesign.cc/the-logical-choice-for-dynamic-and-complex-prototypes-3e669a21eef4
