Import and Manage New Designs

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.

This guide explains how to bring new Figma designs into Studio, helping both business users and developers create consistent, reusable components. You’ll learn how to import simple visual elements directly into Studio Canvas and how developers can register complex, interactive components using the Agentic CLI.

By following this process, design and development teams can maintain synchronization between creative updates and functional implementation, ensuring that Studio always reflects your most up-to-date designs.

Before you begin:

• You have access to Studio within your Contentstack stack.
• The Figma Plugin is installed and connected to your Studio project.
• You have either Editor (for UI components) or Developer (for registered components) permissions.
• The Agentic CLI is installed and configured on your system.

Importing new designs bridges Figma and Studio, allowing teams to reuse existing design assets in a structured, composable format. Business users can quickly add visual components, while developers can enhance complex components with logic and interactivity.

Studio supports two main design import types, simple UI components (no JavaScript logic) and complex registered components (with behavior or data bindings).

Simple components are purely visual and can be imported by business users directly from Figma. These components do not contain JavaScript logic and can be edited visually within Studio Canvas.

How to Add Simple Components:

1. In Figma, select the UI element you want to import.
2. Copy the component (use Cmd/Ctrl + C).
3. In Studio, open your project and go to Studio Canvas.
4. Paste the copied element directly into the Canvas (Cmd/Ctrl + V).
5. Adjust visual properties such as color, typography, or spacing using registered tokens.

Tip: Use tokens for consistent styling across imported components.

When to Use: Use this approach for static UI elements such as banners, buttons, or image blocks that do not require any dynamic behavior or custom JavaScript.

Complex components include custom logic, interactivity, or integration with data. These components must be prepared by developers before being reused within Studio.

How to Add Complex Components:

1. In Figma, share the component design file with your developer.

   The developer uses the Agentic CLI to generate the React component automatically.
   csdx studio:agentic:init

2. This command sets up the component structure, metadata, and optional bindings in one step.

   The developer then registers the new component using the SDK:
   registerComponents({

     'ProductCard': ProductCardComponent,
   });

3. Once registered, the component appears in Studio’s Components Library for reuse.
4. Designers or editors can now drag and drop it into Studio Canvas and bind live data to it.

Note: Components requiring JavaScript logic, data fetching, or interactivity must always be registered through the SDK by a developer.

When to Use: Use this process for interactive modules such as carousels, accordions, or components with conditional rendering.

The Agentic CLI can handle the entire design-to-component pipeline automatically — from extraction to registration.

How to Automate Using Agentic CLI:

1. Run the following single command:
   csdx studio:agentic:sync
2. This command automatically:
3. Fetches the latest Figma design updates.
4. Generates the corresponding React components.
5. Registers them in Studio.
6. Updates tokens and metadata automatically.
7. Once complete, the components appear in Studio Canvas, ready for reuse.

Result: Your design system remains up-to-date, and new components are available instantly for editors and developers.

After importing or registering components, it’s essential to keep them organized for ongoing maintenance.

How to Manage Components:

1. Open Studio → Components Library.
2. Search or filter components by name, design category, or token usage.
3. Edit component metadata (e.g., title, category, description).
4. Update or replace outdated design assets from Figma.
5. Archive components that are no longer needed.

Best Practice: Establish a naming convention for your components (for example, “ui-banner-primary” or “product-card-large”) to make maintenance easier across projects.

Before publishing, verify that your imported or registered components reflect the correct design and behavior.

1. Open the Preview Mode in Studio.
2. Compare the visual layout to the Figma source.

   If tokens or properties appear outdated, run the CLI sync again:
   csdx studio:sync

3. Once verified, save and publish the component to make it available across projects.

Outcome: Designs and Studio components remain visually and functionally synchronized, ensuring consistent user experiences.

Consider, a designer creates a new “Feature Card” component in Figma.

• The designer pastes it into Studio as a static UI component for visual preview.
• The developer enhances it with React interactivity using the Agentic CLI.
• The component is registered via the SDK and made reusable across multiple projects.
• Future updates to the design are synced automatically through the CLI.

Result: Design and development remain aligned, Studio reflects real-time updates while preserving code reusability and content structure.

Importing and managing new designs in Studio ensures that design and development teams stay in sync throughout the creative cycle. Business users can quickly bring in static Figma components, while developers can register interactive ones using the Agentic CLI.

This process keeps Studio scalable, structured, and ready for rapid iteration without disrupting production content.