The "generate" path turns a Figma frame or component set into real React components in your project, registered for use on the Studio canvas. The output is committable source, Button.tsx, Card.tsx, Hero.tsx, etc., along with the matching style file, metadata, and (optionally) a register-design-tokens.ts that brings your Figma tokens into Studio.

The workflow has two complementary tools:

• The Studio Figma Plugin: installed from the Figma Marketplace (plugin id 1541766192464484605), runs inside Figma. The designer selects frames, gives them a layout prompt, picks responsiveness, lets the plugin Auto Map layers to existing code components, and clicks Generate Design. The plugin produces a Component ID (and, when relevant, a Design Token ID) plus the composition JSON and CSS variables.
• The Studio CLI (csdx): installed on the developer's machine. Used once to publish existing code components for the plugin's Auto Map, and then again to materialise the plugin's output: csdx studio:component:add --component-id=<id>, csdx studio:design-token:add --design-token-id=<id>, and csdx studio:component:register to make the new component selectable on the Studio canvas.

Different from copy/paste, which produces a one-off composition tree from a single Figma frame. Generate produces reusable components you'll keep using forever.

Beta. The Studio Figma Plugin is currently in limited Beta. Some screen labels and UI states may shift between releases, so if a screenshot below doesn't match what you see, trust the labels in your live plugin and let the docs team know.

Click to enlarge

There are three stages:

1. One-time setup: both sides prepare. The developer installs the CLI and runs csdx studio:component:sync so existing code components show up inside the plugin's Auto Map. The designer installs the plugin and authorises.
2. Generate in Figma: the designer drives the plugin: select frame, prompt, responsiveness, Auto Map, Generate Design. The plugin yields a Component ID, optionally a Design Token ID, plus composition JSON and CSS variables.
3. Apply via CLI: the developer runs commands to materialise the plugin's output as source code in the project and to publish the new component back to Studio.

The Studio CLI exposes four primary commands for the Figma workflow, plus an auxiliary command for design tokens. They map to the three stages above as follows:

The mental model:

• Project scopes everything below it to one Studio project.
• Sync (existing code to plugin) is the one-way street that lets the plugin see what you already have.
• Add (Figma design to new code) is the other one-way street that brings the plugin's output back into the repo as new files.
• Register is the final publish step: local components, generated or hand-written, become available on the Studio canvas.

Sync and Add are easy to mix up because both flow between Figma and the project. The trick:

Sync pushes UP what already exists; Add pulls DOWN what the plugin just generated.

# 1. Install the Contentstack CLI + Studio plugin
npm i -g @contentstack/cli
csdx plugins:install @contentstack/studio

# 2. Pick your region (NA, EU, etc.), then log in via OAuth
csdx config:set:region
csdx login --oauth

# Pick the project this CLI session will act on
csdx studio:project:set --project-id=<project-id>

# Verify which project is currently linked
csdx studio:project:get

Every subsequent CLI action runs against this project; Sync pushes components into it, Add pulls Figma designs into your local repo on its behalf, Register publishes back to it. Re-run :set whenever you switch between projects.

If your repo already has React components, publish them to the linked Studio project so the Studio Figma Plugin's Auto Map can match Figma layers to them:

csdx studio:component:sync --component-path=<path-to-file>

Example:

csdx studio:component:sync --component-path=./components/HeroBanner.tsx

Options

For the full set of available flags across all CLI commands, see the Studio CLI reference.

Once executed, the CLI registers and maps the specified component internally; it then appears in the Figma plugin's mapping dropdown, where designers can link Figma layers to it during Auto Map.

This is the one-way street upstream: existing code to Studio project, visible to the Figma plugin. Without Sync, Auto Map has nothing to match against and every layer ends up as a generic frame. Re-run Sync whenever you add, rename, or modify components in the repo.

1. Open Figma → Resources → Plugins → Browse plugins in Community
2. Search for Contentstack Studio (plugin id 1541766192464484605)

3. Install, then click Run

