Hi everyone! As I’m new to Figma, I’m currently exploring the prototype behavior and there is one thing that i want to do on my lofi wireframe.
I have this lists of buttons, and upon clicking on the button i wanted the paragraph to change on its designated position.
for example, the current description displayed is Car interior Detailing. If i click Post Construction Cleaning, it would replace the description on the box its corresponding value.
Would greatly appreciate your help on referencing me on how to do this, its overwhelming to see lots of topics and tutorials but I cant seem to find the functionality that i needed.
Convert the Content (Car Interior Detailing) frame to a Component.
Create Variants of the Content - Car, Post, Deep
Switch the variants on click by assigning Variable (varContent) to the Variant Name.
Hi Vishal,
Thanks for the response… I was able to create component and variants. For this activity, i tried to make it simple by using colored rectangles for A, B, C:
if link A is clicked, the rectangle will show Red, if link B then purple, and link C for gray.
I’m trying to follow your screenshot but on your 2nd screenshot wherein the property 1 is set to varContent, i cannot find how to create a variable (varContent) when i created an instance or my component.
Am I missing something from creating a component?
You need to create Local Variable.
Don’t select anything on Artboard, on right pane you will get option to create variable.
OR
When you hover on Property of your Variant, you will get an icon
which you can click to create and/or assign the variable.
Create a String variable, name it anything like varContent, Value should be exactly the property name of your Variant, “A Display” in your case.
Now on Click event of Link A, set the variable to ‘A Display’, Link B to ‘B Display’ and so on…
Hi Vishal!
With your guidance, i was able to achieve the output I needed! Thanks a ton for your help!
Sharing my solution to everyone that will view this topic, i did the following steps.
these are the variables i have created:
i created components and variants with Property value as “A Display”, “B Display”, “C Display”
On my frame, i have 3 text that will serve as the Links and created instance for Rectangles and Statements with property value as varContent
and then on interaction, i did the following:
Glad I could help. Please do mark the question resolved!