As the field of UX design continues to evolve, so do the design tools. In recent years, we've seen a growing number of UX designers switching from Axure RP to other platforms. While still a powerful tool, its high cost and complex interface are being trumped by more accessible and user-friendly options like Figma. Figma's cloud-based and collaborative approach to design has proven to be a game-changer for many design teams. By allowing them to quickly iterate on designs and receive feedback in real-time, the design tool has taken over the market.
However, it's also true that the transitioning from Axure to Figma may not be completely seamless. If you're a UX designer having experience with both tools, you might have noticed there is some Axure prototyping functionality you miss despite your love for Figma.
Of course, we're talking about such advanced prototyping features as working inputs, variables, conditional interactions and importing data. Let's now look into each of these features one-by-one.
P.S. Jump to the end of the article if you want to learn how weave.ly can help you prototype with all those missing Axure features without leaving Figma.
4 core Axure prototyping features Figma is missing
Conditional Interactions
Conditional interactions (also called conditional logic) allow designers to program the prototype to respond differently based on user actions. Using conditional logic you can specify the behaviour of an interactive element in response to user input. For instance, a button on a prototype could be programmed to show or hide additional information based on whether the user has clicked it or not.
This functionality is undoubtedly essential for advanced prototyping. It allows you to implement advanced interactions like predictive search or filtering data, while also being an integral part of the forms building. For example, for the majority of customised forms in-field labels require conditional logic.
Unfortunately, at the moment Figma does not support conditional interactions. For Axure RP, on the other hand, that's one of the core functionalities. You can add conditional logic to certain widgets by choosing from pre-built common conditions. Furthermore, you can also build your own custom conditions. This enables prototype flows which can dynamically be determined based on user’s response.
Variables
Variables allow you to remember data entered or choices selected by users. Using variables you can store and display information like text, images, status (logged in/out) across pages in your prototype. You can take any kind of user input, like a name entered in an input field, and show that same name in a different element on a different screen.
In Axure, variables can be used to store and manipulate data throughout a prototype. You can create so-called global variables to pass information between pages. Use them to control various aspects of the prototype, such as the visibility of widgets, the text of labels, or the values of input fields.
The best thing about Axure's global variables is that they support dynamic capturing of user input from widgets like text fields or drop lists and transfer this input across screens. Basically, variable support is one of the primary features for building dynamic prototypes.
Let's see what Figma has to offer. Figma does provide certain support for variables. Yet, they are primarily used for design purposes rather than prototyping. Figma's variables allow you to create global styles and reuse them throughout the design. For example, colours or fonts. This surely is useful for maintaining consistency of the design and speeding up the process overall. Still, Figma does not have built-in support for using variables in prototyping, which all comes down to the lacking feature of live user input. Therefore, the tool is not suitable for creating complex interactions based on user input.
So, the conclusion we can make is that Axure's variable system is specifically focused on prototyping and creating dynamic interactions. In contrast, Figma's variable system is purely focused on the UI aspect.
Working Inputs - Live User Input
Prototyping with live data provides a more realistic representation of the final product as it enables test users to interact with the prototype in real-time by adding live working inputs. First of all, it delivers a higher degree of personalisation to the users. And most importantly, user testing with live data substantially increases the validity of the test.
Read our blog post about live-data prototyping if you want to learn more about the topic.
In Axure, you can create custom forms and input fields that allow live user interaction. In addition, you can add complex conditional logic to your prototypes. Live user input in combination with conditional interactions make a prototype look realistic and functional. And of course, the real-time data collected from users is stored thanks to the variables that we discussed in a previous section.
Despite the ability to create input fields in Figma, there is no way users can interact with them in real time. As live user input is not available, the prototype built in Figma is substantially less complex compared to the one created in Axure.
Importing Data
Importing data is another aspect where Figma's functionality is slightly inferior to Axure RP's.
In Axure importing data in a prototype is implemented through the Repeater widget. Axure lets you copy data from external spreadsheets like Microsoft Excel and Google Sheets and paste it as a table widget. Dataset cells in repeater can also contain images and links. For instance, you can choose any desired image file through browsing your computer.
Figma's importing data functionality is more limited than Axure's, but it does allow you to import external data sources into your designs using plugins like Content Reel for text or Unsplash for images. This can be handful for creating prototypes with more realistic content than just Lorem Ipsum.
So, why just not use Axure RP?
If Axure RP is clearly a superior prototyping tool to Figma, why just not keep using it?
Well, Axure is undoubtedly a powerful prototyping tool, but it has a steep learning curve and can be quite complex. Although Figma is mostly suitable for basic prototyping, many would agree it is one of the best, easiest in use and most advanced design tools. Thanks to its cloud-based collaboration and great UI features, Figma managed to capture nearly 70% of the design market. Therefore, if you design in Figma, (and there is a high chance you do) and want to use Axure for prototyping, you will need to import your designs. The major downside is that as the design evolves, the project will exist in two separate ecosystems - Figma and Axure.
It might not seem an obstacle at the first sight, but based on the feedback we get from UX designers, it does lead to slower and less efficient workflows. As a result, many design teams prefer to stick with Figma for both design and prototyping. So here comes a sacrifice - ease of collaboration is often chosen over conditional logic and live data in prototypes.
Overall, Axure is an advanced prototyping tool that focuses solely on creating interactive prototypes, while Figma allows designers to create simple prototypes with a final user interface. Ideally, you would want to keep your design process in Figma and build Axure-like prototypes in the same environment. Is it possible though?
Best of both worlds - weave.ly
For some projects, basic Figma functionality might fully suffice your prototyping needs. However, it's not always the case. For example, if a project requires the use of live data and involves complex user flows and interactions.
Hence, we've come up with a solution. Weave.ly is an advanced prototyping tool which is also a plugin for Figma. This means that you can forget about importing your designs to any third-party platforms! Once your design changes, your prototype in weave.ly updates automatically.
Basically, the weave.ly plugin is an extension to Figma and its prototyping capabilities. Let's see how the plugin can help you with the features we discussed in the previous sections.
weave.ly prototyping features
Building conditions is a common feature for weave.ly. Using the plugin, you can link interaction flows from one screen to another based on a specific interaction that you got from your user.
This as well shows that weave.ly allows working inputs. Users can interact with the prototype in real time and fill out the data in the input fields. The data, in turn, will be stored with the help of variables.
Weave.ly's variable system in Figma works similarly to Axure's, allowing you to use variables to control various aspects of the prototype. Similarly to Axure, you can use variables in conjunction with conditional logic to create complex interactions.
Importing real data to your prototypes is another basic feature for weave.ly. It's simply the matter of indicating which frame will contain the data. Afterwards, you can import data directly from a CSV file, as weave.ly has its own spreadsheet system.
So, if you're tired of bouncing back and forth between Axure and Figma, why not give weave.ly a try? By prototyping with the weave.ly plugin, designers can easily switch between design and prototyping without having to switch between different tools or import/export files. So much easier and faster!
