ChangelogWe’re constantly improving Interplay. Here are the latest features and improvements.
1st Oct 2021
Design Token Support
Now you can keep your design tokens in Sync with Interplay and your design tools.

Design tokens provide a way for designers to maintain complete control over the values in their design system. Your tokens are your single source of truth for keeping your design system values in sync with every other project in your organisation. However, until now it was hard to keep tokens in sync across all your design and dev tooling.

We have built our token support from the ground up to work with the upcoming Design Token Community Group standard. We also support tokens from Styled Dictionary and Theme UI format. For other formats it's easy to write a transform before importing.

Sync Design Tokens from Code

Ensure design and engineering are always in sync with the same interplay CLI used to import your components.
Use Design Tokens in Figma

With the Interplay plugin, you can use those Design Tokens on any layer within Figma. The tokens displayed are based on the layer type selected. And if you have Auto-layout on a Frame, you can use spacing tokens for Padding and Gap too!
Design Tokens in Code View

When tokens are used in the design process, an engineer can copy the values directly from the code view. You can customise how the tokens are accessed for your system, and can have multiple formats for different target platforms.
Supports Theming

We support multiple themes for tokens. Any Tokens not overridden in a theme will default to the configured default theme. Themes can also inherit from other themes!
Switch Themes in Figma!

You can select any top level frame in Figma and change the theme used. This will update the values for all tokens used in that frame!
17th Sep 2021
Publish from Figma to Interplay
It is now possible to push designs from Figma to Interplay where where designers, engineers, and content designers can work together to bring a vision to life.

Designers can enhance the design and add more fidelity, responsive settings, and add decision design tokens. Engineers can replace parts of the design with new code components, and content designs can tweak the copy. All in a live code environment where you can perform more realistic user testing.

Inspect code, not images

Engineers can select any layer on the canvas and copy the code used in design. This will save hours of detective work, especially for those new to the design system.

If you select a design layer we will display the styles used in CSS or JS object format
Realistic User Tests

The Interplay preview mode is running your production code components. So now you can be confident you are testing the actual user experience.
27th Aug 2021
New Plugin UI
We have made some big changes to our plugin in an effort to help you achieve a state of flow while you are designing in your design tool of choice

Opt-in to Pre-release

There are a number of big features in this release, so you need to opt-in to the new experience for now — simply select "Try Pre-release" from the plugin menu.

Tabs Navigation

Tabs at the top to make it easier to switch between the Library, Design Properties, and Code view.
Component Details

The component details page now shows the properties on a component to help with exploring the system. Let us know what other information would be useful to display here.
Recently Used

To speed up the design process, we've added recent used components when you enter search mode.
Properties Panel Update

You can now easily swap presets for the select component. This helps explore other common configurations. You can also select the component title to swap the component!
6th Aug 2021
Improved Interplay CLI
To run your components, Interplay requires a UMD build of your component code and a JSON configuration file describing the available properties. The CLI helps you generate these two items, and with this release we've split the import into separate stages for build, parse and deploy to make it easier to control each stage as required for your repo.

The result is that it is now possible to:
  1. Let the CLI build your components with our default webpack config, provide your own webpack config, or provide your own build of your components.
  2. Use the CLI's generated component JSON, programmatically modify it, or provide your own.
  3. Generate preset config for your components from existing storybook files or docs examples, now controlled by rules to select which instances to use as presets.
CLI 2.0.0 can also now load design tokens into Interplay from JSON files in your repo 🎉

  • Improved component parsing for imported prop-types and typescript types
  • Control preset parsing with preset rules
  • Use JSDoc tags or CLI event handlers to hide props, provide designer-friendly descriptions, set component folders and set allowed component nesting
  • Import design tokens from JSON files in your repo
  • Environment variable support for key import settings for easier CI setup
  • Greatly improved logging and documentation
  • Handle recursive schema generation for object props
  • Many parsing fixes and enhancements
6th Jul 2021
New Application UI
We are excited to release our brand new UI. This is a huge update that helps designers and engineers to work more closely than ever and paves the way for full design editor capabilities.

Inspect code, not images

Engineers can select any layer on the canvas and copy the code used in design. This will save hours of detective work, especially for those new to the design system. If you select a design layer we will display the styles used in CSS or JS object format
Component Docs

We've cleaned up the components page to make it easier to scan component usage and properties. You can also easily arrange the components into folders with the drag and drop left nav.
Better Version Control

You can now clearly see what has changed across your project. From the version control you can
  • See before and after previews for each preset of screen change
  • Selectively commit the changes, or discard a change if it was a mistake
  • Tag a release in from the History tab. Just right click on a commit to tag.
Get startedLet’s end handoff, togetherInterplay helps high performing product teams work together and collaborate with code as the single source of truth.
Contacthello@interplayapp.comDublin, IrelandSydney, Australia
Copyright © 2021. Interplay, Pty Ltd. All rights reserved.