Work with the Studio Figma Plugin

Note: Studio is currently available as part of an Early Access Program and may not be accessible to all users. For more information or to request access, contact our support team.

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, and export them into Studio.

Before using the plugin, ensure the following:

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

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, 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.).
   • When multiple frames are selected, you can add individual prompts per frame or apply one shared prompt to all selected frames.
7. 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.

8. Click Generate Design to create the component’s code, styles, and mapping metadata.
9. After code generation, choose one of the following export options:
   • Copy to Studio
     • Copies the generated component to your clipboard as composition JSON for use in Studio.
     • Ideal for visually composing sections in the Studio canvas using existing reusable code components.
     • Create a hero banner using Header, Description, and Button components.
   • Copy CLI Command
     • Generates a CLI command to add the component to your local project and register it in Studio.
     • Suitable for CLI-based workflows where components are integrated directly into the codebase with logic and configuration.
     • Build standalone reusable components such as a Card or Carousel.

Component mapping aligns design layers in Figma with pre-built core components in your codebase. This allows the system to automatically replace visual placeholders with reusable components during code generation.

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

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.

Design tokens represent shared visual styles such as colors, typography, and spacing. These ensure design consistency 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 UID in the CLI to import and register the tokens within your Studio project. Once imported, you can use these tokens during visual editing.

To ensure optimal results when importing from Figma:

• Use structured frames with clear naming conventions.
• Group similar elements (e.g., buttons, cards) into reusable components.
• Avoid unnecessary nested layers.
• Apply design tokens consistently for responsiveness.
• Ensure the target design is in edit mode, not read-only.

To learn more about the best practices, refer to the Figma Plugin Best Practices document.