Skip to main content
Solved

Resizing properties logic using Placeholders

malta

Hi community! Hope you all are doing ok.

Does anybody know what is Figma’s logic when changing a Placeholder with a component?

Context: I have a Card component variant set which a few of these variants have a Placeholder auto layout to enable users to replace with whatever they want.

image

But as I try to change it with a different component it overrides its resizing properties and does not carry the component properties:

image

In this example, my Button has Hug - Hug property but this is not being reflected since my Placeholder has Fill - Fill. The weird thing is that this doesn’t happen with all components.

Can anyone help me with this? Maybe I am missing something… 😬

Best answer by Nate_G

@malta When I’ve built out Placeholders/Slots, one thing I found as key is using auto layout for the main component and any elements I will be swapping in (all using hug x hug).

→ Get Example File

image

View original
Ivy_Yu
Carla_Medeiros
PoopivichPlus
3 people like this
  • Ivy_Yu
    Ivy_Yu
  • Carla_Medeiros
    Carla_Medeiros
  • PoopivichPlus
    PoopivichPlus

6 replies

Nate_G
  • Nate_G
  • Power Member
  • 180 replies
  • Answer
  • October 26, 2023

@malta When I’ve built out Placeholders/Slots, one thing I found as key is using auto layout for the main component and any elements I will be swapping in (all using hug x hug).

→ Get Example File

image

Nate G
malta
1 person likes this
  • malta
    malta
malta
  • malta
  • Author
  • 6 replies
  • October 27, 2023

Hey, Nate! Thank you so much for your help. I really appreciate how you organized the file to answer my question. Amazing! ❤️

Do you know if there is any way to have that behavior using Fixed x Fixed properties? I would like only the placeholder to carry the component properties and the card to remain the same size.

Nate_G
  • Nate_G
  • Power Member
  • 180 replies
  • October 27, 2023

@malta So you want the card to always remain the same size (width & height), but then swap in content that “Fills” the placeholder area?

Nate G
malta
  • malta
  • Author
  • 6 replies
  • October 27, 2023

Yes but with the content preserving its “original” properties. Currently, when I try to replace it, it’s carrying the placeholder properties, not the component.

Does it make sense? I know it might sound confusing 😵‍💫

Nate_G
  • Nate_G
  • Power Member
  • 180 replies
  • October 27, 2023

In that case, you don’t need auto layout applied to your card.

image

Nate G
C
malta
2 people like this
  • C
    Caio_Melo
  • malta
    malta
malta
  • malta
  • Author
  • 6 replies
  • October 27, 2023

Got it! In this case I think the best option is leaving the Placeholder without auto layout.

I was thinking it would be better to usage applying an auto layout but it seems that it works better without.

Thank you so much, Nate!

Nate_G
1 person likes this
  • Nate_G
    Nate_G

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings