Skip to content

Figloo 0.6.0

Choose a tag to compare

@github-actions github-actions released this 07 Oct 04:34
· 10 commits to main since this release

map_tokens maps a design onto the project's own tokens and components. Only the MCP server changed: the extension's code is the same as in 0.5.0, and the bridge protocol is still 0.3.0.

Upgrading

  • Replace the extension with the new zip and press the reload button on its card in chrome://extensions or arc://extensions.
  • Update the Claude Code plugin, or the .mjs file you registered, then start new agent sessions so they run the new server.
  • The extension and the MCP server speak bridge protocol 0.3.0. A pair that speaks different versions does not connect, and get_status reports PROTOCOL_MISMATCH.

Files

File SHA-256
figloo-extension-0.6.0.zip 455e999ec3149825c13b312dfcce54c95f63b9da8ccd2447e367319d1967f972
figloo-mcp-0.6.0.mjs 5906c7d3cc46ab9613c5e83ae8d3482f1f6d187ce01055081cc2784c5fc03b78
figloo-mcp-0.6.0.mcpb a542db96285bcd0618ab606bebdced336a64599524e0e41417d9b8e6350e19d7

Install

  1. Unzip figloo-extension-0.6.0.zip into a folder you keep. On chrome://extensions or arc://extensions, turn on Developer mode, click "Load unpacked", and select that folder.
  2. Register the MCP server. In Claude Code, install the plugin, which downloads figloo-mcp-0.6.0.mcpb from this release:
    /plugin marketplace add g761007/figloo
    /plugin install figloo@figloo
    
    Without the plugin, keep figloo-mcp-0.6.0.mjs anywhere (it needs only Node.js 24), register it, then start a new session:
    claude mcp add -s user figloo -- node /absolute/path/to/figloo-mcp-0.6.0.mjs
  3. Pair once: run node figloo-mcp-0.6.0.mjs pair and paste the token and port into the extension's options page. The plugin's server reads the same ~/.figloo/config.json, so this works for the plugin too.
  4. In Figma, sign in (view access is enough), use the English UI, keep the UI expanded, and turn on "Adapt content for screen readers" under Main menu, Preferences, Accessibility settings. Keep the Figma tab on screen while the agent works.

Or let your agent do it: the README's Quickstart has one sentence to paste into Claude Code or Codex, which installs Figloo by following docs/agent-install.md and walks you through the steps only you can do.

The README has the details, and docs/troubleshooting.md the common problems.

Changes

Added

  • map_tokens puts a saved snapshot's colors, text styles, spacing, and corner radii next to the tokens the project already defines, without the Figma tab: exact matches, near ones with what differs (such as a color difference, an alpha, a pixel, or a weight), and values with none, and it lists project components whose names share an instance's words. It reads CSS custom properties, SCSS and Less variables, design token JSON, theme objects in JavaScript and TypeScript such as a Tailwind config, iOS asset catalogs and Swift, Android resources and Compose, and Flutter, from the project directory or a folder in it, skipping dependencies, build output, hidden folders, tests, and .env files.
  • The figloo-implement skill maps a design onto the project with map_tokens: it uses exact matches, shows near and unmatched values to the user before choosing, and reports the mapping as a table.
  • Workflow evals for the skill, in an unpublished harness under tests/skill-eval/ that answers Figloo's tools from mocks, since claude plugin eval cannot stand in for a server declared through an MCP bundle.