figma-responsive

/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);
`