Prototyping | Conditional logic & variables

We all need this!

2 Likes

I just installed JustInMind. Let’s see if I can export my Figma work :smiley:

When prototyping, we have the interaction panel to add input events. I’d like to be able to utilize a list of global variables that I can access in this panel, in order to create logic based events.

Example prototype with 3 frames:

  1. “enter a password”
  2. “success screen”
  3. “wrong password” notification screen

The button in frame 1) links to frame 2)

In that connector, I want to highlight it, then see a “global variables” section in the property panel where I can add a custom global variable and give it a value. Example: variable name: “password” with value: “hello”.

In the interaction panel, I want to see a section where I can choose a variable=value selection to act as a condition check, allowing me to send the flow to different frames, like this:

[On Click v]

if [select variable v] [ select condition. v] [hello] go to [Frame 3 v]

I would choose from those drop downs and make this:
if [password v] [ = v] [hello] go to [Frame 3 v]

This would tremendously improve prototypes without requiring a ton of additional feature work. Just a simple list of global access variable declarations that can be used in flow logic alongside the usual event settings.

2 Likes

I kind of have checked all (yeah probably not all but at least most of viable/not-full-of-bug/ok-for-actual-dev-environment prototyping tools) and I agree with @Charles_S - neither of them really, REALLY enables actual conditional logic in prototyping…

yes. YES. this is exactly what I want.
p.s. correct me if I’m wrong but why do I feel like I’ve seen global variables in Axure

Yes to conditional logic.
Yes to global variables.
But just keep it simple.

Did you check JustinMind and UXPin? It have conditional logic and much other features relatetd to variables (if / than / else / string/ number/ global…)

1 Like

Hi! I looked into them but not much. I need to spend more time on them…

I am receiving some job offers, and what has surprised me is that both requested Axure and investigating the platform and I could not understand why they worked with that tool because at first glance it seems a platform only for wireframe or that looks complicated to prototype in high resolution.

But doing a little more research, I saw something that surprised me: prototyping programming.

image

I imagine Figma and we could start exploring all this potential.

  • “If the input text is “piano”, then switch to variant 2 of the submit component.”
  • “If you click on an icon it takes you to this page but shows a modal, if you click on another, it takes you to the same page (we avoid repeating it) and shows you another modal.”
2 Likes

This is seriously needed. I’m torn between continuing to use Axure and moving everything to Figma. The design experience of Axure sucks; yet the prototyping is just so powerful. Figma’s already grown so much, and if the team were to take this on this software would become a cut beyond the rest.

3 Likes

I also did that but I could not import the Figma files into justinmind at all. It seems Justinmind is a very outdated app.

1 Like

If Figma needs resources to get the top 10 highest voted community features done faster, we (the community) would be happy to help. Figure out how much would it cost to hire extra resources, then create a crowdfunding campaign. I would be totally happy to chip in $100 just to get such important features done by end of the year.

4 Likes

I recently have been thinking about the logistics of advanced prototyping, and the unfortunate divide between design apps and prototyping apps. I came here to make a post about expanding Figma into the advanced prototyping territory and found this one.

Design apps are very product design forward which I like, and also afford some prototyping, and prototyping apps continue to add features to afford straight-up design processes as well. But, you don’t really see a lot of folks talking about UXPin or Axure as their primary design tool. Coming from Sketch a few years ago (and having used XD for one project because I had to), while obviously not perfect Figma is just smarter and imho better with its conventions and methods and I think justified in why it is the conversation in product design tools.

I’ve been using ProtoPie for the past two years for advanced prototyping, and with its formulas, variables, conditional logic, functions, etc, we can build almost anything. Although its interaction model is great, it definitely needs work. Before that I tried UXPin, Justinmind, Proto[.]io, and Framer (that one’s over-reliant on React but if you’re working on a product team with your devs and a React code base then maybe that makes sense).

BUT, I’ve been thinking that it is just bonkers to need two tools to accomplish this kind of output. The notion (and reality) of managing two sets of assets in an iterative process is just wrong (not to mention lack of parity of features upon import). I kept thinking that doing even half of what we’re doing in ProtoPie within Figma makes a lot more sense. So yes, conditions, variables, scroll events, detecting state or value change… please let’s move in that direction. I, for one, would love to completely ditch using another tool and I think we’d all agree.

3 Likes

As many others here I’ve been looking at “complementary” tools for Figma, to get a “real” prototyping toolset.

I only started using Figma about a year ago, and it’s not until recently that I’ve started evaluating moving all my development UI/UX and prototyping needs over to Figma 100%.

However, as most have pointed out… Figma is great and awesome for the design process… now it needs to focus on more robust (“real”) prototyping, with states, conditions, basic elements e.g. input fields like text, password etc, dropdown etc.

As @jerimy_brown said: “If […] Figma get’s this functionality they could easily corner the market.” :ok_hand:

One hundred percent! If the Figma team can shift focus to creating better and more advanced prototyping (to better reflect real world scenarios, without X number of extra screens, overlays and other “hacks”), then I don’t see anything stopping Figma from dominating as the go to tool for both designers and developers :raised_hands:

3 Likes

Agree completely with this

Hey, one way to do awesome conditionals, is to use ProtoPie (https://protopie.io). It has had full support for conditionals, along with a lot of different event triggers (e.g. page load and exit) for years. In addition, its prototypes can use smartphone sensors to trigger actions. I’ve built a couple of Augmented Reality prototypes in ProtoPie - you just connect the tilt/acceleration sensor so it scrolls your layers, and you can pretty much duplicate Pokemon Go. ProtoPie is used a lot for game prototyping for this reason, as well as automotive UX/UI design - you can connect the prototype to actual hardware, even robot boards.

ProtoPie has OK Figma imports - not as good as one would wish. But if you have to do interaction, it blows Axure out of the water.

1 Like

Also, you can do string comparisons. So it is possible to create a real password login test, where users type in a password, and it has to be a specific password.

1 Like

The last Figma update had some really nice “must haves”, e.g. individual border control, better auto layout and absolute positioning (still missing grid here though :wink: ) etc… But now it’s time for some more robust prototyping :100: :raised_hands: :partying_face:

Thanks again to the Figma team for all the great work so far! :star_struck:

2 Likes

For me,

  1. having one component interaction able to trigger other component changes dynamically
  2. screen entry and exit triggers
  3. Delays and loops in components

Would get to 90% of what I need. Smartphone sensor support, and some 3D support (e.g. WebXR) would be 100%.