Skip to main content

Several of my app’s pages share the same elements (nav bar, sidebar, etc.). I have of course created a component for each of these elements, but in order to keep their relative positioning consistent, and to make future changes easier to implement, I’d like to factor out an entire page into a component.


Is this a best practice? I assume it would be a common pattern, but it makes it awkward to customize page content, since I now have to create a new component for the contents of each page, and swap those in.

No, I won’t advise you to do this. Keep your screens as regular frames.


Who are you and why is this your recommendation? I’d like better replies on this forum other than “No”


I’m just a dumb jobless person giving free advice on the internet. 🙂


This is unnecessarily restrictive in my opinion. Too much rigidity, too much dependency, too little benefit. The only benefit I see is that you can’t accidentally move something. But once you want to change something (other than position), for example replace or remove an object, you need to battle with some overrides possibly being reset in a cascade, which is much more difficult to troubleshoot and fix.


Redundancy is another problem with this approach. As mentioned in the first post, you need to create a component for every different piece of layout. Therefore if you have a unique combination of content on every screen (you can’t achieve much with pure swapping, right?), you will create a copy of it, and would have to modify it separately outside the screen. Not only this is inconvenient (rigidity again), this also negatively affects the performance.


That said, you may of course wrap everything into components, especially if you work alone or in a small very proficient team and know how components work inside and out, and use plugins like Master. The more complex the components, the less forgiving they are to accidents (and bugs 🐛).


This is not generally considered a best practice. At least not yet, since Figma doesn’t even have such concepts as Slots, which would probably improve the situation with redundancy at the very least.


At Config last year me and other Figma wizards showed some pro tips and hacks, among which there was a workaround for slots shown by @Mr.Biscuit, that basically allows you to turn everything into a component. But this is just a demo of what’s possible, not a call to action. This adds more work (because it becomes such a rigid system) without any benefits other than looking cool. 😎


Hope this is better than “No”.