Quickstart

This guide walks you through the complete path from a Figma file with design tokens to a generated React component you can drop into your codebase. No prior DesignVerse experience needed.

Prerequisites

A Figma file with color, typography, and spacing variables (Figma local variables or Tokens Studio JSON both work)
Node.js 18 or later installed on your machine
A free DesignVerse account

Step 1: Install the CLI

Install the DesignVerse CLI globally via npm or use the web app if you prefer not to install anything locally.

# npm
npm install -g @designverse/cli

# or with pnpm
pnpm add -g @designverse/cli

# verify installation
dvs --version

Step 2: Authenticate

dvs login

# Opens your browser for OAuth. After approving access,
# you are redirected back and the CLI stores your token.
Logged in as [email protected]

Step 3: Export tokens from Figma

In your Figma file, open the DesignVerse plugin (or use the Figma REST API export). The plugin produces a tokens.json file in the Tokens Studio format. If you already use Tokens Studio, export your existing JSON directly.

Place the exported file in a working directory:

mkdir my-design-system
cd my-design-system
# paste or copy tokens.json here

Step 4: Initialize a project

Run dvs init in your working directory. It prompts for a project name and detects the framework from your package.json.

dvs init

Project name: my-design-system
Framework detected: React (TypeScript)
Token source: ./tokens.json
# Creates dvs.config.json in the current directory

Step 5: Generate your first component

Point the CLI at a component spec. DesignVerse reads your tokens and outputs the component to ./output/ by default.

dvs generate Button

# DesignVerse resolves tokens, maps variants, and writes:
output/Button/Button.tsx
output/Button/Button.module.css
output/Button/Button.stories.tsx
output/Button/index.ts
# Generation completed in 2.1s

Step 6: Copy the output into your project

The generated files are standard React TypeScript with CSS Modules. Copy the Button/ folder into your component library, import it, and it will match your design file exactly.

import React from 'react';
import styles from './Button.module.css';

interface ButtonProps {
  variant: 'primary' | 'secondary' | 'ghost';
  size: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
}

export function Button({ variant, size, children, ...props }: ButtonProps) {
  return (
    <button
      className={styles[`btn--${variant}--${size}`]}
      {...props}
    >
      {children}
    </button>
  );
}

Next steps

Now that you have a generated component, here is where to go next:

Read Component Output to understand the full file structure and variant mapping logic
Install the Figma Plugin to push token changes from Figma without exporting a file manually
Explore the API Reference to trigger generation from CI/CD pipelines

Running into a problem? Email [email protected] and we will help you get unstuck.

Quickstart: from design tokens to your first component.