Generated Skill

Set up your Figma file structure for AI-friendly handoffs:

🎨 Design System
├── 📋 Tokens (colors, typography, spacing)
├── 🧩 Base Components (buttons, inputs, cards)
├── 🏗️ Composite Components (nav, forms, layouts)
└── 📱 Templates (page layouts)

🚀 Implementation
├── 🔄 Ready for Code (design-approved)
├── ⚡ In Development (being coded)
└── ✅ Shipped (live components)

Stage 1: Design Setup

• Create master design file with consistent artboard naming: ComponentName/VariantName
• Establish design tokens in Figma Variables (colors, typography, spacing grid)
• Build components using auto-layout exclusively (no absolute positioning)
• Apply semantic naming: button-primary-large not blue-big-btn

Stage 2: AI-Ready Handoff

• Use Figma MCP to extract component specs
• Generate implementation prompts with design tokens included
• Export assets in multiple formats (SVG for icons, optimized images)
• Create component documentation with states and props

Stage 3: Code Generation

• Feed Figma MCP output to Claude Code/Cursor with implementation target
• Generate component code with proper prop interfaces
• Include accessibility attributes and semantic HTML
• Implement responsive breakpoints from design

Stage 4: Quality Gates

• Visual regression testing against Figma designs
• Cross-browser compatibility check
• Accessibility audit (WCAG compliance)
• Performance metrics (bundle size, render time)

Figma Layer Structure:

ComponentName
├── State=Default, Size=Medium, Variant=Primary
├── State=Hover, Size=Medium, Variant=Primary  
└── State=Disabled, Size=Medium, Variant=Primary

Generated Code Mapping:

TypeScript
// From: Button/State=Default,Size=Medium,Variant=Primary
interface ButtonProps {
  state?: 'default' | 'hover' | 'disabled';
  size?: 'small' | 'medium' | 'large';
  variant?: 'primary' | 'secondary' | 'ghost';
}

Figma Variables Setup:

Colors/
├── Brand/Primary/500 → --color-brand-primary
├── Semantic/Success/500 → --color-success
└── System/Gray/100 → --color-gray-100

Typography/
├── Heading/Large → --font-heading-lg
└── Body/Medium → --font-body-md

Spacing/
├── 4px → --space-1
├── 8px → --space-2  
└── 16px → --space-4

Sync Command:

Bash
# Extract tokens via Figma MCP
figma-tokens extract --file-id="abc123" --output="tokens.json"

# Transform to CSS custom properties
tokens-transform --input="tokens.json" --format="css"

Example 1: Button Component Input: Figma button with variants (primary, secondary), states (default, hover), sizes (sm, md, lg) Output:

TypeScript
export interface ButtonProps {
  variant: 'primary' | 'secondary';
  size: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  onClick?: () => void;
}

export const Button: React.FC<ButtonProps> = ({ 
  variant = 'primary', 
  size = 'md', 
  disabled, 
  onClick,
  children 
}) => (
  <button 
    className={`btn btn--${variant} btn--${size} ${disabled ? 'btn--disabled' : ''}`}
    disabled={disabled}
    onClick={onClick}
  >
    {children}
  </button>
);

Example 2: Card Component Input: Figma card with image, title, description, CTA button Output:

TypeScript
export interface CardProps {
  image: string;
  imageAlt: string;
  title: string;
  description: string;
  ctaText: string;
  ctaHref: string;
}

Auto-Layout Translation:

• Figma auto-layout direction → CSS flexbox/grid direction
• Figma spacing → CSS gap properties
• Figma padding → CSS padding
• Figma fill container → CSS width: 100%

Responsive Breakpoints:

CSS
/* Mobile First - matches Figma frame widths */
@media (min-width: 768px) { /* Tablet */ }
@media (min-width: 1024px) { /* Desktop */ }
@media (min-width: 1440px) { /* Large Desktop */ }

Design Review:

• All components use design system tokens
• Consistent spacing grid (4px/8px base)
• Proper component variants and states
• Accessibility annotations included

Code Review:

• Generated code matches Figma visual output
• Semantic HTML structure
• Proper TypeScript interfaces
• CSS follows BEM or utility-first methodology

Implementation Review:

• Components render identically across browsers
• Responsive behavior matches Figma prototypes
• Loading states and error states included
• Performance budgets met

• Use Figma's component properties for AI-readable variants
• Maintain 1:1 component mapping between Figma and code
• Document component usage patterns in Figma descriptions
• Version control design files alongside code repositories
• Implement design tokens as single source of truth
• Use consistent file naming across Figma, code, and assets

• Don't use absolute positioning in Figma (breaks responsive code generation)
• Don't mix design tokens with hard-coded values in components
• Don't create overly complex component variants (keep under 3 properties)
• Don't skip hover/focus states in Figma (AI needs all states to generate proper code)
• Don't forget to update both design and code when making changes
• Don't rely on Figma's dev mode alone - always validate generated code output