Skip to main content
Solved

Changing paragraph based on button click

Nikki_B

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.

image

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. 😩

Best answer by Nikki_B

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:

image

i created components and variants with Property value as “A Display”, “B Display”, “C Display”
image

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

image

and then on interaction, i did the following:
image

View original
This topic has been closed for comments

Vishal_Ramawat

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.

image

image

image

Nikki_B

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:
image

if link A is clicked, the rectangle will show Red, if link B then purple, and link C for gray.

image

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.

image

Am I missing something from creating a component?

Vishal_Ramawat

You need to create Local Variable.
Don’t select anything on Artboard, on right pane you will get option to create variable.

image

image

OR

When you hover on Property of your Variant, you will get an icon
image which you can click to create and/or assign the variable.

image

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…

Nikki_B

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:

image

i created components and variants with Property value as “A Display”, “B Display”, “C Display”
image

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

image

and then on interaction, i did the following:
image

Vishal_Ramawat

Glad I could help. Please do mark the question resolved!

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings