“Predefined components” in Figma
Use “predefined” components in a Figma component sticker sheet to speed up product designers’ work while making the generic components easy to maintain.
With Figma’s latest release in auto-layout, I am sure many people, myself included, are tempted to build components “like a pro” so that they are responsive, flexible, and cover every single use case. Maybe you can even get everything to work and match the developer’s API table perfectly.
But now you ended up with this crazy mad layer hierarchy.
You created a component that only you understand how it works. Your users — in this case, other designers — know nothing about how these layers toggle on and off. In the end, your beautiful work got “detach-instance’d”, torn apart, and had the child layers floating around.
So, why not just let them detach instance?
We ended up making a “predefined” category, with the intention of encouraging designers to drag complex component instances into their designs and immediately detach-instance.
This brings three benefits:
1. Designers spend less time configuring your component to do exactly what they want.
When facing complicated components with tricky auto-layout structures, designers, especially new designers who do not have the same degree of Figma expertise as you, will have to spend a long time understanding layer hierarchies before they can start designing.
2. More “official” designs floating around.
We noticed many designers like copy and paste designs from existing projects, and modify the file from there. This is essentially forming a design system outside the “official” component sticker sheet. This can be potentially bad if bad designs start circulating around in this fashion.
But instead of simply “banning” these, the best way is to support them officially. Add more varieties to the predefined components and allow people to “shop” for one that really suits their need.
3. Components show up better in the Figma asset search
The components will be less generic and easier to select from the search results. It will be more obvious for designers unfamiliar with the design system which component to choose.
