/figma-responsive

description: "Generate mobile and tablet variants from a desktop Figma wireframe — adapts layout, reflowing content for smaller breakpoints."
argument-hint: "[frame name or node ID] [breakpoints: mobile, tablet, or both]"
allowed-tools: ["Read", "Write", "Edit", "Bash", "Glob", "Grep", "mcp__*"]

/figma-responsive

You are generating **responsive breakpoint variants** from an existing desktop Figma frame. This takes a 1440px (or similar) desktop design and creates mobile (375×812) and/or tablet (768×1024) adaptations directly in Figma.

Input: **$ARGUMENTS**

Read `${CLAUDE_PLUGIN_ROOT}/skills/design/references/figma-creation.md` for the Figma API patterns and `${CLAUDE_PLUGIN_ROOT}/skills/design/references/ui-designer.md` for responsive design principles.

Process

1. Connect & Identify Source Frame

figma_get_status → verify Desktop Bridge connection

Find the source desktop frame:

• If user gave a node ID: `figma.getNodeByIdAsync(id)`
• If user gave a frame name: search for it
• If neither: ask which frame to adapt

figma_execute: `
  const frame = await figma.getNodeByIdAsync('SOURCE_ID');
  return {
    name: frame.name,
    width: frame.width,
    height: frame.height,
    layoutMode: frame.layoutMode,
    childCount: frame.children.length,
    children: frame.children.map(c => ({
      name: c.name,
      type: c.type,
      width: c.width,
      height: c.height,
      layoutMode: c.layoutMode,
      layoutSizingH: c.layoutSizingHorizontal,
      layoutSizingV: c.layoutSizingVertical
    }))
  };
`

Screenshot the source for reference:

figma_capture_screenshot(sourceFrameId) → desktop reference

2. Analyze Layout Structure

Map the source frame's layout hierarchy to understand what needs to adapt:

figma_execute: `
  async function mapLayout(node, depth = 0) {
    const info = {
      name: node.name,
      type: node.type,
      layout: node.layoutMode || 'NONE',
      sizing: { h: node.layoutSizingHorizontal, v: node.layoutSizingVertical },
      dimensions: { w: Math.round(node.width), h: Math.round(node.height) },
      spacing: node.itemSpacing,
      padding: node.paddingLeft ? { l: node.paddingLeft, r: node.paddingRight, t: node.paddingTop, b: node.paddingBottom } : null,
      childCount: node.children?.length || 0,
      children: []
    };
    if ('children' in node && depth < 3) {
      for (const child of node.children) {
        info.children.push(await mapLayout(child, depth + 1));
      }
    }
    return info;
  }
  const source = await figma.getNodeByIdAsync('SOURCE_ID');
  return await mapLayout(source);
`

3. Plan Responsive Adaptations

Based on the layout analysis, plan how each section adapts:

Common Responsive Patterns

| Desktop Pattern | Mobile Adaptation | Tablet Adaptation | |----------------|-------------------|-------------------| | **Multi-column grid** (3-col) | Single column, stacked | 2-column grid | | **Sidebar + content** | Sidebar collapses to top tabs or hidden | Narrower sidebar or collapsible | | **Horizontal nav** | Hamburger menu or bottom tab bar | Horizontal nav (may truncate) | | **Large hero text** | Scale down 60-70% | Scale down 80-85% | | **Card grid** (3-col, 440px) | Single card, full width | 2-col grid | | **Side-by-side panels** | Stacked vertically | Stacked or 60/40 split | | **Fixed-width elements** | Switch to FILL container | Keep fixed or switch to FILL | | **Horizontal filter row** | Wrap or horizontal scroll | Wrap to 2 rows | | **Action button row** | Stack vertically or full-width | Keep horizontal |

State the adaptation plan before building.

4. Define Breakpoints

| Breakpoint | Frame Size | Name Suffix | |------------|-----------|-------------| | Desktop (source) | 1440×900 | (already exists) | | Tablet | 768×1024 | `[name] / Tablet` | | Mobile | 375×812 | `[name] / Mobile` |

5. Build Tablet Variant (768×1024)

figma_execute: `
  const source = await figma.getNodeByIdAsync('SOURCE_ID');
  const parent = source.parent;

  // Clone the desktop frame
  const tablet = source.clone();
  tablet.name = source.name.replace(/\s*\/?\s*$/, '') + ' / Tablet';

  // Position next to source
  tablet.x = source.x + source.width + 80;
  tablet.y = source.y;

  // Resize to tablet
  tablet.resize(768, 1024);

  return { id: tablet.id, name: tablet.name, width: tablet.width, height: tablet.height };
`

Then adapt the layout:

• Reduce multi-column grids from 3→2 columns
• Shrink sidebar widths (e.g., 400→280px)
• Reduce horizontal padding (40→24px)
• Scale down spacing proportionally
• Adjust font sizes for heading levels if needed
• Switch FIXED-width children to FILL where appropriate

Validate with screenshot after each major change.

6. Build Mobile Variant (375×812)

figma_execute: `
  const source = await figma.getNodeByIdAsync('SOURCE_ID');

  // Clone
  const mobile = source.clone();
  mobile.name = source.name.replace(/\s*\/?\s*$/, '') + ' / Mobile';

  // Position next to tablet (or source if no tablet)
  mobile.x = source.x + source.width + 80 + 768 + 80;
  mobile.y = source.y;

  // Resize to mobile
  mobile.resize(375, 812);

  return { id: mobile.id, name: mobile.name, width: mobile.width, height: mobile.height };
`

Mobile-specific adaptations:

• **All grids → single column** (stack vertically)
• **Sidebar → collapsed** (hidden or moved to top as tabs/accordion)
• **Navigation → simplified** (hamburger, bottom bar, or simplified header)
• **Padding → 16px** (standard mobile padding)
• **Font scale down**: Heading/L 24→20px, Heading/S 16→14px, Body stays 14px
• **Cards → full width** (`layoutSizingHorizontal = 'FILL'`)
• **Buttons → full width** (touch-friendly, 48px min height)
• **Remove or stack horizontal layouts** that don't fit 375px
• **Truncate long text** where needed

7. Responsive-Specific Element Handling

Navigation

// Desktop: full nav bar
// Mobile: sim