I am trying to create a detailed view of a list of items.
Imagine I have a list of names, and I want to click on the name and to move to a frame that shows me a picture of the person, along with name and age, for instance.
I don’t want to create a different frame for every person on the list, but rather populate the “detailed view frame” with data from a DB. Any thoughts on how to do that?
Thank you!
Best answer by AlicePackard
Hey @Boechat, this sounds like something that could be accomplished using variable-powered prototype interactions. Are you on a paid Figma plan? You’ll need to be to take advantage of prototyping with variables.
If so, here’s how I’d imagine setting that up: for every piece of data you want to flip between (your examples of “name” and “age”) with each click, you’ll want a string variable.
Additionally, you may want a boolean variable to handle “open” and “closed” states of the detailed panel.
Then you’ll need to set up an “on click” event for each item in the list that not only reveals the detailed view, but populates various text layers with the correct information.
Let me know if this sounds like it would achieve what you described. I’m away from my laptop rn but if you’d like I could try and mock this up or send some screenshots if that’d help.
Hey @Boechat, this sounds like something that could be accomplished using variable-powered prototype interactions. Are you on a paid Figma plan? You’ll need to be to take advantage of prototyping with variables.
If so, here’s how I’d imagine setting that up: for every piece of data you want to flip between (your examples of “name” and “age”) with each click, you’ll want a string variable.
Additionally, you may want a boolean variable to handle “open” and “closed” states of the detailed panel.
Then you’ll need to set up an “on click” event for each item in the list that not only reveals the detailed view, but populates various text layers with the correct information.
Let me know if this sounds like it would achieve what you described. I’m away from my laptop rn but if you’d like I could try and mock this up or send some screenshots if that’d help.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.