Embed Interplay

Approach

When creating documentation for your design system, there are two key maintenance tasks involved:

1. Maintaining the free-form content such as principles and guidance on how to use the design system

2. Keeping specific implementation details up to date - specs, design tokens, component props, and component status

You can use your favourite content writing tools such as Notion and Confluence to handle the free-form text, and use Interplay to automate the second part.

Interplay can automatically stay up to date with the latest changes in your tokens and components, and design specs are updated as part of your handoff workflow in Interplay.

You can embed this information in your docs as shown below.

Embedding tokens

First, add your tokens to Interplay by uploading a JSON file or by sync’ing them automatically from your code repo.

Once you have added them, you can embed them in other tools. To do this:

1. Copy the embed link for the token group you want to embed

2. Paste the embed link into the embed feature of your documentation tool. e.g. in Notion you can type a forward slash and choose Embed:

Embedding component presets

Once your components are imported into Interplay, you can embed your component presets as the source of truth for examples in other tools such as Notion and Confluence:

1. Go to the component page in Interplay

2. Copy the embed link for a specific component in the context menu

1. Embed the information in your writing tool as in Notion example for tokens above.