Modular content block within a component instance?

Question

Hi there!
I am trying to create an accordion component made out of various variants representing each accordion row.
These accordion row items are used as instances for another accordion group component made out of 10 accordion item instances:

With auto layout and variants it is possible to customize state, and hierarchy of all these accordions easily.
HOWEVER, when an accordion is expanded/open, the content shown should be modular and can really be anything. It’s not something which can be restricted by a component (nor is it simple text, it can be images and checkboxes or other things as well).
Is it even possible to keep this system while allowing users of the design system to add content they need without detaching the components. I assume there is not so I am also curious what your recommendations are.
Thanks in advance!
Now the content section within the accordion can be any kind of content one want

Shane · Accepted Answer

Yes, there is a technique to pull this off - placeholder or slot components. We use it all the time throughout our design system. The best tutorial/description I know of is here: Placeholder Components — Editable components without detaching in Figma - YouTube

If you want to have default content available, but still let people put in their own content, you can extend the technique like this:

Boilerplate Components — Editable components with a default content in Figma

ElioQoshi · Answer

@Shane Thanks so much! This is indeed what I was looking for. After 4 years of Figma usage I learned something new: You can replace instances of an external component with an instance of a local component. So we can have a placeholder embedded in the design system, yet the content is a component which lives in the actual design file which fetches the external design system. That didn’t occur to me, for whatever reason I assumed you cannot swap instances from different component libraries.

Modular content block within a component instance?

3 replies

Solved topics

Request of a refund

Problem about autolayout

Drop shadow is applied, as if the background was not removed.

Export freeze

Monitoring memory usage on a file after fixing performance issues

Cookie policy

Cookie settings

Related topics

LAUNCHED - Text Line Height Variables Scopingicon

Are hidden layers less expensive in instances VS regular frames?icon

Solved topics

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded

Cookie policy

Cookie settings