Figma Community Design Export
Rebuild any web UI in Figma as editable frames, rectangles, and text — never paste a screenshot as the design.
Required inputs
Collect from the user (or URL/context) before building:
| Input |
Required |
Notes |
| Source URL or page path |
Yes |
Any local or remote page |
| Target Figma file URL |
Yes |
Include node-id for the destination page/frame when given |
| Frame width × height |
Yes |
Exact pixels; do not invent or “approximate” |
| Theme / variant |
No |
e.g. dark/light; infer from the page if omitted |
| Frame name |
No |
Default: {Page} | {Route} | {Theme} |
If width/height are missing, ask once. Do not proceed with a guessed size.
Non-negotiables
- Use the community Figma MCP namespace
user-figma-community (desktop plugin bridge), unless the user explicitly names another Figma MCP.
- Deliver editable layers (frames / rects / text). A screenshot or single image is not the design.
- Use the exact frame size the user specifies.
- Match the real page: layout, colors, typography, and content — from the live page and/or its source code.
- Keep the Figma desktop plugin panel open and Connected for the whole session.
Preconditions
- Discover tools:
GetDynamicTools on user-figma-community.
- Verify connection with
get-pages or get-selection. If it times out:
- Ask the user to open the target file in Figma Desktop
- Run Plugins → Development → Figma MCP Server (or import the local plugin manifest)
- Wait for Connected to MCP server and keep the panel open
- Retry only after they confirm
- Inspect the source page. Prefer this order:
- Live page (browser snapshot / computed styles) when reachable
- App components + CSS/design tokens for structure and styles
- Fixture / API / CMS data for visible copy
- If localhost/browser fails, rebuild from code — do not stall
Workflow
Export progress:
- [ ] Inputs confirmed (URL, Figma file, exact WxH)
- [ ] MCP connected
- [ ] Source UI mapped (layout + styles + content)
- [ ] Root frame created at exact WxH
- [ ] Shell built (nav / header / main / whatever the page has)
- [ ] Sections built as editable layers
- [ ] Repeated items cloned from a real row/card template
- [ ] Size and structure verified
1. Map the source UI
Extract from the page and/or codebase:
- Regions and measurements (sidebar, header, content width, gaps, radii)
- Colors as 8-digit hex
#RRGGBBAA (from computed styles or CSS variables)
- Font family / size / weight / color
- Visible content (labels, stats, lists, badges, images as placeholders if needed)
Mirror the page’s actual structure — do not force a fixed “dashboard” shell onto unrelated pages.
2. Create the root frame
create-frame with exact width / height and a clear name- Parse Figma URL
node-id=A-B → MCP id A:B for the parent page/section
- Place beside existing art when the canvas already has content; do not overwrite without asking
set-fill-color for the page background from the source UI
3. Build nested editable structure
Prefer frames for sections; rectangles for accents/bars; text for all copy.
| Tool |
Use for |
create-frame |
Sections, cards, rows |
create-rectangle |
Accents, bars, indicators |
create-text |
Visible copy |
set-fill-color / set-stroke-color |
Surfaces and borders (#RRGGBBAA) |
set-corner-radius |
Radii from the page |
set-layout |
Auto-layout; omit clip if the call fails |
resize-node / move-node |
Size and position |
clone-node + set-parent-id |
Repeated UI (rows, chips, cards) |
get-node-info |
Inspect children / layout after edits |
delete-node |
Remove wrong or placeholder layers |
4. Repeated items (lists, tables, card grids)
Do not fake repeats as a flat stack of title lines.
- Build one correct item matching the real component (chrome, typography, meta, badges, icons).
- Reuse an existing matching template in the Figma file when available.
clone-node per item; set-parent-id into the list/grid container.- Update each clone’s text and variant styles (e.g. status colors).
Text updates: no set-text. delete-node the old text → create-text into the same parent.
Auto-layout order: new children append last. For SPACE_BETWEEN rows (e.g. meta left, actions right), ensure child order is [left, right]. If a new node landed on the wrong side: remove the right group → keep/create left → re-parent the right group.
5. Verify
- Root frame is exactly the requested width × height
- Layers named and grouped like the UI
- Lists/grids use real item frames, not flat text
- Report frame name, node id, and Figma link when done
Anti-patterns
- Screenshot / full-page
create-image as the “design”
- Guessing frame size
- Flat text instead of real list/card rows
- Hard-coding one product’s layout, colors, or data as defaults
- Assuming MCP works without the desktop plugin connected
- Passing
clip to set-layout when it errors — retry without it
- Leaving every clone with identical copy/styles
Additional resources
- MCP quirks and ID/color notes: reference.md
1---2name: figma-community-design-export3description: Export any live web page into an editable Figma design using the Figma community MCP (user-figma-community / antonytm figma-mcp-server), not screenshots. Use when the user asks to export a URL or UI into Figma, rebuild a page as editable frames/text/rects, or fix Figma layers to match an app.4---56# Figma Community Design Export78Rebuild any web UI in Figma as **editable** frames, rectangles, and text — never paste a screenshot as the design.910## Required inputs1112Collect from the user (or URL/context) before building:1314| Input | Required | Notes |15|-------|----------|--------|16| Source URL or page path | Yes | Any local or remote page |17| Target Figma file URL | Yes | Include `node-id` for the destination page/frame when given |18| Frame width × height | Yes | Exact pixels; do not invent or “approximate” |19| Theme / variant | No | e.g. dark/light; infer from the page if omitted |20| Frame name | No | Default: `{Page} \| {Route} \| {Theme}` |2122If width/height are missing, ask once. Do not proceed with a guessed size.2324## Non-negotiables25261. Use the **community Figma MCP** namespace `user-figma-community` (desktop plugin bridge), unless the user explicitly names another Figma MCP.272. Deliver **editable layers** (frames / rects / text). A screenshot or single image is not the design.283. Use the **exact** frame size the user specifies.294. Match the real page: layout, colors, typography, and content — from the live page and/or its source code.305. Keep the Figma desktop plugin panel **open and Connected** for the whole session.3132## Preconditions33341. Discover tools: `GetDynamicTools` on `user-figma-community`.352. Verify connection with `get-pages` or `get-selection`. If it times out:36 - Ask the user to open the target file in **Figma Desktop**37 - Run **Plugins → Development → Figma MCP Server** (or import the local plugin manifest)38 - Wait for **Connected to MCP server** and keep the panel open39 - Retry only after they confirm403. Inspect the source page. Prefer this order:41 - Live page (browser snapshot / computed styles) when reachable42 - App components + CSS/design tokens for structure and styles43 - Fixture / API / CMS data for visible copy44 - If localhost/browser fails, rebuild from code — do not stall4546## Workflow4748```49Export progress:50- [ ] Inputs confirmed (URL, Figma file, exact WxH)51- [ ] MCP connected52- [ ] Source UI mapped (layout + styles + content)53- [ ] Root frame created at exact WxH54- [ ] Shell built (nav / header / main / whatever the page has)55- [ ] Sections built as editable layers56- [ ] Repeated items cloned from a real row/card template57- [ ] Size and structure verified58```5960### 1. Map the source UI6162Extract from the page and/or codebase:6364- Regions and measurements (sidebar, header, content width, gaps, radii)65- Colors as 8-digit hex `#RRGGBBAA` (from computed styles or CSS variables)66- Font family / size / weight / color67- Visible content (labels, stats, lists, badges, images as placeholders if needed)6869Mirror the page’s actual structure — do not force a fixed “dashboard” shell onto unrelated pages.7071### 2. Create the root frame7273- `create-frame` with exact `width` / `height` and a clear name74- Parse Figma URL `node-id=A-B` → MCP id `A:B` for the parent page/section75- Place beside existing art when the canvas already has content; do not overwrite without asking76- `set-fill-color` for the page background from the source UI7778### 3. Build nested editable structure7980Prefer frames for sections; rectangles for accents/bars; text for all copy.8182| Tool | Use for |83|------|---------|84| `create-frame` | Sections, cards, rows |85| `create-rectangle` | Accents, bars, indicators |86| `create-text` | Visible copy |87| `set-fill-color` / `set-stroke-color` | Surfaces and borders (`#RRGGBBAA`) |88| `set-corner-radius` | Radii from the page |89| `set-layout` | Auto-layout; **omit `clip` if the call fails** |90| `resize-node` / `move-node` | Size and position |91| `clone-node` + `set-parent-id` | Repeated UI (rows, chips, cards) |92| `get-node-info` | Inspect children / layout after edits |93| `delete-node` | Remove wrong or placeholder layers |9495### 4. Repeated items (lists, tables, card grids)9697Do **not** fake repeats as a flat stack of title lines.98991. Build **one** correct item matching the real component (chrome, typography, meta, badges, icons).1002. Reuse an existing matching template in the Figma file when available.1013. `clone-node` per item; `set-parent-id` into the list/grid container.1024. Update each clone’s text and variant styles (e.g. status colors).103104**Text updates:** no `set-text`. `delete-node` the old text → `create-text` into the same parent.105106**Auto-layout order:** new children append last. For `SPACE_BETWEEN` rows (e.g. meta left, actions right), ensure child order is `[left, right]`. If a new node landed on the wrong side: remove the right group → keep/create left → re-parent the right group.107108### 5. Verify109110- Root frame is exactly the requested width × height111- Layers named and grouped like the UI112- Lists/grids use real item frames, not flat text113- Report frame name, node id, and Figma link when done114115## Anti-patterns116117- Screenshot / full-page `create-image` as the “design”118- Guessing frame size119- Flat text instead of real list/card rows120- Hard-coding one product’s layout, colors, or data as defaults121- Assuming MCP works without the desktop plugin connected122- Passing `clip` to `set-layout` when it errors — retry without it123- Leaving every clone with identical copy/styles124125## Additional resources126127- MCP quirks and ID/color notes: [reference.md](reference.md)128
akhil-code