# From Figma to Code: My Component Extraction Workflow
By Govind Bajaj · 2026

Tags: workflow, figma, react, tailwind, frontend
I get a Figma file. I extract components in 30 minutes. Not by eyeballing — by following a systematic extraction process. Here's the exact workflow.
I get a Figma file from a designer. I extract components in thirty minutes.

Not by eyeballing measurements. Not by exporting PNGs and guessing. By following a systematic extraction process that turns design files into production-ready React components.

Here is the exact workflow I use for every project.

## Step 1: Inventory the Design (5 minutes)

Before writing code, catalog every unique element in the Figma file.

Identify the design tokens: colors, fonts, spacing scale, border radius values, and shadow definitions. These become the foundation of the Tailwind config.

Then inventory the components: buttons (primary, secondary, ghost), inputs, cards, navigation, and feedback elements.

Finally, identify the layout patterns: grid systems, responsive breakpoints, and container max-widths.

## Step 2: Extract Design Tokens (5 minutes)

```ts
// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        primary: { 50: "#ecfdf5", 500: "#059669", 700: "#047857" },
      },
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"],
      },
    },
  },
}
```

I use the Figma Tokens Studio plugin when available. It exports tokens as JSON for direct Tailwind import.

## Step 3: Build Base Components (15 minutes)

Start with the smallest, most reused elements. Button, Input, Card.

```tsx
// components/Button.tsx
import { cva, type VariantProps } from "class-variance-authority"

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-lg font-medium",
  {
    variants: {
      variant: {
        primary: "bg-primary-500 text-white hover:bg-primary-700",
        secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
        ghost: "bg-transparent hover:bg-gray-100",
      },
      size: {
        sm: "px-3 py-1.5 text-sm",
        md: "px-4 py-2 text-base",
        lg: "px-6 py-3 text-lg",
      },
    },
    defaultVariants: { variant: "primary", size: "md" },
  }
)

export function Button({ variant, size, className, ...props }: ButtonProps) {
  return (
    <button className={buttonVariants({ variant, size, className })} {...props} />
  )
}
```

I use class-variance-authority for type-safe variant props.

## Step 4: Compose Page Sections (5 minutes)

With base components built, page sections compose quickly.

## The 30-Minute Rule

If extraction takes longer than thirty minutes, the design is either too complex or inconsistent. Both are signals to talk to the designer.

## Takeaways

- Inventory before coding — catalog tokens, components, and layouts first
- Extract design tokens into Tailwind config before building components
- Use class-variance-authority for type-safe component variants
- Build atoms before molecules
- The 30-minute rule: if extraction takes longer, the design needs discussion
- This workflow turns design handoff from a guessing game into a systematic process