Best practise customisable component library with tokens

[lukasoppermann]

Hey, I want to achieve the following:

1. A figma component library based on design tokens
2. Users can download the library and use them in their projects
3. Users can update design tokens which will update the components, e.g. change the border radii or colors.

However, if possible I would still like to use figma styles for colors and type, etc.

Is there a best practise for this scenario using figma tokens?
To customize tokens users would load a custom json into the plugin.

[six7]

I usually recommend to

• use Figma Styles where available (and the list will grow bigger once Figma adds Spacing etc)
• use the plugin for what's not yet possible (border radius, spacing, sizing)

The library itself would have all styles created based on tokens. It would also contain all components that have tokens applied. Users could then paste a new JSON that ideally matches the schema of the original library, hit Update and get a new look and feel.

Currently JSON pasting is only possible theme by theme or via the sync options. Users currently would need one giant JSON containing all tokens, but I think what we'd need is a manual import of one json file containing multiple token sets to retain the split between option and decision level groups.

[UgoJau]

Hello,
I get that, but i'm wondering to make this the simpliest this work for dev handoff.

They have to look on color styles and font style Within Figma Inspect
and some other info in JSON on Token specs ?

How to guide them and whats the best way ?

[badjar]

Hi @six7
I'm also trying to achieve something a somewhat similar to lukasoppermann - i.e. to let users modify the design in Figma/Tokens plugin and then create a new JSON file for handoff to development.
When you say "Use Figma Styles where available" and "Use the plugin for what's not yet possible" do you mean:

1. Update available styles in Figma then import tokens to a theme in the plugin
2. Where styles are not available in Figma, to assign different tokens to components using the plugin (e.g. sizing)

Is there an advantage to this two step approach compared with assigning all tokens using the plugin?