figma-prototype

/figma-prototype

You are creating interactive prototype connections in Figma — linking screens together with transitions, defining clickable hotspots, and setting up navigable user flows.

Input: $ARGUMENTS

Read ${CLAUDE_PLUGIN_ROOT}/skills/design/references/figma-creation.md for Figma API patterns and ${CLAUDE_PLUGIN_ROOT}/skills/design/references/ux-designer.md for user flow design.

Process

1. Connect & Survey Screens

figma_get_status → verify Desktop Bridge connection

Get all top-level frames that could be screens:

figma_execute: `
  await figma.loadAllPagesAsync();
  const pages = figma.root.children.map(p => ({
    name: p.name,
    frames: p.children
      .filter(c => c.type === 'FRAME' && c.width >= 300 && c.height >= 400)
      .map(f => ({
        id: f.id,
        name: f.name,
        width: Math.round(f.width),
        height: Math.round(f.height)
      }))
  }));
  return pages;
`

2. Identify Interactive Elements

For each screen, find elements that should be clickable:

figma_execute: `
  const frame = await figma.getNodeByIdAsync('FRAME_ID');
  const interactive = [];

  function scan(node) {
    const name = node.name.toLowerCase();
    const isInteractive =
      name.includes('button') || name.includes('btn') ||
      name.includes('link') || name.includes('cta') ||
      name.includes('nav') || name.includes('tab') ||
      name.includes('menu') || name.includes('card') ||
      name.includes('icon') || name.includes('arrow') ||
      name.includes('back') || name.includes('close') ||
      name.includes('next') || name.includes('prev') ||
      node.type === 'INSTANCE';

    if (isInteractive && node.width > 20 && node.height > 20) {
      interactive.push({
        id: node.id,
        name: node.name,
        type: node.type,
        width: Math.round(node.width),
        height: Math.round(node.height),
        x: Math.round(node.absoluteTransform[0][2]),
        y: Math.round(node.absoluteTransform[1][2])
      });
    }
    if ('children' in node && node.type !== 'INSTANCE') {
      node.children.forEach(scan);
    }
  }
  frame.children.forEach(scan);
  return { screen: frame.name, interactiveElements: interactive.slice(0, 30) };
`