Frequently asked questions

Design Tokens

What are design tokens?

Design tokens are like shared variables that capture design decisions. Typically they are name-value pairs where the name describes a decision e.g. color-background-primary

By using the same tokens, designers and engineers can communicate precisely and designers can control product styling by providing tokens updates.

How do I add my design tokens to Interplay?

To add your design tokens:

  1. Create a free Interplay account
  1. Create a design system
  1. Upload JSON containing your tokens.
  1. Publish your design system to use it in Figma

Quick start guide

How can I use my design tokens in Figma?

Once you have added your tokens to a design system in Interplay, publish your design system to make it available in our Figma plugin.

You can then use your tokens to style objects and text in Figma.

Can I use design tokens on the free Starter account?

Yes! You can manage your tokens through the browser in Interplay as a team for free and publish them to Figma.

On our paid plans you can sync your tokens in from your code repo automatically.

Can I manage multiple sets of tokens?

Yes! Tokens are added to themes in Interplay. You can have multiple themes of tokens, and each theme can inherit tokens from another theme.

Managing themes


Code Components

What JavaScript frameworks can I use with Interplay?

Currently React components are supported, and web components that can run in React such as Stencil an LitElement.

Do I need to write my code components in a special way to use them in Interplay?

No. We import components as they are and run them using their code frameworks as normal. 

There may be some limitations on which component properties we can usefully expose for designers to use, but in general your components should work in Interplay as they do in your application.

What do I need to provide for Interplay to run my code components?

Interplay needs a javascript build that exports your components as individual exports, and it needs JSON config that describes your components. The Interplay CLI can help you create both of these.

Import overview

Can I use design components and code components side-by-side in my designs?

Yes! You can import your code components to Interplay and work with them in Figma. You can use them alongside your design components as usual.

Using code components in Figma

Can I import code components on my free Starter plan?

No, code component import is available on our paid plans. Once you've upgraded your workspace you'll be able to run the CLI to import your code components.

On our free plans you can use open source components we have already imported.

Can I control how designers see my code components in Figma?

Yes! You can override the information that Interplay parses from your code repo, and Interplay will remember your overrides while automatically staying up to date with changes your repo each run.

For example, you might hide ‘developer-only’ component props that are not relevant for use in design tools.

Did this answer your question?