# Figma Community Design Export

> 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.

- Skill: `akhil-code/figma-community-design-export` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add akhil-code/figma-community-design-export`
- Raw SKILL.md: https://api.skillmd.com/api/skills/akhil-code/figma-community-design-export/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: akhil-code (https://skillmd.com/u/akhil-code)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/akhil-code/figma-community-design-export

---


# 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

1. Use the **community Figma MCP** namespace `user-figma-community` (desktop plugin bridge), unless the user explicitly names another Figma MCP.
2. Deliver **editable layers** (frames / rects / text). A screenshot or single image is not the design.
3. Use the **exact** frame size the user specifies.
4. Match the real page: layout, colors, typography, and content — from the live page and/or its source code.
5. Keep the Figma desktop plugin panel **open and Connected** for the whole session.

## Preconditions

1. Discover tools: `GetDynamicTools` on `user-figma-community`.
2. 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
3. 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.

1. Build **one** correct item matching the real component (chrome, typography, meta, badges, icons).
2. Reuse an existing matching template in the Figma file when available.
3. `clone-node` per item; `set-parent-id` into the list/grid container.
4. 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](reference.md)