Connect a Figma account to read designs — node tree, auto-layout, Variables and styles — and convert frames or components into native WordPress via the figma-pro skill. Read-only (v1); pixel-diff verified.
A screenshot tells an agent what a design looks like. The Figma file tells it what the design means — auto-layout, Variables, styles and the node tree behind them.
Frames, components and their nesting, read from the file rather than inferred from an image.
Direction, spacing and alignment become real layout rules instead of guessed margins.
Design tokens are read as tokens, so output maps to your system rather than hard-coded values.
Frames become native builder output through the figma-pro skill, not an exported image.
Conversion is checked against the source frame rather than declared done.
Version 1 never writes to your Figma file. The design stays the designer's.
Point the agent at a Figma frame and it reads the file itself — structure, tokens and layout — then builds the equivalent in WordPress.
Turn an approved frame into a real page in your builder, not a screenshot.
Map Figma Variables onto the design system the site already uses.
Compare what was designed with what was built, and find where they drifted.
Read a component set and rebuild it as reusable pieces in WordPress.
The NibWP Figma integration connects a Figma account to any MCP-compatible AI agent — Claude, Cursor, Claude Code and others — and makes the design file itself readable: node tree, auto-layout, Variables and styles.
This is the difference between an agent that has seen a design and an agent that understands one. Auto-layout describes intent — this row is spaced, this column is centerd — and Variables describe a system. Read those and the output maps onto your design tokens instead of hard-coding numbers that only happen to match.
Version 1 never writes back to Figma. It reads the design and builds in WordPress, and the conversion is pixel-diff verified against the source frame rather than assumed correct.
| Tool | Type | What it does |
|---|---|---|
| nibwp/figma-pull | read | Pull a file or frame into the working context. |
| nibwp/figma-list | read | List files, pages and frames available to the connected account. |
| nibwp/figma-get | read | Read one node with its properties and children. |
| nibwp/figma-pro-fetch | read | Fetch a frame with the detail conversion needs — layout, tokens, styles. |
| nibwp/figma-pro-analyze | read | Analyze structure before building anything. |
| nibwp/figma-pro-detect-builder | read | Work out which builder the site uses, so output is native to it. |
| nibwp/figma-pro-convert | write | Convert a frame or component into native WordPress output. |
No. Figma is a cloud service, so you connect a Figma account from the NibWP Integrations screen instead of installing anything.
No. Version 1 is read-only. It reads structure, layout and tokens, and writes only into WordPress.
A screenshot has to be guessed at. The file carries auto-layout rules, Variables and the node tree, so spacing and tokens are read rather than estimated.
The builder is detected from your site first, so the output is native to what you already use rather than generic markup.
Activate the integration and it's live on your MCP endpoint instantly.