Figma Plugin · MVP

Score, fix, and hand off
right inside Figma.

The DesignAgent Figma plugin evaluates your selection, scores structure and tokens, and crafts developer-ready prompts without leaving Figma. It bridges designers and code with actionable scoring, warnings, and preset-aware prompts.

Get the PluginSee capabilitiesView MCP

What it is

Bridge from Figma to code

The plugin evaluates the current selection, scores its structure and tokens, and crafts developer-ready prompts in-context. It surfaces scoring, warnings, and guidance so handoff to engineering is deterministic, not guesswork.

Who it’s for

  • +Designers and engineers preparing Figma screens/components for handoff
  • +Web handoff: Next.js + Tailwind or HTML/CSS
  • +React Native + NativeWind teams
  • +Apple platforms with SwiftUI
  • +Android teams using Jetpack Compose

What it does

Analyzes, scores, and packages handoff.

Presets & prompts

  • 5 presets: Next.js + Tailwind, React Native + NativeWind, Web HTML/CSS, SwiftUI, Jetpack Compose.
  • Prompt panel with full / short / strict variants, coverage warnings, clipboard copy, and selection-link application.
  • Flow detection respects multi-frame selections and navigation context.

Scoring & fixes

  • Advanced tab breaks down component, tokenization, layout, naming, and variant scores.
  • Issue actions: infer auto-layout, remove absolute positioning, focus the offending node, add DesignAgent annotations.
  • Checklist and skip/fix tracking to keep reviews deterministic.

Spec generation

  • Analyze/extract/score/prompt modules produce a UI spec, checklist, scoring, and prompt bundle.
  • Tailors messaging to the selected preset and mode.

Navigation-aware

  • Flow detection flags multi-frame selections and linked sections.
  • Warnings and prompts respect navigation context for multi-screen flows.

How it works

Under the hood

  • code.ts listens for selection/page changes, caches results, and posts AnalysisPayload to the UI.
  • Core modules (extract, intent, score, prompt) build the UI spec, intent label, warnings, score breakdown, and prompt bundle.
  • ui.tsx renders header, prompt, and advanced panels; handles preset selection, focus-node, annotation, refresh.
  • scripts/build.mjs bundles code/ui via esbuild, inlining the UI bundle into ui.html; manifest points to dist assets.

Preset coverage

  • +Web: Next.js + Tailwind / HTML & CSS
  • +React Native + NativeWind
  • +SwiftUI
  • +Jetpack Compose
  • +Navigation-aware prompts for multi-frame flows

Install / run

Get the plugin running

  1. Install deps: npm install
  2. Build plugin: npm run build (bundles code/ui to dist/code.js and dist/ui.html)
  3. In Figma dev mode, load manifest.json (already points to dist artifacts).

Advanced users: customize presets in PRESET_DEFINITIONS before build.

Ready to ship deterministic handoffs?

Use the Figma plugin for pixel-level validation, then pair it with the MCP server to enforce design rules in code.

Install PluginExplore MCP