Skip to main content
L
lucaswang
Participant
December 1, 2019
Answered

Resizing component instances causes states to misalign

  • December 1, 2019
  • 3 replies
  • 5220 views

Can anyone help me? I have a master button component. When I use the instance of that button, I wanted to make the button longer while keeping all the states I made in the master. But, the states started to not be aligned with the default state. When I try to move it back into position, the other states moved equal distance as well. It's so frustrating that I can only edit master components and have all the states be aligned but not do it on instances. 

 

I tried turning responsive resize off when I'm adjusting but it still shows the same results.

This topic has been closed for replies.
Correct answer Rajesh KN

Hi Lucaswang,

 

Thank you for bringing this up. 
You are trying to make changes to a component state and would want to retain the other state properties as that of the master component. If I understood you right, you could double click on the state to enter into its edit mode and you could make the changes to that particular state, This would all you change the property for an instance preserving the property for the rest of the instances.

 

If I understood the issue wrong, feel free to revert. 

 

Regards, 

3 replies

M
mowglivj
Inspiring
February 9, 2023

Component states are flawed from the ground up. FACT

Yet support in this forum keeps pretending that it is not the case. Denial will stop all these issues from ever getting fixed.

 

    B
    bombadillo2
    Known Participant
    July 14, 2020

    I'm having the same problem. My states are now a few pixels off from each other. If I move one state, it moves the other state, which means they're always misaligned. Trying to follow the instructions from the "correct" answer; maybe I'm just not clicked down enough times.

      L
      laineyOdette
      Participant
      December 28, 2020

      Same problem. SO frustrating. I'm trying to create these beautiful prototypes - to post in my portfolio, no less, to showcase my snazzy design skills - and the fact that I can't keep my buttons in the same place in hover state makes me look like a huge idiot who can't design. In one of my designs, I just gave up and turned off the hover states because it just looks so stupid when someone is going through the prototype. Instead, I show what the hover state WOULD look like in the design system, but my interactive prototype is not reflecting the designed component states... which is part of the point of a prototype and quite unfortunate. There can be no actual reason for buttons to be moving around by so many pixels when the default state and hover state have the same text. One of my buttons literally moves 45 PIXELS on the x-axis just on hover. Simply no reason for that.

        ploupip20617219
        ploupip20617219
        Participant
        May 20, 2021

        Figma's new interactive component does just that easy peasy..

        Still in beta but works around all the frustration XD causes.

          Rajesh KN
          Community Manager
          Rajesh KNCommunity ManagerCorrect answer
          Community Manager
          December 2, 2019

          Hi Lucaswang,

           

          Thank you for bringing this up. 
          You are trying to make changes to a component state and would want to retain the other state properties as that of the master component. If I understood you right, you could double click on the state to enter into its edit mode and you could make the changes to that particular state, This would all you change the property for an instance preserving the property for the rest of the instances.

           

          If I understood the issue wrong, feel free to revert. 

           

          Regards, 

          Rajesh KN
            R
            Riley B.
            Participating Frequently
            December 19, 2019

            I believe I am experiencing some of the same inconveniences as described in the original posting, but I believe it extends even further than just the size reflecting the original.
            In this short video I created you can see, similar to the initial post, how a component instance can be difficult to work with.

            https://youtu.be/A2krT3siWcE

             

            Issue 1) If I make an instance of my button to use as an "ok" button instead of the "close" button I have as the master component, as in the video, I have to go in and change the "close" text to "ok" in EVERY state of the component instance.

             

            Issue 2) As discussed in the original post this also applies for shape, color, etc. In no way to do the states of the component instance reflect changes made in the Default state of that components instance. So every time I create an instance of a button and change the size, for example, I have to go in to each and every state and change the size too.

             

            Issue 3) When the master component is updated, sometimes these changes are propogated to the instances, which means I have to go start all over and fix each instance, in each of the states.

             

            So you can imagine that between differences in button text and button sizes, states/component instances are a huge pain to manage.

            Even just having to change the text 2 times (one for default state and one for hover state) every time I make an instance of my buttons is a problem.

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