How to use Designsystemets components and tokens across organizations

[mrosvik]

Investigate:

• How can we use the same components and tokens across organizations?
• How can we make it easier for others outside our own organization to use the Design system with their own brand?

Make it easier for designers (in Figma)

1. How can a designer from another organization use components from the design system?

We can share our components in a file in Figma Community, but we need a way to keep it in sync if a component has updates or there are added new components to the library. We could wait for Figma to add this feature, or we could make a plugin that ensures that links between instances and master components are preserved? For example by checking the names against each other? Nav has created a plugin for its icon library that can be run to get new icons in. Maybe we can do something similar.

#### Tasks
- [ ] Investigate if figma intends to support this in the future
- [ ] Investigate whether there is a plugin for this

2. How can a designer add their own brand-tokens and variables in Figma?

Today they have to:

• Fork the repo https://github.com/digdir/designsystem
• Install the plugin Token Studio, set it up with their own fork. Guide. (Remember to write your own repo instead of digdir/designsystem. Example: deg/din-org/designsystem)
• In TokenStudio: Duplicate the brand "Digdir" and rename it to your own brand. To add your own colors into this set you need the Pro-version of Token Studio. The othe brand sets can be deleted, so that you only have yyour own brand left, and eventually sub-brands.
• In TokenStudio: Push your changes with all your color tokens.
• In TokenStudio: Generate variables for Figma.
• Use the components with your own brand! 🎉

In the storefront (designsystemet.no) you will only see Digdirs brands, but it could be a future solution to make it possible for others to see the components with their own brand by pasting a path to their own token-file.

#### Tasks
- [ ] https://github.com/digdir/designsystem/issues/1005
- [ ] Investigate in how we can make this an easier process for designers

Make it easier for developers

### Tasks
- [ ] Make a guide for how to set up a new brand set with your own tokens
- [ ] https://github.com/digdir/designsystem/issues/1006
- [x] Create a Theme picker / Theme Creator
- [x] Storefront: Theme picker - Add an option to add your own brand by pasting a URL to your token-set?
- [x] Storybook: Theme picker - Add an option to add your own brand by pasting a URL to your token-set?
- [ ] https://github.com/digdir/designsystem/issues/1169
- [ ] https://github.com/digdir/designsystem/issues/1225

[mimarz]

This is in progress with STAF <3

[mimarz]

This is now solved by having our users use our CLI, @digdir/designsystemet for generating and updating the Designsystem tokens in conjuction with https://theme.designsystemet.no

[mimarz]

We have solved this as a whole with our product suite for V1.