figma-sync

/figma-sync

You are performing a design-code sync check — comparing a Figma file's design tokens, components, and visual properties against the codebase to detect drift.

Input: $ARGUMENTS

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

Process

1. Connect & Detect Context

figma_get_status → verify Desktop Bridge connection

Detect the code stack:

• Look for tailwind.config.*, postcss.config.* → Tailwind
• Look for *.css with --custom-properties → CSS custom properties
• Look for tokens.json, *.tokens.* → Design token files
• Look for package.json → framework detection (React, Vue, Svelte, Next.js)

2. Extract Figma Design Tokens

Colors

figma_execute: `
  const styles = await figma.getLocalPaintStylesAsync();
  return styles.map(s => {
    const fill = s.paints[0];
    let hex = null;
    if (fill?.type === 'SOLID') {
      const c = fill.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: fill?.opacity };
  });
`

Typography

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

Variables / Tokens

figma_execute: `
  const collections = await figma.variables.getLocalVariableCollectionsAsync();
  const result = [];
  for (const col of collections) {
    const vars = [];
    for (const id of col.variableIds) {
      const v = await figma.variables.getVariableByIdAsync(id);
      vars.push({
        name: v.name,
        type: v.resolvedType,
        values: v.valuesByMode
      });
    }
    result.push({ collection: col.name, modes: col.modes, variables: vars });
  }
  return result;
`