<aside> 👉 Screens are the name we use in Interplay for compositions pushed to Projects from Figma (and soon other design tools).
</aside>
They are only available in Projects and live on the Screens tab:
Screens in Interplay are compositions of design layers and code components pushed from your design tools.
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.
In addition to inspecting your design layers for the design handoff information, your developers can see any code components as JSX and see design token names instead of CSS values where they have been used. This eliminates a lot of painful detective work to manually translate designs to code.
Pushing a frame from Figma to Interplay is a powerful way to share and iterate your work as a team.
Interplay users can click the play icon to preview the screen running in the browser. If the screen was composed using code components, those components will be running in the browser as they would in production - realistic, interactive and responsive.
The preview is much closer to the real implementation so you can get more useful feedback from your users earlier in the design process for fast iteration.
Next: Managing code components