ChangelogWe’re constantly improving Interplay. Here are the latest features and improvements.
1st Oct 2021
Design Token SupportNow 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.
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 InterplayIt 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 UIWe 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 at the top to make it easier to switch between the Library, Design Properties, and Code view.
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.
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 CLITo 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:
Let the CLI build your components with our default webpack config, provide your own webpack config, or provide your own build of your components.
Use the CLI's generated component JSON, programmatically modify it, or provide your own.
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
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.