Skip to main content

Curious what yall’s workflow looks like in regards to building page content against some kind of reusable layout component/layer.


Currently, I’ve been trying to build “Contentless Layout” components (ie, everything except the page specific content), maybe one for mobile and one for desktop, and then duplicating/instancing them for each specific page mock. The layout might just be empty rectangles/groups/auto layouts that represent things like “header” or “nav menu” or “page content”.


When building “page content” that falls into the larger layout, I can’t add children to component instances (can I?) so I end up with the “contentless layout component” as a sibling layer to the “page content” and then doing some dance of locking layers or opacity or whatever else to get a visual feel for how my page content is going to look lined up on the layout.


Feels like I’m doing something wrong, any tips assuming I haven’t lost everyone in the description?


Ty for reading 🙏

If I follow you correctly, it sounds like the layout components you’re describing would benefit from using slots (“slots” is the pop up at term but i prefer to call these “placeholders”).



When building “page content” that falls into the larger layout, I can’t add children to component instances (can I?)



Yes!! you can! If you use placeholders. Figma lets you swap any instance with any other instance. So instead of using rectangles to visually chunk out various page layouts, make a placeholder component (this can be a simple frame with a background fill) and use instances of that where you’re using the rectangles. Then when you have content components you can swap out the placeholders for those.


I wrote a longer blog post about placeholders if you’re interested. There’s a few pitfalls to watch out for, especially when working with things like the page layout components you’re describing. The main thing I’d caution you against is to not fall into the trap of thinking 1 slot can only be swapped for 1 content component. Eg if you have a “blog homepage” layout and a placeholder for “blog posts” you don’t need 1 slot for every blog post. You can componentize a group of 5 blog posts and swap in that “5 blog post” component for a single slot.


I hope this helps you out!

Reply


Terms & ConditionsCookie settings