Skip to main content

I’m fairly new to Figma and I’m not sure how to even search this to find answers, I’m trying to prototype a desktop website. I want a horizontal list of cards that when you click on them, more information shows below them. I am trying to make it like an accordion type card where the information is hidden in the default component and shown in the variant component.

Screen Shot 2023-07-23 at 7.41.07 PM


EDIT: “new users can only put one media” Im going to comment the rest of the images


the first image shows how they’re all in a line, the second is a successful pop out. the third image shows how step 2 is not sitting right within the frame/auto layout. the 4th and 5th images are my wip components. Does this make sense? Does anyone know how to have the step 2 sit in line with the rest of the cards and have the information pop out below?

Screen Shot 2023-07-23 at 7.41.21 PM

Screen Shot 2023-07-23 at 7.41.29 PM

Screen Shot 2023-07-23 at 7.42.47 PM

Screen Shot 2023-07-23 at 7.43.10 PM

Hi @Natalie_Myers,


Auto layout and absolute position might not be the best way to resolve your problem : Going that way, you will need to specify every gap between your cards and the left side of the page. If you ever change the page width, padding or such you will have to define those gap again. This is you doing the heavy lifting instead of Figma.

image



An easier solution would be having 3 components :



  1. Card component,

  2. Information component,

  3. Card + Information component


image


The information component


One variant = one description. (In your case you should have 5)



The card + information component


The card + information is built has a vertical auto layout with two main space:



  1. the first one is an horizontal auto layout of card instance,

  2. the second one is an instance of the component: information

    image


(for this component to be responsive, nested instances and auto-layout frame have to be their width set to fill)


It has only 1 property, allowing it to changes the information displayed (as shown below)

image


This way the information panel will always use the same space and be left-aligned.


Let me know if it helped!

Thank you so much that worked perfectly !!

Reply


Terms & ConditionsCookie settings