Skip to main content

Hi all,


I’m new to Figma and so far it’s a fantastic tool full of beautiful unexpected surprise tool, plugins and more.


But I’m a bit pooped on this one.


I’m trying to make a button for the redesign of my company’s website and I want the hover state of the component I created to scale up when hovered, and the “On click” state to be smaller.


The issue I have is that the scaling always starts from the upper left corner when I preview the prototype. I want it to scale from the center.


I saw a closed discussion that said that you need to expand or reduce the size of the shape (Button) and not the component container which makes sense.


But I can’t figure out how to do this, am I missing something?


When I try to resize I’m only able to grab the container and not the object itself, in the layers panel I can only see the text. I tried using the scale tool thinking it might grab the shape and not the container with no success.


Screenshot 2024-05-13 at 3.31.41 PM


Thank you,

Hi @Decobec, Thank you for reaching out about your design! I tried to locate the post you mentioned but couldn’t quite pinpoint it.


Based on your explanation, it sounds like you are working on an interactive component with variants of different sizes.


I did some testing on my side, and noticed that when you place that instance directly, it seems to scale from the upper left corner, just as you mentioned.


While this might not align directly what you are looking for, as a workaround, I placed that instance in an Auto layout frame and applied constraints to that frame to scale from the center. You can try if it’s applicable for your design.



You can find more details here: Explore auto layout properties - A note on constraints

​​

I hope this provides insights a bit! Plese let us know if I misunderstood anything.

If anyone from our community has additional insights or workarounds, please feel free to jump in!


Thanks again for reaching out.

Hey @Junko3 you are a lifesaver !!!


It worked just fine for me, I know the dev will probably have to code this himself insteand of putting a container inside a container but for my prototype design purposes it works just fine.


Again thank you very much.


This community is awesome!

Reply


Terms & ConditionsCookie settings