Figma Support Forum

Reusable Styling for Containers

In my designs there are types of containers which always have the same style but different contents (e.g. same corner radius, same color, same shadow, same border width, same padding). I haven’t found a good way to save such a collection of styles to make it reusable.

If I make a component to add this styling to my library, I have to break it to add content. This means the connection to the component is broken and the styling won’t update if I change anything. On the other hand I can only save parts of the styling as actual styles (color, shadow).

I’d also love to use something like this with the plugin themer. E.g.: One theme would have rounded corners and shadows and another one would have square corners and no shadows.

Has anybody found a nice way to add reusable container elements to their library?

The only solution I came with is to create separate components for each container. For example, if I have the notification popup, that has a title, body and set of buttons, I would create 3 different components: Modal title, Modal body and Modal buttons. Then, title text would be styled with proper text style (ex. Title H3), buttons would be button components with variants.

For Figma team:
It would be good if we could have containers as components whose instances can host other objects as override. At this moment you can’t add or remove objects in an instance of a component without detaching it from the source component.
Or, having padding as style, so you type text and then you style it with title-H3, red-color, light-shadow and modal-title-padding :slight_smile: