Working with code components in Figma

This article will show you how to get started using code components in Figma. For a video walkthrough of using the plugin, please see Getting Started with the Figma plugin

In this article

Choosing a design system

Preconfigured design systems

If you are using the plugin as a guest, or if your workspace does not yet have any published component projects, your plugin will show you a list of available open source design systems which are pre-configured and ready to use with no set up.

You can select which library you would like to work with on the welcome screen of the plugin.

Your design systems

If you have signed into the plugin with your Interplay account then your team's design systems will be available to choose in the plugin.

You can install a different library to work with using the Library manager in the plugin. To access the library manager, click the hamburger menu at the top right and choose Manage Libraries.

Add components to the canvas

To add component to the canvas:

  1. From the plugin library, click and drag a component onto the canvas.
  2. Release the mouse where you want to place the component. That’s it!

When you add a component to the canvas like this, Interplay generates a design component on the fly and keeps it connected with the related code component so that your design is always in sync with your production code.

If a component has more than one preset, the default preset for that component will be added to the canvas.

Using Component Presets

Each code component can have one or more presets configured:

A preset is a handy starting configuration your instance of the component - you can edit the properties of the component you just dropped to tailor it for your needs.

To add a specific preset to the canvas:

  1. From the plugin library click on a component. The available presets will be presented as thumbnail cards.
  2. Drag the preset card anywhere on the canvas

You can configure more available presets for your components by adding them online in your workspace project, or by generating more presets when importing components from your code repo.

Setting component properties

Code components in Interplay have properties which can be edited in the plugin.

A property is simply an option that lets you control how the component works or is displayed. For example a Button might have a props like  Label (the button text), Type (Primary, Secondary, Danger) and Size(Small, Medium, Large)

To edit the properties of a component:

  1. Click on the component that you want to edit on the canvas.
  2. The plugin will display the available properties for the selected component.
  3. Edit the properties you want to change.
  4. Interplay will render the changes in real time on the canvas.

Click on a component on your frame and flip between the design and code tabs in the plugin to edit your components in design mode or JSX view:

To clear a value for a property

  • On the plugin Design tab, properties that have values set have their names displayed in bold. Click on the property name and choose Clear Value to pass no value to the component for this property.
  • On the Code tab, edit the JSX to remove the property value that is being passed for the property.

Running in the browser

When you use the plugin to design with code components, you have the rich interactivity of code at your fingertips.

At any time you can preview your design as running React code, simply by pressing the Play icon in the plugin header.

This will launch a browser to run your composition as a React application which live-updates with further design changes.

Resizing components

To adjust the size of the component you can resize the component directly on the canvas using the native drag handles.

πŸ‘‰ Note: If the code component doesn't have a width or height specified (for example, the size of a button might be determined by the content and padding, rather than a set width or height), then the component will snap back to the correct size.

Nesting components

Some components will have properties which can accept child components. This lets you easily build up complex configurations from simple components.

You can nest components in the Design panel or by editing the JSX

This section describes nesting using the Design tab in the plugin. You can also nest components using the code view.

Add a child component

  1. Click the plus icon to open the component picker.
  2. Choose a component from the component picker to add it as a child.

πŸ‘‰ Note: Some components are designed to only work with specific child components. You can guide your designers by configuring which components are available for selection by editing the component properties in your Interplay workspace project.

Remove a child component

If you don't need a child component anymore you can remove it.

  1. Click the minus icon to remove the child component. By default the last child component at the bottom of the list will be removed.

To remove a child component that is not the last child of the list

  1. Select the child component you want to remove by clicking on the background just outside the card.
  2. Click the minus to remove the selected child component.

Duplicate a child component

  1. Select the child component item you want to duplicate by clicking on the background just outside the card.
  2. Use the keyboard shortcut Cmd + C to copy the child component
  3. Use the keyboard shortcut Cmd + V to past the child component

The child component will be added at the end of the child component list

Edit a child component

You can edit the properties of a child component just like any other component.

There are 2 primary ways to select a child component

  1. Click on the child component item in the properties panel
  2. Select the child component directly on canvas
    1. Double click to drill into child elements on canvas until you have selected the right child component.
    2. Use Cmd + Click on canvas
    3. With the parent component selected, hit enter to drill in

To return to the parent component

  1. Click the parent component name in the breadcrumb
  2. Select the parent component directly on canvas

Reorder child components

  1. Select the component on the on the component on the properties panel open, Click and drag a child component item to reorder

On-Canvas Editing

You can edit string values, such as text, directly on the canvas using the native text tools in Sketch and Figma.

  1. Select a text box on canvas (Tip: Use Cmd + Click to select deeply nested elements)
  2. Enter text edit mode on the canvas by hitting return or double clicking.
  3. Edit the contents of the text box. The property associated with the text string will be updated in real time.

πŸ‘‰ If the plugin isn't open when you edit a string on canvas, your on-canvas changes will be synced to the plugin when you next open the plugin.

πŸ‘‰ Note: Almost all text displayed in components will have an associated property, however, if you edit text which does not have a corresponding property, the changes will not be saved.

Code view

As well as a visual GUI, the Interplay plugin also has a code mode for configuring components.

To the view the JSX for a component:

  1. Select any component on canvas
  2. Click on the Code tab at the top of the plugin

You can also edit the JSX by editing the text in this view. This makes it easy edit deeply nested or data rich components as well as to quickly paste in component configurations from documentation sites or production.

To update your JSX edits on canvas either:

  1. Wait for the 2 second delay after you finish typing
  2. Switch back to the Design tab

Keyboard Navigation in the plugin

The plugin has keyboard navigation which lets you browse and add components to the canvas without leaving the keyboard.

Find and Add a Component

To find and add a Component via the keyboard:

  1. Open the Interplay Plugin and type the name of the Component you want to add.
  2. Keep typing until the Component or example comes to the top of the list, or **use the ↑ and ↓ arrows** on your keyboard to pick it.
  3. Type **⏎ return** to add the default (first) Example of the Component you selected.

πŸ‘‰ Pro tip: With a frame selected on canvas, hit return to add the selected component as a child of the selected frame. If the selected frame has Auto-Layout applied, you can rapidly assemble layouts without leaving the keyboard.

Browse Examples and Documentation

You can also use the keyboard to view the Component Details panel which contains a live Component Preview, Component Documentation and a list of Examples.

  1. Search, or use the ↓ down arrow to select a Component.
  2. Use the β†’ right arrow to view the Component details.
  3. Use the ↑ and ↓ arrows to select an example.
  4. Type ⏎ return to add the selected example to the canvas.

Browse Categories

You can use the keyboard to quickly navigate between Categories in your design system.

  1. Search, or use the ↓ down arrow to select a Category.
  2. Type β†’ right arrow or ⏎ return to open the Category and view the list of components.
  3. To go back, use the left arrow or Escape to return to the previous Category level.

Design overrides

The Interplay plugin will automatically detect any changes you make to a component instance after you add it to your canvas.

We try to match these updates with properties the component accepts, e.g. string or number values. When we find these we will notify you which properties will be applied before re-rendering onto the canvas.

If there are design overrides which do not map directly to code component properties, you have the option to reset those changes, or detach the component to request a developer make the required changes to the code.

Next: Working with design tokens in Figma