4. Pick your organisation's region, click Authorize; the plugin opens an OAuth window, completes the sign-in, and returns to Figma

5. Confirm the Figma file is editable (read-only files block Auto Layout updates, token adjustments, and component mapping)

With the plugin running and the file editable, the designer does five things:

1. Select frames or components on the canvas. Standard click for one frame, Shift+click to select several.
2. Add a layout prompt in the plugin panel, e.g. "Make this a carousel", "Stack these as a 3-column grid on desktop, single column on mobile". Prompts shape layout, spacing, and responsiveness only; they do not add behavior (no click handlers, modal logic, animations).
3. Pick a responsiveness option:
4. Optimize for responsiveness: generates a layout that adapts across desktop, tablet, and mobile.
5. Fixed-size screens: keeps the layout at the exact dimensions of the selected frame.
6. You can't mix responsive and fixed-size in the same export session; pick one per Generate Design run.
7. Auto Map: open the plugin's Component Mapping tab. It lists the detected Figma layers in the selection on the left and the corresponding code components on the right. Click Auto Map to match them automatically; the plugin compares on component name, description, and properties. Any layer without a matching code component stays unmapped, and the designer can link it manually. Review and adjust every mapping before continuing. Only components published via csdx studio:component:sync appear in the plugin's mapping dropdown; if Auto Map shows nothing to match against, the developer needs to run Sync first.

Click to enlarge

1. Click Generate Design. The plugin produces:
2. A Component ID: feed this to csdx studio:component:add to generate React source
3. A Design Token ID (when tokens were involved): feed this to csdx studio:design-token:add
4. Composition JSON: pastable directly onto a Studio canvas via Copy to Studio (the copy/paste flow)
5. CSS variables: usable in external stylesheets via Copy CSS Variables

The plugin's four output buttons:

The Add command has two sub-commands:

• add component: generates a reusable React component (structure + styles + metadata) from a Figma design
• add design-tokens: imports visual properties (colour, typography, spacing, effects) from Figma as configuration files

Add component

csdx studio:component:add --component-id=<component-id>

This is the one-way street downstream: Figma plugin's output to new files in your project. Use it once per Component ID the plugin produced (the plugin's Copy CLI Command button puts the full invocation, including the right --component-id, on your clipboard; you can paste and run it directly).

Tip You can run this command without keeping Studio open; the CLI analyses your project, detects the styling method, and generates locally. No browser session needed.

The CLI detects your project's styling method (Tailwind CSS, CSS Modules, plain CSS, styled-components) and writes:

• A React component file (.tsx)
• A matching style file in the project's chosen styling format
• A metadata file capturing the prop schema the plugin inferred

Overriding the detected styling method: include the preference in your prompt at the CLI prompt: "Use CSS Modules instead of Tailwind." The CLI honours the override for this run.

Optional layout / behavior prompts: at the same step you can shape the output further:

• "Add a carousel with auto-scroll"
• "Use a two-column layout"
• "Use the existing useBreakpoint hook for the responsive switch"

Iterating on the output: after the CLI prints the generated files, it prompts:

• Press Y to regenerate with a new prompt
• Press N to accept the output and write the files to your project

So you can refine iteratively without re-running the plugin from Figma each time.

The files land in your local project directory, ready to commit, modify further, or feed straight into the Register step.

Add design tokens (design-token:add)

csdx studio:design-token:add --design-token-id=<design-token-id>

This scans your project's existing token sources (JavaScript/TypeScript files, CSS files with custom properties such as global.css, JSON/JS token structures) and asks three questions:

1. Include Studio's default design tokens? (Y/N)
2. Y: include Studio's default tokens alongside the tokens in your project files
3. N: import only the tokens defined in your project files
4. Pick an access level for what content editors can use on the canvas:
5. dynamic: editors can only use design options coming from the entries linked to the Studio project. They cannot access or apply custom colours or other styling available in the Studio editing canvas.
6. tokens: includes access to the dynamic components AND the custom design tokens added through the CLI
7. arbitrary: extends access beyond dynamic and CLI-added tokens, allowing editors to use any design properties available in the Studio canvas (custom colours, styles, visual adjustments)
8. Output path: defaults to ./src/config/register-design-tokens.ts inside your project.

