design-handoff

/design-handoff

You are generating a developer handoff document from a Figma file. This bridges the gap between design and engineering by extracting everything a developer needs to implement the design accurately.

Input: $ARGUMENTS

Process

1. Connect & Identify Target

figma_get_status → verify connection
figma_get_file_data(depth: 1, verbosity: 'summary') → get file overview

If the user provided a Figma URL, parse the file key and node ID. If they said "current file", use the active file. If not connected, guide Desktop Bridge setup.

Identify which screens/pages to generate handoff for. If unspecified, generate for all hi-fi screens.

2. Extract Design System Foundations

Color Tokens

figma_execute: `
  const paintStyles = (await figma.getLocalPaintStylesAsync()).map(s => {
    const paint = s.paints[0];
    let hex = '';
    if (paint?.type === 'SOLID') {
      const c = paint.color;
      hex = '#' + [c.r, c.g, c.b].map(v => Math.round(v * 255).toString(16).padStart(2, '0')).join('');
    }
    return { name: s.name, hex, opacity: paint?.opacity ?? 1 };
  });
  return paintStyles;
`

Map each token to CSS custom property format:

--color-primary: #2f49d8;
--color-primary-light: #eef1fb;
--color-background: #fffcf7;
--color-surface: #ffffff;
--color-text-primary: #0a1020;

Typography Scale

figma_execute: `
  const textStyles = (await figma.getLocalTextStylesAsync()).map(s => ({
    name: s.name,
    fontFamily: s.fontName.family,
    fontWeight: s.fontName.style,
    fontSize: s.fontSize,
    lineHeight: s.lineHeight,
    letterSpacing: s.letterSpacing
  }));
  return textStyles;
`

Map to CSS/Tailwind:

/* Heading/L */
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 32px;

3. Extract Component Specifications

For each component set in the file:

figma_execute: `
  await figma.loadAllPagesAsync();
  const sets = figma.root.findAllWithCriteria({ types: ['COMPONENT_SET'] });
  return sets.map(cs => ({
    name: cs.name,
    id: cs.id,
    variants: cs.children.map(v => ({
      name: v.name,
      width: v.width,
      height: v.height,
      padding: { top: v.paddingTop, right: v.paddingRight, bottom: v.paddingBottom, left: v.paddingLeft },
      itemSpacing: v.itemSpacing,
      cornerRadius: v.cornerRadius,
      layoutMode: v.layoutMode
    }))
  }));
`