ChangelogWe’re constantly improving Interplay. Here are the latest features and improvements.
Sept 30, 2022
New Design System DocumentationWe've added block editing features to enable you to document your design system and bring all of your design system artefacts together into a single place. You can now document both React and Figma components side by side, manage Design Tokens and author content and guidelines to align your whole team around a single source of truth.Fixes & improvements
Fix bug updating token values in plugin
Fix for webcomponents unmounting
Fix bug with relative top, left calcs
Calculate domHash with the relative positions to reduce re-renders
Plugin Dark mode updates
Fix bug using native components
Enhance positioning when dropping components into Figma Autolayout layers
Support Figma SECTION node
Fix preview size bug when node not loaded
Fix detach/re-attach when top level node
Remove presets from search results
Support images in the props panel select input
Support for Figma ON_HOVER event
Only pass parent props to Figma child elements
Load overrides and events on initial load from Figma
Fix auto-zoom on node preview
Capture JSX generating exceptions
Fix issues rendering Radix Dialog components
Aug 26, 2022
Add project security rulesWe added support to set security at a project level. Now users can set the who can edit the design system for great control and governance of your design system.Fixes & improvements
Imporove invite users experience
Update when project restriction messages are displayed
Add confirmation before locking down project
Update workspace security
When you create a new workspace, switch to that workspace
Dashboard headings and sort label wraps below 1200px and breaks layout
Use auto resize textarea with resize set as vertical
Truncate token type and value if is too large
Only display token copy button if token has a value
Fix bug where Symbol used on instance override
Jul 29, 2022
Design Specs — AlphaYou can now use the Interplay plugin for Figma plugin to document and package screens and component and send directly to your developer. No more tedious back and forth to ensure details are right in implemented code.Fixes & improvements
Fix issue with autolayout taking full width
Handle when Node is not found
Fix rendering of groups
Workaround for Figma bug changing type between Frame and Group
Remove fill styles from svg layers
Update position of child nodes when you add autolayout to the parent in Figma
Enable switching themes in the plugin preview
Get the correct default theme
Add live preview to Inspect
Fix bug switching between libraries in the plugin
Improve performance loading commit data
Fix Can't delete a new component property unless you close and reopen the Component Settings modal
Jun 24, 2022
Add Plugin Dark modeNow that Figma has added dark mode, we've added support in the plugin too. Now we will automatically switch to dark mode based on your settings in Figma.Fixes & improvements
Fix typography font size token also displays the token of line height type
Toggle dropdown isOpen by default when click on trigger element (#178)
Load commits directly form the storage to improve performance
Add Object token type
Fix bug not being able to select nested nodes
Improve experience when renaming a project
Allow adding padding and gap tokens to components
Reverse shadow order for Figma
Add Shadow Array token preview
Display array token values as string
Support multiple shadows tokens
Add size subtype for dimension tokens
Update sample token types
Fix tooltip usage within dropdown (#176)
Update token types to match the latest W3C Spec
Handle updating multiple theme tokens
Split usedFor and type option on token/token group editing
Add tooltip on hover to items in the token picker list
Improve experience when viewing archived project in the Figma plugin
Add narrow view without components preview
Improve token parsing
Fix dark mode issues
Support transparent background color
Fix typo with W3C spec name
Create token preview examples in a branch to prevent them being saved. Otherwise they get outdated
May 27, 2022
Fixes & improvements
Add TokenPreview for imcoming figma updates
Upgrade Figma typings
Add create new project at the beginning of select options
Support Emoji components in Figma
Add ability to copy design token reference
Include subfolders to component sidebar search
Update create workspace modal to the latest modal component and styles
Improve interaction with project name
Round line height and letter spacing to 2 decimal places
Dashboard UI tweaks
Fix issue with external framer-motion in CLI
Support formatting of composite token values in the token reference list
Add beta feature flag for embed links
Add free trial
Add Continue to Dashboard button from Figma auth
Fix plugin auth issues
Fixed rendering issue for pseudos inside self-closing-elems
Customise Help Button links based on the page it's on
Auto open edit mode for preset after creating
New Onboarding assistant component (#152)
Fix for loading cross-site images for thumbnail generation
Fix issues with creating forks
Update Flowting Window maxHeight to use Scrollbars component
Add ability to set css variable values from extensions
Fix issue with `dom-to-json` not working for web components
Add max height to floating window content
Add a context menu to component folders in the thumbnail view.
Support for web components imagegen thumbnails
Add support for 100% width for presets in Fimga
Add em and % support for letter spacing
Performance updates for WideTokenList
Handle code components nested in Figma frames
Allow users create sample design systems and Inspect projects
Update Token Preview pages
Update to latest theme spec. Add format dropdown to editor
Add web component support for image generation
Remove Stencil specific wait because componentOnReady method doesn't seem to work for our purposes
Misc performance updates
Improve calculating overrides
Project search result ordering does not match the selected ordering
Partial update for spec change from `fontName` to `fontFamily`
Fix when the name of the include ends with `.js`
Add ability to order includes by index
Throttle of Figma renders to imporve performance
Update the sort ordering for folders in the components list
Update token parsing format names
Allow moving position of Edit Token window
Add fontWeight support for type tokens in Figma styles
Apr 11, 2022
New Sample Design System and Inspect ProjectsWe've added some sample design systems and inspect project to help you get started with Interplay. When you create a new Design System you can choose from some popular open source design systems (more coming soon). When you create a new Inspect screen you can load a sample screen directly from the empty state.Fixes & improvements
Add support for latest W3C Token Spec
Re-render Figma code components when the parent Figma frame resizes
Add em and % support for letter spacing
Added CLI support for splitting webpack builds
Enable setting 100% width on the container for presets
Only display tokens from selected themes in the token JSON editor
Improve token json parsing on imports
Improve guessing token types from theme object imports
Export extensions data as part of the token spec json
Added format switcher when editing tokens and added save option to reduce errors
Fix tokens page crashes if you go to an incorrect group path URL
The clear button in Search component adds width to the search box
Change the code icon in the Token editing toolbar to a tab component
Update the sort ordering for folders in the components list
Mar 28, 2022
Embed Components & Design TokensYou can now embed your code components and design tokens in other tools such as Notion or ZeroHeight. This is released as a preview feature for now so will need to be enabled for your team. Once enabled, you can simply copy a link from a token group or component preset and paste into your favourite tool.Fixes & improvements
Released new project navigation
CLI updates for yarn2 (yarn berry)
Deployed new tokens editing experience
Major Figma plugin stability updates
Fixed rendering issues with web components.
Added improved logging when error in user overridden function
Duplicate customer + subscription in Stripe
Issues with component not display in webapp preset panel
Weight of type tokens is not set correctly in Figma styles
"Edit preset" missing on some component presets in same DS
Plugin content replaced with rendered frame content
BaseUI has type set to an object when array of arrays
Can't add a second token group if you haven't renamed the first one
Shadow preview in the token input spills across the whole input
While editing text on canvas, the text defocuses
Truncate long token paths in the edit token modal
Token Editing: Contextual menu stays open when you select `edit token`
Properties panel: Clear string on unset value button click
Mar 14, 2022
Functional design token valuesAs the number of design tokens grows within your system, it can be hard to manage all values manually. Functional token values allow you dynamically calculate a token value using an existing token and a number of predefined functions. Read more in the help docsFixes & improvements
Add border-radius tokens for Figma shapes
Add ability for sass bundling in CLI
Add a link to Slack community to the help menu
Editing JSON caused the token info panel to hide, but the token list didn't take up the available space
Imported JSON had a token type of "size" meant no type was shown in the UI, but type was not inherited
Prevent crash when string tokens have non-string value
After entering a token value, hitting tab focuses the address bar
Pushing frame to Interplay prod showing wrong frame in Inspect clickthrough
"Create new design system" button not working correctly after switching teams
Fix create account flow typo
Improve truncation of referenced tokens in the UI
Ordering of Properties is reversed in the Preset editing modal
Dragging to set a colour highlights the whole page
Clicking on another tab while editing JSON loses changes
Add token popup on hover, context menu for row and duplicate token
Line height tokens not showing up in line-height property for typography tokens
Version history empty state says 'commit changes to the project'
Fix padding in the history panel
Add Figma onboarding tip
Problem generating Figma styles from tokens
Figma styles order does not match order of tokens
Allow token values to go to 4 decimal places
Add the ability to delete screens and components from Inspect.
Support for importing design tokens from repo using Interplay’s design tokens API
Fixes to run CLI on Windows environments
Feb 28, 2022
Improved token editing with component previewsWhen you make changes to design tokens, it can be hard to visualise the impact of these changes across your entire design system. To help, we've added a preview panel to the Tokens screen. You can preview selected components, or even create a full screen to see how each change will affect the design of your app.Fixes & improvements
Added support for parsing d.ts files instead of component source code
Added support for react/jsx-runtime - i.e. React components that don’t import React
Added option to export presets to local JSX files in CSF format to create curated set of presets for designers in your repo
Add ability to use space tokens on all sides of auto-layout frames in Figma
You can now edit more than one value in the UI with JSON editor open
Upgraded to webpack 5 for bundling imported code
Automatically pre-pend the # if a hex value is specified for a colour value without the #
Rem token units aren't being converted to px when used in Figma
Cannot set the width on a preset container
Change file limit of recent projects tab to be unlimited
Token select Hover state is 'janky' in Safari
Improve support for rendering web components in Figma
Token popup is in the wrong position when the Edit JSON panel
Pushing design components to interplay prod fails to open project
Fix issues with image generation
truncate ds name when too long
Clicking outside an editable text filed loses the text changes
Fix pseudo-element auto margins issue
1st Feb 2022
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 Dec 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 Nov 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 Oce 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:
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 🎉
Updates
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 Sep 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.Get started for free →