figma-to-react

Figma to React Patterns

Reading Figma Designs

Using Figma MCP

1. Get file structure:
   Call: mcp__figma__get_file with file_key
   Returns: Document structure with pages and frames

2. Get specific component:
   Call: mcp__figma__get_node with file_key and node_id
   Returns: Component details with styles

3. Extract from response:
   - Colors (fills)
   - Typography (fontSize, fontFamily, fontWeight)
   - Spacing (padding, margin from auto-layout)
   - Border radius
   - Effects (shadows)

Design Token Extraction

Colors → Tailwind

Figma Color	Tailwind Class
#3B82F6 (Blue 500)	bg-blue-500, text-blue-500
#EF4444 (Red 500)	bg-red-500, text-red-500
#10B981 (Green 500)	bg-green-500, text-green-500
#F3F4F6 (Gray 100)	bg-gray-100
#1F2937 (Gray 800)	text-gray-800
#FFFFFF	bg-white, text-white
rgba(0,0,0,0.5)	bg-black/50

Common Color Mappings

// Figma color values → Tailwind
const colorMap: Record<string, string> = {
  // Blues
  '#EFF6FF': 'blue-50',
  '#DBEAFE': 'blue-100',
  '#BFDBFE': 'blue-200',
  '#93C5FD': 'blue-300',
  '#60A5FA': 'blue-400',
  '#3B82F6': 'blue-500',
  '#2563EB': 'blue-600',
  '#1D4ED8': 'blue-700',

  // Grays
  '#F9FAFB': 'gray-50',
  '#F3F4F6': 'gray-100',
  '#E5E7EB': 'gray-200',
  '#D1D5DB': 'gray-300',
  '#9CA3AF': 'gray-400',
  '#6B7280': 'gray-500',
  '#4B5563': 'gray-600',
  '#374151': 'gray-700',
  '#1F2937': 'gray-800',
  '#111827': 'gray-900',
};

Typography → Tailwind

Figma Property	Tailwind Class
fontSize: 12	text-xs
fontSize: 14	text-sm
fontSize: 16	text-base
fontSize: 18	text-lg
fontSize: 20	text-xl
fontSize: 24	text-2xl
fontSize: 30	text-3xl
fontSize: 36	text-4xl
fontWeight: 400	font-normal
fontWeight: 500	font-medium
fontWeight: 600	font-semibold
fontWeight: 700	font-bold
lineHeight: 1.25	leading-tight
lineHeight: 1.5	leading-normal
lineHeight: 1.75	leading-relaxed

Spacing → Tailwind

Figma Spacing (px)	Tailwind Class
4	p-1, m-1, gap-1
8	p-2, m-2, gap-2
12	p-3, m-3, gap-3
16	p-4, m-4, gap-4
20	p-5, m-5, gap-5
24	p-6, m-6, gap-6
32	p-8, m-8, gap-8
40	p-10, m-10, gap-10
48	p-12, m-12, gap-12
64	p-16, m-16, gap-16

Border Radius → Tailwind

Figma Radius (px)	Tailwind Class
2	rounded-sm
4	rounded
6	rounded-md
8	rounded-lg
12	rounded-xl
16	rounded-2xl
24	rounded-3xl
9999	rounded-full

Shadows → Tailwind

Figma Shadow	Tailwind Class
0 1px 2px rgba(0,0,0,0.05)	shadow-sm
0 1px 3px rgba(0,0,0,0.1)	shadow
0 4px 6px rgba(0,0,0,0.1)	shadow-md
0 10px 15px rgba(0,0,0,0.1)	shadow-lg
0 20px 25px rgba(0,0,0,0.1)	shadow-xl
0 25px 50px rgba(0,0,0,0.25)	shadow-2xl

Figma Auto-Layout → Flexbox

Horizontal Layout

Figma: Auto-layout horizontal, gap: 16, padding: 24

<div className="flex gap-4 p-6">
  {/* children */}
</div>

Vertical Layout

Figma: Auto-layout vertical, gap: 8, padding: 16 24

<div className="flex flex-col gap-2 px-6 py-4">
  {/* children */}
</div>

Alignment

Figma Alignment	Tailwind Classes
Top Left	items-start justify-start
Top Center	items-start justify-center
Top Right	items-start justify-end
Center Left	items-center justify-start
Center	items-center justify-center
Center Right	items-center justify-end
Bottom Left	items-end justify-start
Bottom Center	items-end justify-center
Bottom Right	items-end justify-end
Space Between	justify-between

Fill Container

Figma: Fill container (width)

<div className="w-full">
  {/* fills parent width */}
</div>

Component Translation Examples

Button from Figma

Figma Design:

- Auto-layout: horizontal
- Padding: 12px 24px
- Gap: 8px
- Background: #3B82F6
- Border radius: 8px
- Text: 16px, semibold, white
- Hover: #2563EB

React Component:

interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
}

export default function Button({ children, onClick }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      className="flex items-center gap-2 px-6 py-3 bg-blue-500 hover:bg-blue-600 rounded-lg text-base font-semibold text-white transition-colors"
    >
      {children}
    </button>
  );
}

Card from Figma

Figma Design:

- Auto-layout: vertical
- Padding: 24px
- Gap: 16px
- Background: white
- Border radius: 12px
- Shadow: 0 4px 6px rgba(0,0,0,0.1)

React Component:

interface CardProps {
  children: React.ReactNode;
}

export default function Card({ children }: CardProps) {
  return (
    <div className="flex flex-col gap-4 p-6 bg-white rounded-xl shadow-md">
      {children}
    </div>
  );
}

Input from Figma

Figma Design:

- Width: fill container
- Height: 48px
- Padding: 12px 16px
- Background: #F9FAFB
- Border: 1px solid #E5E7EB
- Border radius: 8px
- Focus border: #3B82F6
- Text: 16px, gray-900
- Placeholder: gray-400

React Component:

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
}

export default function Input({ label, error, ...props }: InputProps) {
  return (
    <div className="w-full">
      {label && (
        <label className="block mb-2 text-sm font-medium text-gray-700">
          {label}
        </label>
      )}
      <input
        className="w-full h-12 px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg text-base text-gray-900 placeholder:text-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 outline-none transition-colors"
        {...props}
      />
      {error && (
        <p className="mt-1 text-sm text-red-500">{error}</p>
      )}
    </div>
  );
}

Responsive Design

Figma Breakpoints → Tailwind

Figma Frame	Tailwind Prefix
Mobile (375px)	Default (no prefix)
Tablet (768px)	md:
Desktop (1280px)	lg:
Large (1536px)	xl:

Responsive Example

// Mobile-first responsive design
<div className="
  flex flex-col gap-4 p-4
  md:flex-row md:gap-6 md:p-6
  lg:gap-8 lg:p-8
">
  <aside className="w-full md:w-64 lg:w-80">
    {/* Sidebar */}
  </aside>
  <main className="flex-1">
    {/* Main content */}
  </main>
</div>

Never Guess Design Values

IMPORTANT: Always read design values from Figma. Never assume:

• Colors (exact hex values matter)
• Spacing (designs are intentional)
• Typography (font sizes, weights, line heights)
• Border radius (consistency across components)
• Shadows (depth and elevation)

If Figma MCP is not available, ask the developer for:

• Design tokens file
• Style guide
• Component specifications