Skip to content

v0.11.0

Choose a tag to compare

@github-actions github-actions released this 31 Oct 19:50
d40ccb2

figlens 0.11.0 installs as one plugin in more agents, and closes the steps agents used to do by hand when building a screen: checking the result against the design, finding font files, exporting assets one call at a time, and comparing two frames. Unless noted, each change applies to the CLI and MCP; Pi, OpenCode V2 and OMP pass the same results through.

Install as a plugin

Claude Code, Codex, Antigravity, Cursor and Kimi Code can now install the figlens skill and MCP server together as one plugin. The server is pinned to the plugin's release (npx -y @runkids/figlens@0.11.0 mcp), so the skill never describes tools the server lacks.

claude plugin marketplace add runkids/figlens && claude plugin install figlens@figlens
codex plugin marketplace add runkids/figlens && codex plugin add figlens@figlens

The other hosts' commands are in Plugin setup. A Claude Code install from the release tag was run end to end in an isolated configuration, and Codex loaded the plugin from a local checkout; Antigravity's manifest passed agy plugin validate; the Cursor and Kimi Code manifests follow their published plugin references but were not installed on those hosts.

Check a build against its frame

figlens compare-image <file.fig> <node> <screenshot.png> [--out diff.png] (MCP compare_image) measures a screenshot of the built screen against the frame as figlens renders it, instead of comparing the two by eye. It reports the share of differing pixels, separates text from non-text differences, and lists the largest regions in frame coordinates with the layers under each. --out writes a diff image.

  • A pixel counts as different only when nothing within one CSS pixel of it in the other image is within 48/255 on every channel, so subpixel and anti-aliasing noise stays out. It is not a perceptual metric: a light gray border on off-white is below the threshold; use inspect --colors for exact colors.
  • A region over text layers is marked text: true. That covers font fallback, and also wrong text color, size or copy, so check each text region before you call it font noise.
  • One viewport and one state per screenshot. A screenshot narrower than the frame, or more than 1% shorter, is refused with what to capture instead; a taller one is compared over the frame's height.

Fewer calls to read a screen

  • inspect --full-text (MCP fullText) returns each text layer's complete characters, up to 10,000, instead of a 200-character preview. inspect --colors (MCP colors) adds each layer's solid fills as hex, with the bound variable's name. Both work with --flat. Gradients, images, strokes and effects are not included.
  • inspect <file> <nodeA> --compare <nodeB> (MCP compare) compares any two nodes that are not nested in each other, such as an empty and a filled state or a mobile and a desktop frame, with the same field list and limits as --compare-variant. It adds rootDelta (size and position change of the two roots) and a reason for each unpaired node.
  • export <file.fig> --batch items.json (MCP export_batch) exports up to 64 nodes in one call and returns one manifest with each file's size, layout and render boxes and warnings. A bad item or path fails the whole call before anything is written; a missing node or an over-budget item is reported per item while the others are written.

Fonts and tokens

  • verify looks for each design font face in the project and the system font folders and marks it local_file with the matching paths, or unverified. With --fonts <dir> (MCP fonts), a match inside that folder also gets a ready @font-face rule with a relative src. Nothing is copied or downloaded, and a found file is not a browser check: font licensing and rendering are still yours to confirm.
  • variables --format dtcg exports an alias into another collection, such as a Light/Dark collection that aliases primitives. Before, the whole export failed with cross_collection_alias. The token gets the resolved value and records the target in $extensions.org.figlens.aliasOf. When the target collection has several modes, choose one with --alias-mode COLLECTION=MODE (MCP aliasModes).

Measure a layer's share of an export

export <file> <node> <out> --hide ID[,ID] (MCP hide) renders the node with those layers hidden, over the same area. Diffing it with the normal export shows where that layer, as figlens draws it, changes the result. For a warned image adjustment figlens cannot draw, this shows how much of the layer reaches the export; it does not measure the adjustment itself.

Agent guidance

/figlens yolo runs keep their exports in their own directory and, after a verified success, delete everything there except the verification record and the final screenshot; they also stop the servers and browsers they started. The build guidance now uses compare-image for the visual check, and a single-screen build loads only the guidance it needs.

Verification

Each change has unit tests. The full Rust, npm and docs checks and the installation lanes passed on the merged main. Token export, --hide, --compare and compare-image were also checked on private designs; the measured numbers are in the pull requests.

Update

Script installs: figlens update. Homebrew: brew upgrade figlens. Plugin installs: update the plugin in your host. For Pi, OpenCode V2 and OMP, update @runkids/figlens through your host and restart it so its tools and skill match the binary.

Full changelog