component-docs

/component-docs

You are generating component documentation from Figma component sets. This creates Storybook-style reference docs with visual examples, prop tables, usage guidelines, and code snippets.

Input: $ARGUMENTS

Read ${CLAUDE_PLUGIN_ROOT}/skills/design/references/design-system-lead.md for token/component architecture and ${CLAUDE_PLUGIN_ROOT}/skills/design/references/figma-creation.md for Figma API patterns.

Process

1. Connect & Identify Components

figma_get_status → verify Desktop Bridge connection

Find all component sets in the file:

figma_execute: `
  await figma.loadAllPagesAsync();
  const sets = figma.root.findAllWithCriteria({ types: ['COMPONENT_SET'] });
  const components = figma.root.findAllWithCriteria({ types: ['COMPONENT'] })
    .filter(c => c.parent?.type !== 'COMPONENT_SET');

  return {
    componentSets: sets.map(cs => ({
      id: cs.id,
      name: cs.name,
      variantCount: cs.children.length,
      variants: cs.children.map(v => v.name),
      properties: cs.componentPropertyDefinitions
        ? Object.entries(cs.componentPropertyDefinitions).map(([key, def]) => ({
            name: key.split('#')[0],
            type: def.type,
            defaultValue: def.defaultValue,
            variantOptions: def.variantOptions
          }))
        : [],
      description: cs.description,
      page: cs.parent?.parent?.name || cs.parent?.name
    })),
    standaloneComponents: components.map(c => ({
      id: c.id,
      name: c.name,
      description: c.description,
      page: c.parent?.parent?.name || c.parent?.name
    }))
  };
`

2. Extract Component Details

For each component set, gather detailed specs:

Visual Specs

figma_execute: `
  const cs = await figma.getNodeByIdAsync('COMPONENT_SET_ID');
  const variants = cs.children.map(v => {
    const texts = v.findAllWithCriteria({ types: ['TEXT'] });
    return {
      name: v.name,
      width: Math.round(v.width),
      height: Math.round(v.height),
      layoutMode: v.layoutMode,
      padding: v.paddingLeft ? {
        top: v.paddingTop, right: v.paddingRight,
        bottom: v.paddingBottom, left: v.paddingLeft
      } : null,
      itemSpacing: v.itemSpacing,
      cornerRadius: v.cornerRadius,
      fills: v.fills?.map(f => {
        if (f.type === 'SOLID') {
          const c = f.color;
          return '#' + [c.r, c.g, c.b].map(x => Math.round(x * 255).toString(16).padStart(2, '0')).join('');
        }
        return f.type;
      }),
      textContent: texts.map(t => ({
        text: t.characters?.substring(0, 50),
        fontSize: t.fontSize,
        fontWeight: t.fontName?.style
      }))
    };
  });
  return variants;
`