Component Output

DesignVerse generates self-contained component folders. Each folder contains everything needed to use that component: source file, styles, TypeScript types, and an optional Storybook story. This page explains the anatomy of that output and how to work with it.

File structure

For a component named Button, the generated output looks like this:

output/
  Button/
    Button.tsx         # component source
    Button.module.css  # CSS Modules styles
    Button.stories.tsx # Storybook story (optional)
    Button.types.ts    # exported TypeScript types
    index.ts           # re-exports for clean imports

If you chose Vue as the framework, the output is Button.vue with a <style scoped> block instead of a separate CSS file. For HTML output, you receive a Button.html fragment and a Button.css stylesheet.

Naming conventions

Component names follow PascalCase as defined in Figma. Token-derived class names in CSS Modules use kebab-case with a component prefix:

.button-base {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
}

.button--primary {
  background: var(--color-brand-500);
  color: var(--color-neutral-0);
}

.button--sm {
  padding: var(--spacing-2) var(--spacing-4);
}

How props map to variants

Each Figma component property becomes a TypeScript prop. The prop name is the camelCase version of the Figma property name, and the allowed values are the union of the Figma property values.

For example, a Figma component with properties Variant (Primary, Secondary, Ghost) and Size (Small, Medium, Large) produces:

export type ButtonVariant = 'primary' | 'secondary' | 'ghost';
export type ButtonSize = 'sm' | 'md' | 'lg';

export interface ButtonProps {
  variant?: ButtonVariant;
  size?: ButtonSize;
  disabled?: boolean;
  children: React.ReactNode;
}

CSS custom property usage

Generated styles reference CSS custom properties rather than hardcoded values. DesignVerse also emits a tokens.css file at the root of your output directory that declares all custom properties as :root variables. Import this file once at your app entry point.

:root {
  --color-brand-500: #4F46E5;
  --color-neutral-0: #FFFFFF;
  --font-family-body: 'Inter', system-ui, sans-serif;
  --font-size-sm: 0.875rem;
  --spacing-2: 0.5rem;
  --spacing-4: 1rem;
  --radius-md: 6px;
}

If your project already has a custom property set, you can configure DesignVerse to skip emitting tokens.css and instead map generated references to your existing property names in dvs.config.json.

TypeScript type output

Types are always emitted as separate .types.ts files so you can import them independently without pulling in the component runtime. The index.ts barrel file re-exports both the component and its types:

export { Button } from './Button';
export type { ButtonProps, ButtonVariant, ButtonSize } from './Button.types';

Integrating into an existing codebase

Copy the generated component folder directly into your src/components/ directory. The component has no DesignVerse runtime dependency, so it works in any React, Vue, or standard HTML project without additional packages.

When tokens change in Figma and you run generation again, copy the updated folder over the existing one. Generated files do not contain any hand-written modifications you made, so keep custom logic in a wrapper component rather than editing the generated source directly.

Generated files are meant to be regenerated. Treat them like build artifacts: check them in, but do not edit them by hand.

See the API Reference to trigger generation from a CI/CD step, or return to the Quickstart if you are still getting set up.