Advanced prototyping problem

Hi Figma community!

I have this advance button interaction that opens an overlay for the user to go into another UI flow. but I wanted the button to go back to its “incomplete” state (Orange badge) when the overlay is closed and not to go into the “complete” state (Green badge).

here’s what I did using conditional prototyping (I’m still new to this):

If Click (boolean)

open overlay
change to = Complete

else

[empty]

here is the video I made regarding the problem I faced:

Just to verify, you want the user to open a modal window (overlay) to do a task and if that task is completed you want to show the “completed” badge. But if the user closes the modal window before completing the task, you want the task to still show the “incomplete” badge, right?

What you can do is have the badges that display the state of the task in a component called “TaskState”. The component has 2 variants: “State: Complete” and “State: Incomplete”

On the instance of TaskState, assign a String variable (For ex. “TaskState”) to the variant state.

The Variables icon shows up when you hover over the space after the variant name:
image

It should end up looking like this:
image

When the user opens the modal, you don’t want to change the state right away, so when the user completes the task, on the final button, add the following:

On click
Set variable “Taskstate” to “Complete”
Close Overlay

Screenshot 2024-07-12 at 09.16.38

(You can have more than one interaction on an action like “OnClick”, use the + button on the top right of the Interactions pane to add another interaction, it won’t work properly if you have two "OnClick"s)

You have several tasks in your list, so I would set up variables for each one of them:

  • TaskAccountCreation
  • TaskVerifyInfo
  • TaskVerifyID
  • TaskAddPayment

This way you can also hide the whole tasklist with a conditional:

Create a boolean variable for ShowTaskList and assign it to the layer
(This is a little hidden: Right-click the eye icon for the layer. And you need to have at least one boolean variable in your Local Variables for the popover to show up)

Add an Conditional interaction to the final button that you have on each task (The one that has the interaction to set the task to completed)

If TaskAccountCreation == “Completed” AND TaskVerifyInfo == “Completed” AND TaskVerifyID == “Completed” AND TaskAddPayment == “Completed”
Set Variable ShowTaskList to False

Else
Set Variable ShowTaskList to True

This way you could also show/hide a banner on a different page (Just assign the exact same boolean), or you can have a conditional interaction on a button that opens a popup that tells the user to complete the tasks before they can use the site.

2 Likes

Thanks! I’ll be trying this soon and let you know whats up. :smiling_face_with_three_hearts:

Edit: why can’t I use variables on variants?
the variants had incomplete and complete states.

can I invite you to my project file?
if you don’t mind if you have spare time.

You can. In order to manipulate variants with variables you need to assign a String variable to the variant of the instance.

The Variable and the Variant Name need to match exactly. If the name of the variant is “Incomplete”, the String variable needs to have the value of “Incomplete”.

Sure, message me through my profile here? I’d rather not put my e-mail in a forum. :slight_smile:

1 Like

here is my project I’ll allow you to edit once you’re there

1 Like

are you in the file yet? I saw a person named @chukwudi in my file

nhalfi hi-fi yea i got to open it to check out your work but it required some access from the owner

You’re not @Bauke_Schildt, get out.

sorry about that

@Bauke_Schildt

This is not cool. You came here asking for help, posted the link to your file (which is public), and now you want to be rude?

Be a better human.

I only allow one person i know that wanted to help.
if the dude just wants to mess my Design system by spamming me with edit permissions.

then out.

That is not the attitude to bring to a forum.