Update behavior. To refresh existing tokens after the design system changes, run the same command again with the same Design Token ID; the CLI auto-refreshes any previously registered tokens. No need to delete and re-import.

Once you import the generated file from your app entry (see below), the design tokens appear in the Design tab of Studio for visual editing.

Click to enlarge

The CLI writes a register-design-tokens.ts file. Import it from your app entry point (e.g. main.tsx / index.tsx) so the tokens are registered before <StudioComponent /> mounts:

// main.tsx
import "./register-design-tokens";

Click to enlarge

You can register either a single component file or all components in a directory:

# Single file
csdx studio:component:register --component-path=<path-to-component-file>

# Example
csdx studio:component:register --component-path=./src/components/Navbar.tsx

# Whole directory
csdx studio:component:register --component-dir=<path-to-directory>

# Example
csdx studio:component:register --component-dir=./src/components/

Once executed, the CLI scans the provided file or folder for valid component declarations (e.g., export default, type, interface) and registers them with Studio. After registration, the components appear in Studio's visual editor for drag-and-drop reuse.

Register adds a local or custom component to Studio for reuse. The component can be one of three things:

• A component the Add command just generated from a Figma design; register it to expose it on the Studio canvas
• A component you modified after generation; re-register to push the updated prop schema
• A component you hand-wrote (not from Figma at all): Register is the path to expose any local React component to Studio, whether the plugin was involved or not

After Register, the component appears in the Studio canvas palette for authors to drop and bind.

Sync vs Register, the easy mistake. Sync makes existing components visible to the Figma plugin (for Auto Map). Register makes components visible to authors on the Studio canvas (for drop + bind). Different audiences, different commands.

The plugin's quality is bounded by the Figma file's structure. The items that matter most:

The generated layout adapts consistently across screen sizes; without Auto Layout, the plugin falls back to absolute positioning and the output won't reflow on different breakpoints.

Click to enlarge

Images get recognised as single assets and exported cleanly; otherwise they may be flattened into the surrounding frame.

Click to enlarge

Cleaner exports, fewer stray rects in the output. Backgrounds, gradients, and decorative shapes belong in a single group so the generated component tree doesn't fan out into noise.

Click to enlarge

Adequate spacing prevents misalignment during code generation; text bounding boxes that touch (or overlap) adjacent rects can produce off-by-one positioning bugs in the emitted CSS.

Click to enlarge

Text rects should match the actual content's width and height; no extra whitespace inside. Loose text boxes get translated into unnecessary padding around the text element.

Click to enlarge

The generated code is committable, but it's worth a pass:

1. Visual review: preview each component in Studio's palette. Drop one onto a canvas and confirm the render matches the Figma source.
2. Prop schema: open the metadata file and check the prop names + types match what your authors would expect. Rename anything cryptic.
3. Tests: if your repo has component tests, add coverage for the new ones.
4. Tokens: if csdx studio:design-token:add generated new tokens, decide whether to keep them or rename them to fit existing names in your system.
5. Lazy-load heavy components: for charts, video, animation-heavy components, consider switching from registerComponent to registerLazyComponent in your registry. See Optimizing load.

If you don't have a Figma file, or your team doesn't use Figma:

• Copy/paste: for a one-off Figma frame onto one Studio composition (still uses the plugin's Copy to Studio output, but skips the CLI side)
• Hand-write components and call registerComponent directly: covered in Registering components
• Generate from Storybook or another design-system source: same registerComponent API; the source of truth varies

• Optimizing load: when to lazy-register generated components
• Registering components: the registry API the CLI calls
• Component schema: the prop types the plugin and CLI emit
• Import design tokens: the design-token side of the same flow