LAUNCHED: Prototyping | Conditional logic & variables

Agreed. Until Figma can at least allow for complex conditionals (arguments IF, THEN, ELSE), and Local and Global Variables it really isn’t a serious prototyping tool, just a little better than Invision. Fortunately, Axure allows for importing of Figma, Sketch and Adobe XD now, so you can still design freely with Figma and for heavy interaction-design simulation (with conditionals) rely on Axure until someone can produce production-quality code-generation in prototypes from design tools one day… No, Anima plug in isn’t production level code generation… its psuedo code at its best.

Oh gosh I really need this…

Yes, definitely it would be a huge help in prototyping

Yep… It’s a cool feature of Axure, but Axure is clunky, slow, and not much fun to use(I find myself constantly frustrated by it)… If XD or Figma get’s this functionality they could easily corner the market.

Because of lack of conditional logic a lot of designers using Axure for complex scenarios. I build html/css/js prototypes for this. This approach gives more flexibility than Axure.
But allowing conditional logic right in Figma would be real lifesaver for designers.

Framer has conditional prototyping?

How about Event dependent from Starting Point?

If I try to express like below situation, I can not add two onClick events, so I have to make some wrapper frame or something in Prototype.

Login Button ->onClick -> Error Dialog
                       -> Success Dialog

In this case, the new Starting point also can not handle it. Event dependent from Starting point is a passably good option, maybe?

For Example, in the below case, I can have multiple onClick but dependent on the Starting point.

Success Starting Point ->             -> onClick -> Error Dialog
                          Login Button
Error Starting Point   ->             -> onClick -> Success Dialog

Please I need this. I am managing a monster prototype and things have gone out of hand with me having to create so many frames variants and I am forced to consider to use applications like Framer because we lack this core ability.

yes

Really really want this feature… Other logic needs:

• Group selection (only allow one item in a group to be in a selected state)

• Control of any/all states onPageLoad

• OnScroll event variables e.g. if scrollY greater than 200 etc.

• Set state of other component/frame based on state of another component/frame; If componentNNN state=Selected then show componentYYY

Basically Axure lite.

Another use case is that sometimes the same process should generate a different result depending on the chronological order of the actions. For example, a button that adds a row to a table: the first time I click it, it should take me to the screen with one row, the second time to a screen with two rows, and so on. Now I have to either create 3 different buttons that direct the prototype to the corresponding screen or create one button with 3 interactions that work with different triggers (for example, using my keyboard I can press 1, 2, and 3), but that is not the way a prototype that is supposed to mirror the actual experience should work.

+1 this would be very helpful and saves a few duplicate screens to imitate a simple 2 radiobutton selection for example (which if you want to show it, currently requires 3 screens/frames)

Yes please!

Dear Figma Team,

I’ve been a really good kid this year.
For this year’s Createmas present, I wish for this…

Love,
Figma Users

Yes Please!!!

Hey people, give a check on UXPin and JustInMind.
Variables, conditional logic and much more.

Running into the same issue. The new ‘change to’ feature is great – but It’s cut off at the knees by not being able to use conditional logic. I’m still forced to make numerous screens just to show different paths. i.e. If field correct, click goes to A, if field incorrect then show error message modal.

Hi, I’m having a couple of scenarios where conditionals would help greatly. I have a Gamified “to do list” kind of app. It’s in Spanish.

Scenario 1: I have to toggle a Rate component to property from “filled=false” to true before the Done button can be pressed. Tipically, I’ll have to set a Clic interaction where it navigates to a copy of the fram but with the Rate with “filled=true” and with the Done button now with a Navigate interaction.
See scenario1.png file

Scenario 2: On My Achievements screen (Mis Logros in Spanish). Two achievements are pending.
Only after I follow the whole process of the prototype I earn both badges, that is, when I click on Done on the final screen, I should return to Home screen, where there’s a Mis Logros button. If I hit it now, I should see both badges marked as complete.
Tipically, I’ll have to create a copy of the Home and My Achievements screens with both badges toggled as complete.
Sorry I can’t upload a second image on a post. I’ll see if I can do it in a reply

I refer as global conditionals when a property change in the instance on one frame affects the instance in another frame. Local in case the change is on instances on the same frame.

That would save many frames and make the whole thing smoother. I saw a similar request where if clicked on Dark Mode button, all components would show the Dark Mode = true property.

¿What do you think? Would that be helpful?

This is the second scenario. where I can see two achievements pending. A few screens later, when I completed a day, I receive both achievemnts. If I go back into the Achievements screen, I could see them active. I’ll have to create copies of the screen in order to do it, of course.

We all need this!

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

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.

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.