Getting started with the Figma plugin

Interplay has a native plugin for Figma which allows you to work with your latest production code components and design tokens in Figma. (Sketch plugin coming soon)

In this article

Getting started

To get started with the Figma plugin:

  1. Install the Interplay plugin for Figma: https://www.figma.com/community/plugin/736368164448889527/Interplay
  2. Create a new document in Figma
  3. Open the Interplay plugin and login with your Interplay account
  4. Choose the BaseUI sample design system and follow the onboarding tour

Video walkthrough

Here is a walkthrough of the Figma plugin. In this tour you'll see how the plugin allows you to use code components and design tokens in your Figma designs, and handoff your designs including these items Interplay:

How it works

When you add a component to the canvas, Interplay generates a design component/symbol on the fly - and keeps it connected with its underlying code component so your design files are always up to date.

Why it's useful

By empowering designers to use real properties on real components (instead of swapping out instances):

  • Designers immediately gain a deeper understanding the capabilities of the design system, and build up a common language with developers which improves collaboration.
  • Designers can iterate designs directly with users, using production code components
  • Ambiguity is removed from handoff because a developer can access exact design tokens and component configuration used by the designer

Next: Working with code components in Figma