[Epic] Composition Tokens: M2

[esthercheran]

Composition tokens was launched with the 102 release, we should plan for the next iteration of this feature.

Tasks for M2

Preview Give feedback

1. Composite tokens do not switch when switching between themes #1185
   bug +1
   
2. Tokens on inspect do not always show the used values #1093
   Inspect tab token type composition 💡request 🩵 Migrated to Featurebase +4
3. Combination token with padding overwrites itemspacing token #1085
   token type composition +1
4. Documentation Tokens don't work within the Composition. #1065
   +0
   
5. Inheritance and overwriting in Composition tokens #1218
   enhancement token type composition +2
   
6. Nesting in Composition tokens #1219
   enhancement token type composition 🩵 Migrated to Featurebase +3
   
7. Composition values not getting merged #1424
   token type composition +1
   
8. Support applying more than 1 composition token on a layer #1682
   design enhancement token apply multiple property token type composition 🩵 Migrated to Featurebase +5
9. Extend/import compositions #1614
   token type composition 💡request +2
10. Show token values in Inspect #2124
    +0
    
11. Allow composition token to have multiple fill properties #2335
    Figma native feature token apply multiple property token type composition 💡request 🩵 Migrated to Featurebase +5
12. Blank composition properties causing the fill property to not be applied to Figma layer #1943
    bug token type composition +2

If you've used composition tokens and have any feedback for us, leave your feedback in this issue 🙏

[engegu]

We are trying this out as an alternative to component tokens, a major hindrance is the inspect experience. It needs to be brought in line with other tokens in that there is at least a mouseover that lists referenced tokens and values.

[eekprice]

Composition request: it would be great to be able to reference compositions within compositions.

Why: I’ve created a collection of what I call velocity tokens - which are groups of tokens that make up almost all of my components. It would be great to create another set of component compositions that utilize the velocity tokens, making it a lot quicker to build inside of studio.

Another request for creating compositions:
It would wonderful to automate the composition creating process.

Recommendation: After applying all your tokens to a frame in figma, select the frame. We already know what tokens are applied in that frame with the inspect tab. It could be cool to have a button that said “create composition” and it would pull all those tokens into a new composition with the name being blank.

Quick wireframes for what I was thinking with the last request. https://www.figma.com/file/UWX2pubNzWkG8i8Sf2IQCN/Automating-compostion-creation-in-studio?node-id=0%3A1&t=kMj3VPsgMbpKm2RH-1

[vnys]

Composing composition tokens

Here’s what I’d like to see for composition tokens: If we could compose composition tokens, we could create base shapes or colour sets that could be reused across components. Similarly to how inheritance works with CSS, I would expect that if two composition tokens has conflicting values, the last one wins. But if you want to override a value, the order doesn’t matter because a property that you create directly on a composition token such as fontWeight for <Button> in the following example, has higher specificity than a value from another composition token that you pull in.

classDiagram
    note for colorset_primary "Colour “molecule” consisting of \n colours for bg, text, border, (icon)"
    Button *-- spacing_insetSquish_md : Composition
    Tab *-- spacing_insetSquish_md : Composition
    Button *-- typography_sm : Composition
    Tab *-- typography_md : Composition
    Button *-- colorset_primary : Composition
    Tab *-- colorset_primary_inverse : Composition
    
    
    class spacing_insetSquish_md {
        verticalSpace_sm  
        horisontalSpace_md
    }
    
    class typography_md {
        fontSize_md
        lineHeight_md
        fontWeight_400
    }
    
    class typography_sm {
        fontSize_sm
        lineHeight_sm
        fontWeight_400
    }
    
    class Button {
        fontWeight_500
        action()
    }
    
    class Tab {
        navigation()
    }
    
    class colorset_primary {
        bgColor_blue700
        textColor_neutral100
        borderColor_blue900
    }
    
    class colorset_primary_inverse {
        bgColor_blue100
        textColor_blue900
        borderColor_blue700
    }
        

Loading

[six7]

Thanks @vnys - i've used your input in the issue's description for applying more than 1 composition token: #1682

[chongchizhang]

Would love to see the support of applying multiple composite tokens on one Figma layer. This would tremendously help us reduce repeating tokens.

Before:

"button.primary.base.medium.default": 
    "{fill.primary}",
    "horizontalPadding": "{padding.xl}",
    "verticalPadding": "{padding.sm}",
    "itemSpacing": "{gap.xs}",
    "borderRadius": "{cornerRadius.md}"

"button.secondary.base.medium.default": 
    "{fill.secondary}",
    "horizontalPadding": "{padding.xl}",
    "verticalPadding": "{padding.sm}",
    "itemSpacing": "{gap.xs}",
    "borderRadius": "{cornerRadius.md}"

After:

"button.primary.default": 
    "{fill.primary}",

"button.secondary.default": 
    "{fill.secondary}"

"button.medium"
    "horizontalPadding": "{padding.xl}",
    "verticalPadding": "{padding.sm}",
    "itemSpacing": "{gap.xs}",
    "borderRadius": "{cornerRadius.md}"

So that way button size medium can combine with primary secondary styles to achieve the same goal.

[SamIam4Hyma]

closing this epic as all sub-issues have been closed or migrated into Featurebase.

🪙 ➕ Support multiple tokens per layer of the same type