Frontend UI from Design - Cursor IDE

Scenario

Your design team has created a comprehensive Figma design system for a fintech dashboard. It includes complex data visualizations, responsive layouts, dark/light themes, and micro-interactions. You need to implement pixel-perfect React components that match the designs exactly while maintaining performance and accessibility standards.

Learning Objectives

By completing this lesson, you’ll master:

Converting Figma designs to React components with AI
Building reusable component systems
Implementing responsive layouts efficiently
Adding animations and micro-interactions
Ensuring accessibility compliance
Managing design tokens and theming

Prerequisites

Basic React and CSS knowledge
Access to Figma designs (or use provided examples)
Figma MCP server installed (see setup guide)
Understanding of component-based architecture

The Challenge

Transform design mockups into production code that:

Matches designs pixel-perfectly
Maintains 60fps performance
Scores 100 on accessibility audits
Supports theme switching
Works across all devices
Includes all micro-interactions

Guided Implementation

Phase 1: Design Analysis and Setup

Analyze Design System

Start with screenshots or Figma access:

@figma-screenshot.png
"Analyze this design system and identify:
- Component hierarchy
- Design tokens (colors, spacing, typography)
- Responsive breakpoints
- Animation patterns
- Accessibility requirements
Create a component architecture plan"

Extract Design Tokens

"Based on the design analysis, create a design tokens system:
- Color palette with semantic naming
- Typography scale
- Spacing system (4px/8px grid)
- Border radius values
- Shadow definitions
- Animation timings
Format as CSS variables and TypeScript types"

Example tokens:

export const tokens = {
  colors: {
    // Primitives
    blue: {
      50: '#eff6ff',
      500: '#3b82f6',
      900: '#1e3a8a',
    },
    // Semantic
    primary: 'var(--blue-500)',
    background: {
      primary: 'var(--gray-50)',
      secondary: 'var(--white)',
      elevated: 'var(--white)',
    },
    text: {
      primary: 'var(--gray-900)',
      secondary: 'var(--gray-600)',
      inverse: 'var(--white)',
    },
  },
  spacing: {
    xs: '0.25rem',  // 4px
    sm: '0.5rem',   // 8px
    md: '1rem',     // 16px
    lg: '1.5rem',   // 24px
    xl: '2rem',     // 32px
    '2xl': '3rem',  // 48px
  },
  typography: {
    fontFamily: {
      sans: 'Inter, system-ui, sans-serif',
      mono: 'JetBrains Mono, monospace',
    },
    fontSize: {
      xs: ['0.75rem', { lineHeight: '1rem' }],
      sm: ['0.875rem', { lineHeight: '1.25rem' }],
      base: ['1rem', { lineHeight: '1.5rem' }],
      lg: ['1.125rem', { lineHeight: '1.75rem' }],
      xl: ['1.25rem', { lineHeight: '1.75rem' }],
      '2xl': ['1.5rem', { lineHeight: '2rem' }],
    },
  },
} as const;

Set Up Component Structure

Switch to Agent mode:

"Create a scalable component structure:
- Atomic design methodology
- Component categories (atoms, molecules, organisms)
- Storybook setup for documentation
- Theme provider implementation
- CSS-in-JS or CSS modules setup"

Phase 1.5: Figma MCP Integration (Recommended)

Enable Figma Dev Mode MCP

First, ensure Figma’s MCP server is running:

# In Figma Desktop App
Preferences → Enable Dev Mode MCP Server

Connect Cursor to Figma

If not already configured:

