Skip to main content

Hi Everyone,


I am currently working on a project which involves creating a questionnaire where multiple child questions should change its variant based on the interaction of the parent question. When click on a button on the parent question, the component variant should change its state not only for the parent itself but also for its associated child questions.


For this, I’ve created four variants of a question component: a visible parent, a hidden parent, a visible child, and a hidden child. The idea is that when I click ‘hide’ on the parent question, all child question variants should change to their hidden states, and vice versa.

However, I am encountering difficulties in achieving this. For some reason, the interactions within the component connecting the variants are not working as expected. I am unable to control the variant change of all child questions. They should not be hidden outright, but rather should just change their state to ‘hidden’.


Another issue I am facing is that I can’t seem to add an interaction between instances of the same component when I have interactions setup within a component and its variants.

Lastly, I am struggling to identify how to setup and use variables to change the state (variant) of all component instances inside the frame, when click on only one instance. I understand that this might be key to resolving the problem, but I am not sure how to go about it.


I hope you can provide some guidance on these issues. I appreciate any help you can provide.


Here is a link to a recording for more clarity:



Here is a link to the file:

Figma – 4 Oct 23

Best,


Susanne

Hi, Susanne.


Before we start, I want you to arrange the layers properly and make sure the layer names are correct or else this is not going to work (because we are going to preserve overrides).

image


If you checked the image the layer names are the same for both the variants, also, I made only 2 of variants since both of them have the same design


And, please take note that this is only available for professional up licenses.





  1. Create a component with Hidden variant (because they have the same layout and properties, i only did 2 variants).

    image


    A lot of people have been using yes/no logics on their component properties as a unique string when you can just set it with true or false like this.




  2. Create variables for each question

    Yes. You have to create variables for each question or else it’s going to be connected in multiple parts. (You can only create 1 variable for all only if you are going to have 1 question per page, so it means you can navigate to another page and just reset the variable again)

    image

    In your case, I create a parent variable and 3 child variables for QN-1




  3. Create the layout and change the texts

    I just followed your layout and changed the texts for each instances.

    image


    Take note: you have to change the text of the hidden and not hidden variants of the instance




  4. Insert their respective variables inside each instance

    image


    Parent instance should have the parent variable and so on




  5. Do the prototype using conditional event

    Using the conditional event, set the variables of each instances with the parent variable as the defining value for the condition like this:

    image


    as you can see, since the initial value of the boolean variable Parent == false, i set all the qn-1 variables to true and then on the else I set them back to false so it can switch between hidden and not hidden




Here is a demo of a prototype:



If you have questions, please just reply back.


Hi Raphael, first of all: THANK YOU. I am so grateful that you are doing this. Thank you for your time.


Now, I have a question to point 1. Create a component with Hidden variant

Your demo looks right. But can you clarify how a variable can be set to hidden inside the component? I am aware that layers can be set to hidden, but haven’t figured out how to set variables to hidden. Also, I do understand that I can give a variable to each question and then show/hide them on click. But its not clear how that plays into the component and its hidden variables.


Screenshot 2024-02-15 at 3.46.28 PM


Here is what it looks like in my variant settings


Thank you for clarifying this. Thats where I stuck for now. There may be more follow up questions… 🙂


Thank you!

Susanne

Hi, Susanne.


Name it as Hidden or Visible, then the values for each item is false and true, with true being the hidden one.


image

Reply


Terms & ConditionsCookie settings