FAQs

Frequently asked questions

Specs

What are Specs?

Specs are versioned projects that contain screen designs or component designs. You can create them directly from Figma and share them in Interplay.

  • Specs can be inspected for handoff, to see code components and design tokens used in the design, as well as CSS and position information.
  • Specs allow you to translate designs to your design system code quickly and accurately.
  • Our Specs product is currently in beta.
 
I’m just getting started. Can I use specs?

Yes, you can use Interplay specs for handoff without creating a design system in Interplay first by choosing one of the open source design systems we have configured when you open the Figma plugin.

Using specs is free during the beta period.

 

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?
😞
😐
🤩