{
  "mcpServers": {
    "figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

Use MCP for Design Analysis

With a Figma frame selected:

"Using Figma MCP, analyze the selected component and:
- Extract all design tokens (colors, spacing, typography)
- Get the exact component structure
- List all variants and states
- Generate React component with proper styling"

The MCP provides:

get_code: Generates React/Tailwind code from selection
get_variable_defs: Extracts design tokens
get_code_connect_map: Maps to existing components

Extract Design Tokens via MCP

"Using Figma MCP get_variable_defs:
- List all color variables with exact values
- Extract spacing scale
- Get typography definitions
- Create a tokens.ts file matching Figma exactly"

Example MCP response integration:

// The AI will use MCP data to generate:
export const figmaTokens = {
  colors: {
    'primary-500': '#3b82f6',  // Exact from Figma
    'surface-elevated': '#ffffff',
    'text-primary': '#111827',
  },
  spacing: {
    'component-padding': '14px',  // Precise Figma values
    'section-gap': '32px',
  }
};

Component Code Generation

With Figma component selected:

"Generate the Button component using Figma MCP:
- Use get_code for the exact structure
- Apply all variants from the design
- Include proper state handling
- Match Figma's auto-layout with flexbox"

The MCP ensures:

Pixel-perfect spacing
Correct color token usage
Proper component hierarchy
Responsive behavior

// Direct from Figma selection
"Generate this card component"

// MCP provides exact values:
// - padding: 24px
// - border-radius: 12px
// - shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1)
// - Uses color token: surface.elevated

// Generated code matches perfectly

// Manual interpretation from screenshot
"Create a card similar to this image"

// AI guesses values:
// - padding: ~20px (actually 24px)
// - border-radius: ~10px (actually 12px)
// - shadow: generic (missing exact values)
// - color: white (missing token reference)

Phase 2: Building Core Components

Create Base Components

@design-system/button.png
"Create a Button component that matches this design:
- All variants (primary, secondary, ghost, danger)
- All sizes (sm, md, lg)
- States (hover, active, disabled, loading)
- Icon support (left/right)
- Full keyboard navigation
Use compound component pattern"

Example implementation:

import { forwardRef, ButtonHTMLAttributes } from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { Loader2 } from 'lucide-react';

const buttonVariants = cva(
  // Base styles
  'inline-flex items-center justify-center font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        primary: 'bg-primary text-white hover:bg-primary-dark active:bg-primary-darker',
        secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300',
        ghost: 'hover:bg-gray-100 active:bg-gray-200',
        danger: 'bg-red-500 text-white hover:bg-red-600 active:bg-red-700',
      },
      size: {
        sm: 'h-8 px-3 text-sm rounded-md gap-1.5',
        md: 'h-10 px-4 text-base rounded-lg gap-2',
        lg: 'h-12 px-6 text-lg rounded-lg gap-2.5',
      },
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md',
    },
  }
);

export interface ButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  isLoading?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({
    className,
    variant,
    size,
    isLoading,
    leftIcon,
    rightIcon,
    children,
    disabled,
    ...props
  }, ref) => {
    return (
      <button
        ref={ref}
        className={buttonVariants({ variant, size, className })}
        disabled={disabled || isLoading}
        {...props}
      >
        {isLoading ? (
          <Loader2 className="animate-spin" size={size === 'sm' ? 14 : 16} />
        ) : leftIcon ? (
          <span className="inline-flex shrink-0">{leftIcon}</span>
        ) : null}
        {children}
        {rightIcon && !isLoading && (
          <span className="inline-flex shrink-0">{rightIcon}</span>
        )}
      </button>
    );
  }
);

Button.displayName = 'Button';

Build Form Components

@design-system/forms.png
"Create a complete form component system:
- Input with all states and variants
- Select with custom styling
- Checkbox and Radio components
- Form field with label and error states
- Input group compositions
Ensure ARIA compliance"

Implement Data Display Components

@design-system/data-table.png
"Create a DataTable component with:
- Sortable columns
- Pagination
- Row selection
- Responsive behavior
- Loading states
- Empty states
Use virtualization for performance"

Phase 3: Complex UI Patterns

Build Dashboard Layout

@dashboard-layout.png
"Implement the dashboard layout:
- Responsive sidebar navigation
- Header with user menu
- Main content area with breadcrumbs
- Mobile-first approach
- Smooth transitions
Include keyboard navigation"

