How to move the layout up when replacing the component

  1. So, we start here:

  2. After clicking on the option, the option of the component to a higher and the component is cut off from below

  3. And I want to get such a result

Hi there,

Thanks for reaching out! From what I gather, you’re looking to achieve a certain effect, and Smart Animate in Figma might just be the solution you need. Smart animate looks for matching layers, recognizes differences, and animates layers between frames in a prototype. There’s a handy tutorial in the guide titled “Smart animate layers between frames” which you can find on the Figma help website:

I hope you will make it, but if you have any further questions or if something isn’t quite clear, please don’t hesitate to reply here. I’m more than happy to assist!


I tried both through smart animate and through component options. In any case, what happens is that the animation is performed, the block changes as it should, but due to the fact that the next block is higher in height than the previous one, the lower part is cut off and you have to move it a little higher with your finger. And I want to make the block move up automatically after the animation, as if snapping to the bottom edge, to eliminate unnecessary action for the user. I recorded a short video to understand how it works. At the end of the video I made a manual upward movement.
Can’t upload video here so this is a link: Dropbox - IMG_5507.MOV - Simplify your life