Figma Support Forum

Variable Content Containers for Components (Replace/Reorder Layers in components)

The Problem

In figma, it is currently not possible to persist certain compository styles without having to think of all the possible use cases before and putting them in there, or to provide a component just so that it can be used as a reference, a starting point. The reason for this is that once a layer is in a component, it cannot be replaced, removed, multiplied or reordered. This makes sense, but limits what a component can do.

Examples

  • Buttons that are capable of showing any icon.

    • The Icon can only be replaced by a different icon of the same size or the same parent component (icon/*). Meaning, that all icons that are available need to be thought of before. This breaks the components capabilities, because it all of a sudden needs to be aware of the icons it can display.
  • Text-Content

    • Content that consists of a variable structure of headlines, paragraphs, lists, quotes, etc. Designing a Template for a view that will receive content from, for example, a CMS is impossible as a component, because we cannot reorder or add individual layers in component instances.

Possible Solution

  1. Let us define variable content containers in components, that can receive any other layer in an instance. This way, we can author components with variable content in mind but still retain the ability to lock certain constants.
  2. Let us reorder layers in component instances that exist in an auto-layout context.
1 Like

Being able to reorder layers within a component (perhaps within certain restrictions, such as only within designated autolayout containers) would open up a host of useful possibilities.

I have this problem too, typically when icons do not fit a square. One trick I am making is to have several options embedded with auto layout frame. Then I can show/hide the one I need without creating a separate variant of the same component. But it is very tedious to maintain and easy to break.

However I do not see how you propose these “define variable container” will work. The issue right now is that at some place there is an instance with fixed width and hight (and constraints). And it is logical that it preserves its fixed size up the hierarchy.

Hi @Constantine_Zuev! You can try to do it like in my example file:

Or if you want, send a link to your file for me to see.

@tank666 thanks a lot for this tip! It seems like the core here is to wrap all icons in Auto Layout frame and set as variants. My only problem with your sample file: I cannot recreate it in Figma :sweat_smile: How did you manage to create a frame of zero size (w=0,h=0)? (one that holds a text)

Icon components don’t need to be combined into variants. You need to add Auto Layout to the component with “Hug content” settings, and set the icon layer (eg vector) to “Fixed width” and “Fixed height”.

To create a frame with zero height and/or width, just write .001 in the appropriate fields.

1 Like