First : autolayout icon and date naming it payrhs, then autolayout company name with payrhs then name it “Header“

autolayout each of the content (rows)

Select all autolayouted rows and autolayout them in one

Can group card and rename it to Collapse

select Collapse card and create component and rename component to Accordion

Add new property from top right click on “Add Property +“ button

Can Create new Variant

Rename Property1 name to” Open”

Can rename Default to open=false

In variant bottom can view + Icon Add Variant button

Click on + button and add new variant and rename variant2 to“open=true”

name the variant components - False and True

select open=false component and hide Collapse content

Delete open=false Container and autolayout open=false card

Then add fill color in autolayout

Can select open=false component and add autolayout

then select variant accordion and add autolayout

and make interactions

• Transitions

  • Header frame of True component → Header frame of False component

• Interaction Details

  • on click

  • change to

  • open (toggle ON)

• Animation

  • instant

and make another interaction

• Transitions

  • Header frame of False component → Header frame of True component

• Interaction Details

  • on click

  • change to

  • open (toggle OFF)

• Animation

  • instant

select new frame named “FRAME“ and autolayout the frame in vertical direction

select a accordion from assets into FRAME