@clovis500c/figma-bridge 1.5.0 → 1.8.0

package/README.md

@@ -15,10 +15,12 @@ and any other MCP client.
 ## Features
 
 - **Build whole layouts in one call** from a JSON spec: auto-layout and grid, rich text, icons, images, component sets with variants and properties, prototype links.
-- **Write the design system**: variables with Light/Dark modes and styles, from simple JSON, W3C design tokens or a Tailwind theme.
+- **Import any website or HTML** as editable auto-layout frames, one per viewport ([details](docs/import-web.md)).
+- **Round-trip the design system**: write variables with Light/Dark modes and styles from JSON, W3C tokens or Tailwind; export them to DTCG, CSS, Tailwind v3/v4, SCSS or TypeScript ([details](docs/design-system.md)).
+- **Score and fix design system health**: token coverage, contrast, text styles, detached instances, duplicates, naming, with safe automatic fixes.
 - **Read existing designs** compactly, search every page, and reuse the file's design system.
 - **Check its own work** with screenshots, a design audit, and a pixel diff against a mockup.
-- **Hand off**: Dev Mode annotations and export to HTML or React (CSS or Tailwind).
+- **Hand off to your codebase**: export a frame into your project with its own components, tokens and stack (React, Next, Vue, Svelte, React Native; Tailwind, CSS modules, styled-components; shadcn, MUI, Chakra) ([details](docs/export-code.md)), plus Dev Mode annotations.
 - **200 000+ icons** through Iconify, checkpoints to roll back, and a library of reusable scripts.
 - **Zero-friction connection**: the plugin connects and reconnects on its own. Each AI command is one Ctrl+Z step, and you can cancel it from the plugin.
 
@@ -104,6 +106,8 @@ Keep the plugin open (the **—** button collapses it to a thin bar) and ask you
 
 > Create our design system from `tokens.json` (Light and Dark modes), then rebuild the selected screen with those variables and show it in Dark mode.
 
+> Import https://example.com/pricing at desktop and mobile widths, then rename the layers and swap the fonts for ours.
+
 > Reproduce `C:\mockups\dashboard.png` as an editable frame with auto-layout, compare it with the screenshot and fix the differences.
 
 When your agent needs you to point at something, the plugin shows **Your agent is waiting** until you select it.
@@ -117,18 +121,19 @@ To reopen the plugin later, use **Ctrl+Alt+P** or the **Figma Bridge** button in
 | Tool | Purpose |
 |---|---|
 | `build` | Create a layout from a JSON spec in one call: grid, rich text, variants, reactions |
+| `import_web` | Rebuild a website or HTML as editable layers, one frame per viewport |
 | `run_script` | Run any Figma Plugin API code |
 | `describe` | Compact outline of existing layers |
 | `find` | Search layers on every page by name, text, type, style or component |
 | `get_design_system` | Local styles, variables and components |
-| `design_tokens` | Create or update variables (with modes) and styles from JSON, W3C tokens or Tailwind |
-| `audit` | Lint for contrast, overflow, fonts, spacing and naming |
+| `design_tokens` | Write variables (with modes) and styles from JSON, W3C tokens or Tailwind; export them to DTCG, CSS, Tailwind, SCSS or TS |
+| `audit` | Lint layers, score the design system's health, and apply safe fixes |
 | `screenshot` | Export a layer to an image (optionally shown to the agent) |
 | `compare` | Pixel-diff a layer against a reference image, with a heatmap |
 | `wait_for_selection` | Ask the user to select layers and wait for it |
 | `prototype` | Link frames (click, hover, transitions) and set flow starting points |
 | `annotate` | Add, list or clear Dev Mode annotations |
-| `export_code` | Export a frame to HTML or React, with CSS or Tailwind |
+| `export_code` | Export a frame to code; with `projectPath`, code that uses the project's components and tokens |
 | `insert_icon` · `search_icons` | Iconify icons as editable vectors |
 | `place_image` · `import_svg` | Images from disk or URL, SVG as vectors |
 | `checkpoint` | Save layers and restore them later |
@@ -147,6 +152,7 @@ Each tool describes its parameters to the agent, which needs no extra instructio
 | **Version mismatch** | The plugin and the server come from different releases: reopen the plugin, or update both. |
 
 Logs, screenshots, comparison heatmaps and exported code are written to `%TEMP%\figma-bridge`.
+`import_web` uses your installed Chrome or Edge; set `FIGMA_BRIDGE_BROWSER` to use another Chromium-based browser.
 
 ## Development
 
@@ -154,12 +160,13 @@ Logs, screenshots, comparison heatmaps and exported code are written to `%TEMP%\
 bun install       # also builds the plugin and dist/server.js
 bun run build     # plugin/code.ts → plugin/code.js, src/cli.ts → dist/server.js (Node)
 bun run check     # type-check server and plugin, reject syntax Figma cannot run
-bun test          # unit tests (bridge, setup, schemas, tokens, code generation)
+bun test          # unit tests (bridge, setup, schemas, tokens, code generation, web import)
 bun run test      # end-to-end test against an open Figma file
 ```
 
 To release, change `version` in `package.json`, then run **Actions → Release → Run workflow** on `main`: it publishes to
 npm and creates the GitHub release.
 
-Options: `FIGMA_BRIDGE_PORT` (default `3055`), `FIGMA_BRIDGE_CHANNEL`, `FIGMA_BRIDGE_OUT`, `FIGMA_BRIDGE_SNIPPETS`.
+Options: `FIGMA_BRIDGE_PORT` (default `3055`), `FIGMA_BRIDGE_CHANNEL`, `FIGMA_BRIDGE_OUT`, `FIGMA_BRIDGE_SNIPPETS`,
+`FIGMA_BRIDGE_BROWSER`.
 The server listens on `127.0.0.1` only, and browsers can't send it commands.