Figma to React Component Library
Paste your Figma design system URL. Get a full TypeScript React component library with typed props, Tailwind CSS utilities backed by your design tokens, and optional Storybook stories for every variant.
What CodeFlow Lab Generates from Your Figma Design System
A component library generation starts with the same IR pipeline as any other CodeFlow build — design tokens are extracted first, then the component hierarchy is synthesized from your Figma component pages. Each Figma component becomes one TypeScript file. Each variant set becomes a typed prop union.
TypeScript component files
- One .tsx file per Figma component
- Props interface with variant, size, state props
- Typed children via React.ReactNode
- cn() / clsx for conditional class application
Design token integration
- tailwind.config.ts with brand color and spacing extensions
- tokens.ts with raw token values for runtime access
- CSS variables in globals.css for dark mode support
- Themed components using the token-backed utility classes
Library structure
- index.ts re-exporting all components and types
- tsup.config.ts for building distributable package
- package.json with correct exports field
- README.md with usage examples per component
Optional Storybook integration
- .storybook/ configuration with Tailwind CSS addon
- One .stories.tsx per component
- Controls for every typed prop
- Story for each named Figma variant
How Figma Variant Sets Become TypeScript Props
Figma's variant system is one of the most powerful features in its component model — and one of the most complex to convert to code correctly. A Button component with variants (Primary, Secondary, Danger), sizes (SM, MD, LG), and states (Default, Disabled) represents 18 visual combinations.
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'danger';
size?: 'sm' | 'md' | 'lg';
disabled?: boolean;
children: React.ReactNode;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
}
export function Button({
variant = 'primary',
size = 'md',
disabled = false,
children,
onClick,
}: ButtonProps) {
return (
<button
onClick={onClick}
disabled={disabled}
className={cn(
'font-semibold rounded-lg transition-colors',
{
'bg-indigo-600 text-white hover:bg-indigo-700': variant === 'primary',
'bg-white border border-gray-300 hover:bg-gray-50': variant === 'secondary',
'bg-red-600 text-white hover:bg-red-700': variant === 'danger',
},
{
'px-3 py-1.5 text-sm': size === 'sm',
'px-4 py-2 text-base': size === 'md',
'px-6 py-3 text-lg': size === 'lg',
},
{ 'opacity-50 cursor-not-allowed': disabled }
)}
>
{children}
</button>
);
}The class values are derived from your Figma design tokens — not generic Tailwind defaults. Your brand indigo, your border radius, your font sizes.
Frequently Asked Questions
Can CodeFlow Lab generate a full React component library from Figma?
Yes. When you convert a Figma design system file — one that contains a component page with variants — CodeFlow Lab generates a full React component library with one TypeScript file per component, exported props interfaces, a theme provider, and an index.ts that exports everything. Each component is independently importable and uses the design tokens from your Figma styles rather than hardcoded values.
How does CodeFlow handle Figma component variants?
Figma component variants (e.g., a Button with variants: Primary, Secondary, Danger; sizes: SM, MD, LG; states: Default, Hover, Disabled) are mapped to TypeScript discriminated union props or string literal union types. The generated component accepts variant, size, and disabled as typed props and uses conditional class application (via clsx or cn) to apply the correct Tailwind classes for each combination.
What format does the component library export use?
CodeFlow Lab generates ES module TypeScript (.tsx) files. The library has an index.ts that re-exports all components and their types. This format works with Vite, Next.js, and any modern bundler. If you need a build artifact (compiled JS + type declarations), CodeFlow generates a tsup configuration file that produces dist/index.js and dist/index.d.ts for npm publishing.
Does CodeFlow support Storybook integration?
CodeFlow Lab generates story files for each component when you request Storybook integration. Each .stories.tsx file covers the primary component variant, all named variants from Figma, and interactive args controls for every prop. The Storybook configuration is generated alongside the component library and includes the correct Tailwind CSS addon setup.
How do design tokens flow into the component library?
Design tokens extracted from your Figma file flow into the component library in two ways. First, tailwind.config.ts is generated with your brand colors, typography scale, and spacing values as Tailwind extensions — components use utility classes backed by these tokens. Second, a tokens.ts file is generated with the raw token values as TypeScript constants, which can be imported directly for runtime token access (e.g., in charts or canvas-based components that can't use Tailwind classes).
Can I use the generated component library in an existing project?
Yes. The generated components use standard React 18, TypeScript, and Tailwind CSS — no proprietary runtime. Copy the component files into your src/components directory and import them normally. If your project uses shadcn/ui, the generated components follow the same cn() pattern for className merging and are structurally compatible with shadcn conventions.