Example layout:

export const DashboardLayout: React.FC<{ children: ReactNode }> = ({ children }) => {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const { pathname } = useRouter();

  return (
    <div className="min-h-screen bg-background">
      {/* Mobile sidebar backdrop */}
      <Transition show={sidebarOpen} as={Fragment}>
        <Dialog onClose={setSidebarOpen} className="relative z-50 lg:hidden">
          <TransitionChild
            enter="transition-opacity ease-linear duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="transition-opacity ease-linear duration-300"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 bg-gray-900/80" />
          </TransitionChild>

          <div className="fixed inset-0 flex">
            <TransitionChild
              enter="transition ease-in-out duration-300 transform"
              enterFrom="-translate-x-full"
              enterTo="translate-x-0"
              leave="transition ease-in-out duration-300 transform"
              leaveFrom="translate-x-0"
              leaveTo="-translate-x-full"
            >
              <DialogPanel className="relative mr-16 flex w-full max-w-xs flex-1">
                <Sidebar onClose={() => setSidebarOpen(false)} />
              </DialogPanel>
            </TransitionChild>
          </div>
        </Dialog>
      </Transition>

      {/* Desktop sidebar */}
      <div className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
        <Sidebar />
      </div>

      <div className="lg:pl-64">
        <Header onMenuClick={() => setSidebarOpen(true)} />

        <main className="py-6">
          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <Breadcrumbs />
            {children}
          </div>
        </main>
      </div>
    </div>
  );
};

Create Data Visualization Components

@charts-design.png
"Build chart components matching the design:
- Line chart with tooltips
- Bar chart with animations
- Donut chart with legends
- Sparklines for metrics
- Real-time data updates
Use D3.js or Recharts"

Implement Complex Interactions

@interaction-flow.png
"Create interactive components:
- Drag and drop kanban board
- Multi-step form wizard
- Command palette (⌘K)
- Toast notifications
- Modal system with focus trap"

Phase 4: Animations and Polish

Add Micro-interactions

@micro-interactions.mp4
"Implement these micro-interactions:
- Button press effects
- Hover state transitions
- Loading skeleton animations
- Page transitions
- Scroll-triggered animations
Use Framer Motion"

Example animation:

import { motion } from 'framer-motion';

export const AnimatedCard = ({ children, delay = 0 }) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{
        duration: 0.4,
        delay,
        ease: [0.25, 0.46, 0.45, 0.94],
      }}
      whileHover={{
        scale: 1.02,
        boxShadow: '0 10px 30px rgba(0, 0, 0, 0.1)',
      }}
      className="bg-white rounded-xl p-6 cursor-pointer"
    >
      {children}
    </motion.div>
  );
};

Implement Theme System

"Create a complete theme system:
- Light/dark theme toggle
- System preference detection
- Smooth theme transitions
- Persistent theme selection
- Theme-aware components"

Polish and Optimize

"Optimize the UI for production:
- Lazy load heavy components
- Implement virtual scrolling
- Add error boundaries
- Optimize bundle size
- Preload critical fonts"

Phase 5: Testing and Documentation

Visual Regression Testing

"Set up visual regression testing:
- Storybook stories for all components
- Chromatic or Percy integration
- Responsive screenshot tests
- Cross-browser testing
- Accessibility testing"

Component Documentation

"Generate comprehensive documentation:
- Props documentation
- Usage examples
- Design guidelines
- Accessibility notes
- Performance considerations"

Create Component Playground

"Build an interactive playground:
- Live component preview
- Props editor
- Code export
- Theme switcher
- Responsive preview"

Key Techniques Demonstrated

Technique 1: Design-to-Code Workflow with MCP

Systematic conversion process:

// 1. With Figma MCP (Recommended)
// Select component in Figma, then:
"Using Figma MCP, generate this component with:
- Exact design tokens from get_variable_defs
- Component structure from get_code
- Apply Code Connect mappings if available"

