Resizing component instances causes states to misalign

New Here ,
Dec 01, 2019 Dec 01, 2019

Copy link to clipboard

Copied

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.Screen Shot 2019-12-01 at 4.38.29 AM.pngScreen Shot 2019-12-01 at 4.38.35 AM.png

TOPICS
Error, How to, Product issue

Views

1.9K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Employee , Dec 01, 2019 Dec 01, 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.  Reg...

Likes

Translate

Translate
Adobe Employee ,
Dec 01, 2019 Dec 01, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 19, 2019 Dec 19, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 14, 2020 Jul 14, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 27, 2020 Dec 27, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 20, 2021 May 20, 2021

Copy link to clipboard

Copied

LATEST

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

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines