Screens

Overview

Screens are the name we use in Interplay for compositions of code components. They live on the Screens tab in your Project:

image

Screens can be created directly in Interplay or by publishing your designs from Figma to Interplay.

Creating Screens in Interplay

To create a screen in Interplay:

  1. Navigate to the Screens tab in your Project
  2. Click the + icon in the Screens panel to add a screen
  3. Click on the Components tab and start dragging the code components in your Project onto your Screen.

Publishing Screens from Figma

To push a composition from Figma to Interplay:

  1. With the Interplay plugin open in Figma, select the Frame you would like to push to Interplay.
  2. Click the Push icon in the Interplay Plugin
  3. image

  1. In the push dialog, choose or create a Project in Interplay that you would like to push to. Add a description of your changes.
  2. image
  3. Click Publish to push to Interplay. Your design will be pushed to Interplay and you can click through to your Interplay project.
  4. You can now inspect and iterate your screens to work them up as you approach production.
    • Code components can be inspected as configurations of components - prop settings or JSX
    • Design components can be inspected as CSS or CSS in JS.

Inspecting Screens

Screens in Interplay are compositions of code components.

Code components from the Interplay plugin that you have used in your Figma design can be inspected by simply clicking on them in the Screen.

Clicking on the component in the screen reveals its properties on the right hand side:

image

You can flip between the design and code (JSX) views to tailor the component further.

Iterating screens

Pushing a frame from Figma to Interplay is a powerful way to share and iterate your work as a team:

  • It allows developers to inspect your design as JSX in Interplay where you have used code components and CSS for design components ...
  • ...then in Interplay you can iterate further together, replacing design components with code components as they are implemented in your repo and imported...
  • ...all the while sharing the screen as a running React application with your stakeholders to get feedback as you iterate.