How do I make this component responsive in auto layout?

Hey Alyssa, this Figma tutorial will help you out! Please let me know if you’ve further questions.

@Gayani_S where is the link to the tutorial? I’m also having trouble duct taping designs onto my components. In particular, there are backgrounds and decorators that need to be part of a component, yet not invade it. Kin of like the Z-Index in CSS.

Hey @Michael_Staton! Apologies, this is the Figma tutorial I forgot to link: https://www.youtube.com/watch?v=PNJxeD29ZTg&list=PLXDU_eVOJTx55HFubfbTL3ellJjBM2QE2.

At a second glance, I think working with Absolute position might be a good solution. As you said you’ve mentioned that you’re having trouble duct taping designs onto your components.

“Absolute position excludes an object from an auto layout flow while keeping it in the auto layout frame. The object and its surrounding siblings ignore each other, even as they resize and move.
”

Please let me know if this works for you. Alternatively you could share a copy of your file and I can take a look at it.

Thanks,
Gayani

Honestly, that doesn’t solve the problem. I know how to do that.

The only solve for this is bewildering, confusing, and infinitely time consuming. Basically, you have to be HYPERVIGILANT as to whether or not your component itself is in a Frame or Autolayout state. If it’s in a Frame state, things resize or don’t resize correctly due to “constraints”. But if it’s in an autolayout state, which most of my components are because nested object states as Autolayout behaves better… But if I want anything to scale as I resize (which is pretty much all the time, right?) I have to go back in and make it a Frame. Once I make it a Frame, things resize or do not resize appropriately, but the Autolayout magic disappears. This forces me to make like 8 different variants of the same component, when all I want is the 1 component I have to behave properly.

Apologies that my solution is not helpful! I understand the frustration. I’ve shared your feedback internally to investigate further. If I get a good workaround or any tips from the team, I will update you!