Reusable Graphic Styles

Share an idea
1

  1. Many design systems have components for “cards” that include styling that applied to all cards. However, if one wants to use autolayout, these card components will not work.

    figure 1
    figure 1736×329 11.1 KB

  2. The ideal state is something more like this

    figure 2
    figure 2756×218 11 KB

The reason a card is made a component in the first place is to ensure that each instance of it is using the same style, the same properties.

  1. There should be a way to create reusable graphic styles that bundle together multiple layer properties. These properties would include fill, stroke, effect, layer opacity/blend mode, and border radius. These would be able to named and edited just like any other saved fill or text style. They could be included in libraries and be applied to autolayout layers.
    example
    example891×1048 79.9 KB
1 Like
2

This comment may dovetail a bit with this one, but simpler.

I’d like to create styles that incorporate more than one attribute. For example an input field may have a stroke and a fill and also additional like corner radius, shadow effects, etc. Currently, each of those attributes (except corner radii which apparently can’t be made into a style) are separate styles. It would be helpful to either create a single style that captures all of those attributes…or maybe (and I’m just spitballing here) the ability to link styles so that one “click” automagically applies multiple styles.

1 Like
3

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?

4

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: