How it works

From a Figma frame to a passing build, in four steps.

Each step has one job and hands a file to the next. Nothing is uploaded and nothing is guessed.

  1. 01

    Export from Figma

    Figma plugin · about 1 minute

    Select screens or a section and run the plugin. It reads an explicit list of properties through the Figma Plugin API and writes one folder: a compact outline per screen, the full node tree, shared components, tokens, assets and reference screenshots. Every file carries a SHA-256 hash.

    f2f validate f2f
  2. 02

    Build a brief for your agent

    CLI · under a second

    The CLI scans your repository read-only. It never opens .env or key files. It matches Figma components to your widgets, Figma colours and text styles to your tokens, and lists what to reuse, what to create, which assets to copy and which questions are still open.

    f2f build --feature "Sidebar" --repo .
  3. 03

    Let your AI agent implement

    Your editor · agent time

    The agent reads the brief (about 4k tokens for five pages) and each screen outline once; it never opens the larger JSON files. It writes the screens using your existing code and tags each element with its Figma id so it can be measured.

    Read f2f/briefs/sidebar.md and follow it: implement the screens, tag the layers, run f2f verify and fix until it passes.
  4. 04

    Verify against the design

    CLI · about 5 seconds on web

    Verify measures the running app in Chrome or Edge, on an Android emulator, on an iOS simulator or in a Flutter host test. It compares every tagged box with Figma and writes a PASS/FAIL report, plus an app screenshot and a red-pixel diff image on web.

    f2f verify --screen 363 --url http://localhost:3000/profile

What verify checks

  • Geometry

    x, y, width and height of every tagged layer, relative to the screen root, ±1 px by default.

  • Style

    On web: computed font family, weight, italic, size, text colour, background and corner radius against the Figma values, plus fonts the browser fakes because their file is not loaded.

  • Small screen

    On web: the page is loaded again at 375 px and fails if it scrolls sideways or cuts off text or images.

  • Code rules

    Your source is scanned for Figma ids built with string maths and raw two-decimal sizes copied from Figma.

  • Overflow

    Text that is clipped.

  • Coverage

    Figma layers with no tag in your code, so nothing goes unmeasured silently.

  • Font metrics

    Text drawn about 2 px narrower or wider by the browser, and the neighbours it nudges sideways, are warnings, not layout failures.

  • Visual diff

    On web: a pixel diff against the Figma screenshot that ignores edge-only anti-aliasing; a hint for images and icons.

Style and small-screen checks run on web. On Android and iOS, colours and fonts are not compared as numbers yet; check them by eye.