Skip to main content

Allow users to toggle a setting for components to allow freely adding/rearranging nested contents instead of relying on the ‘slot component’ workaround or nesting a dozen possible UI elements with boolean toggle ‘Hide/Show’ variants.


This would be especially helpful for container/sheet/section components that really only need to define radius/border/spacing/padding.


Screenshot 2024-10-23 at 5.12.34 PM (1)

Related:


This is huge.


Many times, design system designers want to be able to canonify the “chrome” (i.e.: framing / outer) of a component, widget, section etc, but the content should be flexible, beyond the ability to edit properties / customize text and/or colours.


Use cases:



  • a repeater component with a consistent header, border, background and effect, but where the inner content of that component can be variable: simple (text), complex (a table or multi-column layout), graphical, etc.

  • a dialog box chrome that defines the title, close button, scrollbars, frame, background, bottom button bar etc, but where the contents of the dialog should be unique per dialog

  • a table component comprised of multiple column/cell components, where the designer wants to define the table frame, background, effects, header and footer, but the content should be customizable on a one-off basis


Current workarounds / (not best) practices:



  1. Detach the component and customize it at will. Then of course you lose the power and consistency of components

  2. Build the “chrome” component to compose/include a child “content” component with variants. This works for the dialog use case, but is very tedious and forces the designer to work out-of-context, modifying the dialog content components separately from the context that they are in

  3. Build multiple “template” variants of the chrome component to try to anticipate any patterns the designer might wish to include. Tedious and constantly going to be revised as designers and users have new requirements for the content layout. On the plus side, promotes consistency.


In the interest of creating a tool that is highly functional across many users’ workflows, it would be great for the Figma team to figure out the most ergonomic way of implementing this feature.


One solution that comes to mind is to have a new layer property within a component that designates that layer as “free” / “variable” / “customizable”, in which case anything within that layer does not follow the “can’t edit” rule that applies to layers within a component.


Copying the instance would preserve the overridden content, but resetting or copying the component would not.

Reply


Terms & ConditionsCookie settings