LAUNCHED: Prototyping | Conditional logic & variables

Please add this! If Figma allowed for real interactive text fields along with conditional logic for their prototyping, then I’d be 100% committed to Figma.

Because it doesn’t I’m having to look at other 3rd party tools and migrate some Figma designs into them for that extra needed UX prototyping functionality.

If Figma wants to stay on top of the game this feature ist a must have, because this is more or less the only reason why you’ve to switch to an competitive application so far. We desperately need this.

3 Likes

I feel like if Figma went Open Source it would become unbeatable. Unfortunately, Adobe…

when do you plan to add conditional logics as features?

1 Like

I disagree… 80 plus connected frames = murder board nightmare for user testing. Making sure all the screens that are supposed to match despite last minute edits from a testing script change? I’m throwing the computer out a window.

Dramatic? Sure. But it’s 2023. For the amount of $$$ Figma costs, it should have some enterprise level features.

I love this thread. I’ve been thinking about logical gates (or nodes) in between the interaction nodes. One particular is a RandomNode which you put on CTA interaction. Sometimes things don’t go well, so it might be worth testing random fails in the prototype. E.g. On Click → Submit order → RandomNode (0.9 weight for success, 0.1 weight for fail) and split this into two frames with those states. Origami Studio, Unreal nodes, Blender nodes, DaVinci nodes. In the end, the basics:

  1. If then else node (with split)
  2. Random output node (with split)

However, this will increase the complexity of the prototype significantly. I already struggle with performance when adding multiple shadows (Smooth Shadow plugin) or background blur effect.

After almost 6 years working with Figma, I’d still love to see some logical nodes to improve realness of my prototypes.

2 Likes

duuuuude… this screams Origami, doesn’t it??? Not to say Origami is the best thing out there (I have my own set of issues with Origami) but on advanced prototyping Origami and ProtoPie is way ahead of Figma

It’s supremely annoying to spend hours on ways to “trick” Figma into doing something that should be possible out of the box. Take nested components and their properties, for instance. I’m currently working on a rail nav that can expand to show labels and accordions for deeper navigation. What I want is simple – IF the rail nav is expanded (top level component) THEN all subcomponent accordions need to be collapsed.

1 Like

let’s see what Figma will show us tomorrow on the webinar :slight_smile:
@shimo yes, Origami was an overkill, used that in the past. Exporting stuff from Sketch to Origami was a nightmare :joy: A simple set of nodes that I can inject between frames/components with some basic logic, that would awesome :slight_smile:

100% need the ability to prototype based on global variables. One frame / component should be able to update a variable that either updates the UI or changes the selected variant of a component.

Just another vote for this feature, conditional logic and variables are ESSENTIAL for prototyping, without them Figma is a mockup tool as far as I’m concerned, same with Adobe XD and other mockup tools.

I tried Axure, it’s conditional logic and variables are pretty decent, but as a design tool it’s terrible. I need to check out Proto.io / JustInMind and UXPin as suggested in this thread to see what they’re like.

But if Figma were to add this in a flexible way, hands down it would be the only tool to use.

+1 still need this for complex prototypes

+1 need the ability to manipulate the variant of a component from a different component.

+1 Unless this becomes a thing usability testing on figma prototypes will be way off because it’s high visual fidelity, but very low interaction fidelity.

2 Likes

So interesting to have condicionals & variables, or something like Principle

It would be useful from a design system building perspective to be able to configure a component in a way that the component elements that should not appear together, would auto-change the visibility (I was also thinking of conditions for text and instance swap, but handling Boolean would be nice for start).

Life example:
I have an input. When this input is empty, I display the text of the label in the box. When the input is focused or there is a value, I display a small label on the top of the input box. Now to switch from one to another state, I have to: 1. Disable the label in the box, 2. Enable the small label, 3. Enable the Value of the box.

I would like to be able to establish a condition - if there is a value in the input, the big label cannot be displayed, and the label can be displayed either on top of the box or inside, not in both places at a time.

1 Like

Oh wow, the new conditional logic & variables are great! I’m hacking it out since yesterday. Any ideas on how to make something random? For e.g. I want to randomly navigate to a screen based on a chance (80/20, 50/50, etc).

Let’s say I have a “Pay now” button, and few screens:

  • Payment confirmation screen
  • Payment error screen
  • Generic error or unsupported case

I want to tell my prototype, that every time when I hit the “Pay now” button, there will be a 70% chance it will go to the success screen, a 20% error, and a 10% generic error.

That would save a lot of duplication for my screens and sections.

Otherwise, do you have any idea how to work with prototypes like this? I tried new Variables and Modes (e.g. I have error mode, success mode, but still experimenting on it)

Cheers,
Greg

1 Like

Random isn’t supported just yet, but I’ll bubble this over to the team! There are some hacks you can do to simulate this, i.e. timers, but none that are great solutions.

2 Likes

And we’ve launched! You can now create multiple actions for triggers as part of our advanced prototyping launch. You can read all about how to leverage variables for conditionals, as well as how to go above and beyond and use them alongside multiple actions.

5 Likes