Skip to main content
F
fwiefgwieugfiwgrf
Participating Frequently
October 31, 2022
Answered

How to take state bounds into account when combining stacks and transitions ?

  • October 31, 2022
  • 2 replies
  • 612 views

Hello,

 

I have 5 components that I have arranged in a horizontal stack.

I have a toggle state for those components which changes the widths of the component (the toggle state is wider than the default state).

In prototype mode, the stack does not adapt to the new width of my toggled components, even though the stack does adapt to the new width when modifying the state manually on the artboard itself.

 

I would like to find a way to achieve the desired result without having to go through the toggled/not-toggled states myself (5 components is 32 states...)

 

Any way to do what I'm after ?

      Correct answer Spas K.

      Hey there. Unfortunately, stacks only shift elements while designing, and don't dynamically work while previewing the prototype. You have already discovered this yourself. This means you will have to create an all-possible-cases component, where you switch the state in each scenario, which is indeed a lot of work.

       

      If you can post some screenshots or send them via PM, I can try and suggest something you could do to avoid it, depending on what the purpose is. But there isn't a way to do it easily right now, sadly.

      2 replies

      Spas K.
      Community Expert
      Spas K.Community ExpertCorrect answer
      Community Expert
      November 7, 2022

      Hey there. Unfortunately, stacks only shift elements while designing, and don't dynamically work while previewing the prototype. You have already discovered this yourself. This means you will have to create an all-possible-cases component, where you switch the state in each scenario, which is indeed a lot of work.

       

      If you can post some screenshots or send them via PM, I can try and suggest something you could do to avoid it, depending on what the purpose is. But there isn't a way to do it easily right now, sadly.

      F
      fwiefgwieugfiwgrfAuthor
      Participating Frequently
      November 7, 2022

      Allright thank you that is clear.

      I will have a think and reach out if I need help. Thks for offering.

      HARSHIKA_VERMA
      Community Manager
      HARSHIKA_VERMACommunity Manager
      Community Manager
      November 3, 2022

      Hi @fwiefgwieugfiwgrf,

       

      Thank you for reaching out, and sorry for the trouble. Would you mind confirming if you're trying to achieve this workflow: https://xd.adobe.com/view/af743b9a-d573-4d56-8fba-8e3199bf392a-fa27/?

       

      Let me know if I misunderstood your question. Please share the screenshot of your workflow for better understanding.

       

      We will try our best to help.

       

      Thanks,

      Harshika

      F
      fwiefgwieugfiwgrfAuthor
      Participating Frequently
      November 4, 2022

      Thank you for your help.

      This is indeed what I am after but your rectangles should be horizontally stacked so that when you click on one of them the other ones have to move.

        HARSHIKA_VERMA
        Community Manager
        HARSHIKA_VERMACommunity Manager
        Community Manager
        November 4, 2022

        Thanks for the confirmation, @fwiefgwieugfiwgrf. The rectangles are stacked horizontally in this design. Please check this file: https://we.tl/t-q2mAYm3Goc.

         

        Let me know if that helps.

         

        Thanks,

        Harshika

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices