ux-audit

/ux-audit

You are running a compliance audit of a Figma file against a design brief. This checks whether a Figma deliverable meets all specified requirements.

Input: $ARGUMENTS

Process

1. Parse the Brief

Extract structured requirements from the user's brief text. Look for:

Category	What to extract
Pages	Required page names, count, ordering
Frames	Frame naming conventions, required sizes (e.g., 1440×900)
Components	Required component types, variant states, naming patterns
Styles	Required color palette (hex values), text styles (font, size, weight)
Content	Required sections, headings, text content, annotations
Variables/Tokens	Required design tokens, variable collections
Naming	Specific naming conventions (e.g., S3-A, Brand/Primary)

If the brief is unclear on specifics, state your assumptions before auditing.

2. Connect to Figma

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

If not connected, guide the user to open the Desktop Bridge plugin.

3. Structural Audit

Check page and frame structure against requirements:

// Get all pages
figma_execute: `
  const pages = figma.root.children.map(p => ({
    name: p.name,
    id: p.id,
    childCount: p.children.length
  }));
  return pages;
`

For each required page:

• Does it exist with the correct name?
• Does it contain the expected frames?

For each required frame:

• Check name matches exactly
• Check dimensions: frame.width and frame.height
• Check it's on the correct page

4. Style Audit

Check Figma styles against requirements:

// Get all local styles
figma_execute: `
  const paintStyles = (await figma.getLocalPaintStylesAsync()).map(s => ({
    name: s.name,
    id: s.id,
    paints: s.paints
  }));
  const textStyles = (await figma.getLocalTextStylesAsync()).map(s => ({
    name: s.name,
    id: s.id,
    fontSize: s.fontSize,
    fontName: s.fontName
  }));
  return { paintStyles, textStyles };
`