Lock Frames or Variants to specific Token Set Combinations or Themes

[RGRMdesign]

Is your feature request related to a problem? Please describe

I’m currently facing a challenge with maintaining a Design System for a responsive website. The Design System consists of many components. Each component can have different styling depending on the viewport width. For example the font-size of a paragraph on a small viewport is 16px while on a large viewport it is 20px.

Each component has three Token Sets (component-name-small-vw, component-name-medium-vw and component-name-large-vw). I am using a mobile-first approach so the small-vw set containers all base styling such as font-family and colors. By applying different sets on an instance of a component I can control the appearance. The Design System contains documentation and examples for use-cases on each viewport size.

However, applying global changes - like font-family or color updates - becomes cumbersome when instances of components are styled using a combination of token sets for specific viewports. Global updates (Apply to document) affect all instances, regardless of the applied token sets or themes, leading to unintended changes. This makes it difficult to efficiently update and manage larger design systems where many components and pages are involved.

Another challenge is the steep learning curve for designers who use the design system as a library but are unfamiliar with the Tokens Studio Plugin. Ideally, I’d like to simplify their workflow by avoiding the need for them to use the plugin.

Describe the solution you'd like

I would like to request the ability to pin frames or component variants to a specific combination of token sets or theme in Tokens Studio for Figma. This feature would allow for more controlled updates when global changes are applied. For example, by pinning a frame to a specific token set or theme, I could ensure that global token updates (such as changes to font-family) on the entire document are applied without overriding instances styled with a different token set combination.

Additionally, this feature could simplify the workflow for design system consumers who may not need to interact with Tokens Studio directly when using this feature in combination with Viewport Width Variants on the components.

Describe alternatives you've considered

Currently, I have explored two approaches:

1. Viewport-based tokens within a single token set: I create multiple tokens for each viewport width (e.g., pragraph.small-vw.font-size, paragraph.medium-vw.font-size, paragraph.large-vw.font-size), but this leads to a large number of tokens and adds complexity to maintaining and extending the design system.
2. As described above: Separate token sets for each viewport width: I separate tokens into Base, Medium, and Large token sets, but this approach introduces issues when applying global updates, as it unintentionally affects all instances using different token sets. Furthermore, this approach requires all designers using the system to understand and work with the Tokens Studio Plugin, which increases the learning curve.

Neither solution fully resolves the issue of efficient global updates without affecting viewport-specific instances of components, and both approaches require extensive manual intervention when managing larger design systems.

Additional context

This feature would greatly enhance the usability and scalability of design systems using Tokens Studio for Figma, especially for teams that need to manage responsive components across multiple viewport widths. Introducing a pinning mechanism for Frames or Variants provide more control over global updates and reduce the complexity for design system consumers.

I’d love to hear feedback from others in the community and explore additional solutions or workarounds. Thank you!

[SamIam4Hyma]

Hi @RGRMdesign

You'll find you'll have more engagement with the community if your request is in our new feedback tool. Did you want to add your request there and then I can link this issue to it? That way you'll get updates on the convo (:

[RGRMdesign]

Hi @SamIam4Hyma

Thanks for reaching out. I already posted this issue on Featurebase. See https://feedback.tokens.studio/p/responsive-component-instances.

Best regards,
Rogier