// 2. Without MCP (Fallback)
@component-design.png
"Break down this component into:
- Layout structure
- Spacing values
- Color usage
- Typography
- Interactive states"

// 3. Refine and polish
"Add animations and micro-interactions matching Figma prototypes"

Key MCP advantages:

Precision: Exact values, not approximations
Speed: Instant code generation
Consistency: Automatic token usage
Sync: Design changes reflected immediately

Technique 2: Component Composition

Build complex UIs from simple parts:

// Compose complex components
<Card>
  <Card.Header>
    <Card.Title>Revenue</Card.Title>
    <Card.Action>
      <Button size="sm" variant="ghost">View all</Button>
    </Card.Action>
  </Card.Header>
  <Card.Body>
    <MetricChart data={revenueData} />
  </Card.Body>
</Card>

Technique 3: Performance Patterns

Optimize for 60fps:

// Use CSS transforms for animations
const slideIn = {
  initial: { transform: 'translateX(-100%)' },
  animate: { transform: 'translateX(0)' },
  exit: { transform: 'translateX(-100%)' },
};

// Virtualize long lists
<VirtualList
  height={600}
  itemCount={items.length}
  itemSize={80}
  renderItem={({ index, style }) => (
    <div style={style}>
      <ListItem item={items[index]} />
    </div>
  )}
/>

Common UI Pitfalls

Problem: Small differences from design

Solution:

// Use exact values from design
const spacing = {
  // Not: padding: '1rem'
  // But: padding: '14px' // Exact from Figma
}

// Or use design tokens
padding: tokens.spacing.md // Consistent

Problem: Janky animations and slow renders

Solution:

// Use transform instead of position
// Bad: left: ${x}px
// Good: transform: translateX(${x}px)

// Memoize expensive components
const ExpensiveChart = memo(({ data }) => {
  return <Chart data={data} />;
}, (prev, next) => prev.data === next.data);

Problem: Components fail accessibility audit

Solution:

// Always include ARIA labels
<IconButton
  aria-label="Close dialog"
  onClick={onClose}
>
  <XIcon />
</IconButton>

// Manage focus properly
useEffect(() => {
  if (isOpen) {
    firstFocusableElement?.focus();
  }
}, [isOpen]);

Extended Challenge

Level up your UI skills:

Advanced Interactions
- Gesture-based navigation
- Advanced drag and drop
- Real-time collaboration cursors
- Physics-based animations
Design System Scaling
- Multi-brand theming
- White-label architecture
- Component marketplace
- Design token automation
Performance Excellence
- Progressive enhancement
- Adaptive loading
- Edge computing for SSR
- WebAssembly for heavy computations

Measuring Success

Your implementation succeeds when:

✅ 100% match with design specs
✅ 60fps on all animations
✅ 100/100 Lighthouse scores
✅ WCAG AAA compliance
✅ Less than 3s initial load time
✅ Works on all browsers/devices
✅ Design team approval
✅ Component reusability >80%

Real-World Impact

Teams using these techniques report:

75% faster design-to-production time
90% fewer design inconsistencies
50% reduction in CSS bundle size
Perfect accessibility scores

UI Development Checklist

Before shipping:

Key Takeaways

Start with Tokens: Design tokens ensure consistency
Compose Don’t Complicate: Build complex UIs from simple parts
Performance First: 60fps is non-negotiable
Accessibility Always: It’s not optional
Document Everything: Future you will thank you

Time Investment

Design analysis: 1 hour
Token extraction: 1 hour
Core components: 4 hours
Complex patterns: 3 hours
Polish and testing: 3 hours
Total: ~12 hours (vs 40+ traditional)

Next Steps

You’ve mastered UI implementation. Ready for more?

Design Systems

Build a complete design system

Animation Library

Create reusable animation patterns

Component Library

Publish components as npm package

Continue to Test-Driven Development →