Using non-component "Library" elements?

Hey! Long time user and Figma-lover. I am always trying to figure out how far I can push Figma when it comes to organization and have a question.

When creating components that generally include other components, it can be sometimes be hard swapping out a lot of the interior pieces with others when they are locked into a set.

An example of this, let’s say I have a dropdown component, and I have the contents of that dropdown in a list that has 10 entries. Sometimes I want all 10, and sometimes I don’t.
I can either:

  • Create a master component that has 20 entries and then when I pull the component instance into my document, I can delete (hide) the ones I don’t need.
  • Create a component set that has 20 instances of the dropdown- one for each quantity, and then use a dropdown to select how many options I would like.
  • Pull in the component that has just 5 entries, break the component link, and then copy/paste as many rows as I need, since they are all in an auto-layout grid.

That last one is what I would like to focus on, because I feel that it is the best way to simply do what I need it to while having full control over it.

Another example came to mind when I was browsing LinkedIn yesterday and I came across someone sharing an article they had written that showed a large card component, and in the spot where content should be, was a big frame with text that said “Replace this with content” essentially.

That got me thinking, and I was like… that would be amazing if that was an auto-layout frame that I could just drag and drop other components into, such as a text field, image, sliders, etc.

The problem with that is… that you can’t do that when the main component base is a component instance. Basically, I can drag out the card, but then I either have to break the instance and then start pulling in the things I need in there, or try and replace the contents with other components via the drop down menu for component replace/select.

Both of those seem… not ideal.

So onto the actual request here.

Right now, in order for something to be included in the component library, it needs to be a component. Which means, that it is either static, or only has the pre-built options that you can slot into it, and all of that requires a lot of setup work, and a lot of work to try and figure it out.

That or breaking the component, which also isnt ideal.

I was thinking that it would be nice to either have components that are semi-locked, with areas that can accept new components when you drag them into it (like an auto layout list) or possibly just having ‘patterns’ that you can just drag out of the component library that come in already unlinked from the master. This isnt ideal because then they arent hooked up to a master obviously, but that already doesnt happen once you break the link anyway.

My end goal is that I would like to have a card component that I drag out, that can still be linked to a master, but that I am able to drag things into to make it work, similar to how a developer can just add content into the space created for it.

Slots are definitely the way to go

  1. Placeholder Components — Editable components without detaching in Figma - YouTube
  2. Boilerplate Components — Editable components with a default content in Figma - YouTube

With recent changes you can go other way around though. Let’s say a dropdown menu, you can effectively split it into two sub components - an overlay and a menu item. Make as many menu items as you need, wrap them with auto layout frame and place an overlay right behind your items. With absolute positioning you can link overlay size to the frame with your menu items. This way you can produce consistent designs that are connected to a library and super easy to update

Here is an example if you like. I made a dropdown-menu component that can be used both ways. You can detach it and customise items or you can create a separate component that holds your content and swap internals

It is a simple composition principle and you can do the same for pretty much everything now. A card component, for example, can be represented as a card frame, a header, an image, a body and a footer. All these parts can be components so even if you detach a card it would maintain library updates

But these are workaround really :wink: I would agree that dynamic content components would be awesome in every possible way. Being able to define a component and make a frame inside where you can put your content without extra effort so it would act like a regular frame would be amazing thing to have

This topic was automatically closed after 30 days. New replies are no longer allowed.