Work with the Studio Figma Plugin

Note: Studio is currently part of an Early Access Program and may not be available to all users. Contact the Contentstack support team; they will coordinate with the appropriate stakeholders to review eligibility.

Use the Studio Figma plugin to convert design layers into reusable UI components, without writing code. This plugin offers a guided flow to authenticate via Contentstack, select design layers, map them to code components, apply design tokens for visual consistency, and export them into Studio.

Prerequisites

Before using the plugin, ensure the following:

• A valid Contentstack account with access to at least one stack and Studio project.
• User roles and permissions with read/write access to entries and environments.
• A Figma file with edit permissions.

Before you begin, review the Figma Best Practices document to ensure your designs are properly set up and optimized for use.

To integrate Figma designs with Studio, open your Figma file and perform the following steps:

1. Install the plugin from the Figma Marketplace and click Run.
2. In the login page, choose your organization’s region and click Authorize to proceed.
3. The plugin redirects you to the Contentstack application. Select the desired organization from the list.
4. After authentication, return to Figma. The plugin displays the list of projects linked to your organization in Studio.
5. Select a frame or component, or hold Shift and click to select multiple items. Alternatively, drag a selection box across the canvas to select multiple frames.

   Note: To enhance accuracy and avoid duplication, map your pre-built components and design tokens before generation.

6. Define layout or visual requirements using short prompts such as “Make this a carousel,” “Arrange elements in a grid,” or “Keep text above the image.”

   Note: Prompts affect design only, such as layout, spacing, and responsiveness. They do not define functional behavior (no click handlers, modals, etc.).

7. When multiple frames are selected, you can add individual prompts to each frame or apply a single shared prompt to all selected frames.
8. Choose a responsiveness option:
   • Optimize for responsiveness: Generates code that adapts to desktop, tablet, and mobile views.
   • Fixed-size screens: Keeps the selected frame dimensions across all views.

     Note: The selected responsiveness applies to all frames in the export. Mixing responsive and fixed layouts within the same export session is not supported.

9. Click Generate Design to create the component’s code, styles, and mapping metadata.
10. After code generation, choose one of the following export options:
    • Copy to Studio
      • Copies the generated component to your clipboard as composition JSON, which you can paste into the Studio editing canvas.
      • Use this when the Figma design includes components that are already built and registered in Studio and do not require further changes before import.
    • Copy CLI Command
      • Generates a CLI command to add the component to your local project and register it in Studio.
      • Use this option when the Figma design includes a component that does not have generated code or needs refinement, such as color, spacing, or behavior adjustments, before adding it to Studio. This is useful for advanced JavaScript components.

Map Design Components

Mapping helps the Figma plugin identify and reuse components that already exist in Studio when you export new designs. This prevents duplicate components and keeps your design system consistent

Note: Before mapping design components in Figma, make sure the components are synced using the CLI. Only synced components appear in the Figma plugin map.

1. Go to the Component Mapping tab to view the detected Figma components and corresponding code components.
2. Click Auto Map to match design layers to code components automatically.

   Note: The mapping is based on component name, description, and properties. Layers without a matching component remain unmapped and can be linked manually.

3. Review and adjust mappings before export to ensure accuracy.

Apply Design Tokens

Design tokens store values for visual properties like color, typography, and spacing. When applied in Studio, these values map directly to component styles, keeping designs consistent across your application.

Export design tokens using one of the following methods:

• Import Design Tokens to import and register design tokens into Studio.
• Copy CSS variables to use in external stylesheets or codebases.

Use the copied design token command from the plugin in the CLI to import and register the tokens in your Studio project. Once imported, you can use these tokens during visual editing.