Figma Question
Hi, I'm new to Figma. One thing that has been bothering me is that it seems there's no built-in way to slot in components inside other components.
For example, I'm building this search bar + search suggestions component. With the way I have it set up right now, I can have one search suggestion inside the search suggestions container, but if I want to add more, I have to add it inside the master component, or detach the component instance.
Another thing I wanted to do was build a page layout component to keep a consistent 20px left/right padding on all my pages. But again, I can't insert content inside instances of the layout component. I don't know, is it a bad idea to try to add padding this way in the first place?
2 Replies
Hello, yes for the first point it is true and it annoyed me also a lot! There are two common workarounds to this.
One is to create a longer list if you expect to have cases where you want to show more suggestions and other less, and hide them by default in the component and show them when needed in the instances. You can even link the toggle of their appearance to a property, so you might have a property that is suggestions, with values 1 suggestion, 2 suggestions etc. This might work ok for simple cases, however you always have a bunch of hidden layers in the components that you don't need, and the moment you need more suggestions, or have a bit of a different thing to show in the suggestions, you might still need to tweak the main component.
A different approach that remains more flexible is to use placeholder components. You have a variant of you component that include a placeholder, that you can swap with any other components easily. Then you can also create local components on the go (adding a . in front of the name so that they are not published) with the exact layout you need for the that specific case. Here is a video that explain the idea better --> https://www.youtube.com/watch?v=gS-MvibsunE
The Fun of Iterating
YouTube
Placeholder Components — Editable components without detaching in F...
💡 Be sure to check out a follow-up bonus episode on Placeholder Component's younger cousin: a Boilerplate Component — https://youtu.be/kVZw-97tklA
Figma Community File — https://www.figma.com/community/file/963783690783191844/%231-Placeholder-Components-%E2%80%94-The-Joy-of-Iterating-with-Figma
Twitter — https://twitter.com/AdamPrzewoski
Edita...
For the second point, the page layout component wouldn't really work because, as you said, you would not be able to place anything inside it without detaching. it is not necessary bad to always detached it tho. You can still have it as a component to document that that is the intended padding, and to have it available between different pages as a quick way to have a frame of the screen size you want with the padding you want already set up. Of course if you ever want to change the padding you will need to manually select all the pages and change it there.