Create area(s) in components where a designer can add custom content

[Nathan_Grealish]

I’m not sure how else to summarize this. Coming from a developer’s point of view, it would be great to be able to specify an area inside of a component that will allow a designer to add content, which could act as an auto-layout area and stretch the component if set that way.

In Angular, when creating a component, you have opening and closing tags. e.g:

<app-component>

</app-component>

Anything you write in the middle of that will yield in the component and basically wrap the content you’ve provided.

A practical example in Figma would be something like creating a website page layout “master” component with a navigation component, a header component and a left-side sub-nav component contained within it. The content of the page would just be blank. Currently, to add content there, we’d have to frame the main component and add the new content.

Though, let’s say there was a divider on the left-side navigation that was supposed to stretch with the content of the page, we currently can’t do that without manually stretching.

I hope this is clear enough.

[James_Pearson]

+1 for this suggestion.

We can currently do Instance Swap or Text editable sections but the modern UI workflow (Angular, Vue, React, web components) allow for component hierarchies with custom content as @Nathan_Grealish has outlined. The custom content is entered inside the component tags and is delivered into said component as a <slot/> or similar.