tempad-dev

TemPad Dev is an open-source connection between Figma, developers, and their coding agents. Inspect designs and customize code output in the browser, or let your agent read designs, create and edit native Figma content, and implement UI in your project.

Contents

• Quick start
• Agent integration: canvas design, implementation, setup, connection status
• Inspect designs: CSS and variables, deep select, measure, scroll into view
• Output plugins: installation, development, and sharing

Quick start

1. Install TemPad Dev from the Chrome Web Store and open a Figma Design file.
2. Select an element to inspect its code, variables, and layout in the TemPad Dev panel. Manual inspection needs no agent setup.
3. To use a coding agent, enable Preferences → Agent integration → MCP access, select Set up agents, and follow the instructions for your client.

The agent connection requires Node.js 22.x, 24.x, or 26+. Canvas editing also requires edit access to the Figma Design file. Setup and upgrade details for the extension, MCP server, and both skills follow below.

Agent integration

Work with Figma through the coding agent or IDE you already use. TemPad Dev provides design context and canvas operations; your agent uses them alongside your instructions and project context.

Create and edit Figma designs

Create screens, adjust layout and typography, or revise existing designs. The result consists of native, editable layers. Reuse accessible components, variables, and styles when the task calls for them.

For example, after connecting your agent:

Create a settings screen in Figma using the available components.

Or select an existing design and ask:

Adjust the spacing and typography in this screen, keeping its components and content.

The figma-canvas-authoring skill guides your agent through relevant resource inspection, editing, and checking the rendered result. Writes require an editable Figma Design file; view-only files and Dev Mode remain read-only.

Design task controls and comments

The task status bar follows the design anchor and shows the agent's activity and Stop/Done controls. Stop permanently cancels the current task; reconnecting cannot resume its writes. On compatible Codex App hosts, save element comments or add a general comment, then send the batch with Queue or Steer. Queue clears submitted drafts after the host confirms receipt, so another batch can be written while the queued request waits. Confirmation does not mean the agent has completed the changes.

In an element editor, Enter saves; Command/Ctrl+Enter saves and queues the whole batch. In the general composer, Enter queues the batch and Command/Ctrl+Enter uses Steer. Shift+Enter adds a newline. Claude, Codex CLI, and other clients currently have task controls without comment sending. See the comment guide and host validation scope.

Implement designs in code

Select the design in Figma, then ask your agent in the target code project:

Implement the current Figma selection using this project’s components and styling conventions.

TemPad Dev provides layout, styles, variable references, component information, and assets. The figma-design-to-code skill guides the agent through adapting that evidence to the repository and validating the implementation. Generated design code is a starting point; the agent produces the project implementation.

Both workflows use the same MCP connection to Figma. Compatible clients can install the Agent Plugin, which bundles the MCP configuration and both skills. Other clients can set up MCP and skills separately.

Setup guide

1. Install Node.js 22.x, 24.x, or 26+ with npx. Keep TemPad Dev open in the Figma tab you want the agent to inspect, then enable Preferences → Agent integration → MCP access. When prompted, allow the loopback connection to 127.0.0.1. Canvas authoring is available while MCP access is enabled and the current Figma Design file is editable.
2. Select Set up agents, choose Codex, Cursor, Claude Code, Gemini, VS Code, OpenCode, or TRAE, and follow the displayed path. Use Other for another compatible client. The choice only changes the instructions shown; it does not bind or activate an agent.
3. The setup flow uses native marketplace installation for Codex and Claude Code, and the portable Agent Plugin for Cursor and VS Code. Codex App integration uses native IPC without lifecycle hooks. For Gemini, OpenCode, TRAE, and other clients without compatible plugin installation, it uses the client's MCP flow plus the two standalone skills. Every command or config is shown in full for review and copying.

For clients with separate MCP and skill installation, the setup shows each command. Gemini is one example:

Scroll down in the dialog for both skill installation commands:

For native Codex and Claude marketplace commands and portable Cursor and VS Code installation, see the Agent Plugin guide.

All plugin and direct npx-based setup paths use @tempad-dev/mcp@latest.

For the canvas-authoring release, use extension 0.21.0, MCP server 0.8.0, and Agent Plugin 0.2.0 together. See the upgrade guide when updating an existing installation.

Keep TemPad Dev open with MCP enabled while using it. If multiple Figma files are connected, click the MCP badge in the panel for the file you want the agent to inspect; that file becomes the active context.

MCP connection status

When the MCP server is enabled, a badge appears in the TemPad Dev panel title bar showing the current connection status:

• Unavailable: The local MCP server is not configured or not running.

• Inactive: TemPad Dev is connected to a local MCP server, but this tab is not currently active because multiple Figma tabs are open. Click the badge to activate MCP for this tab (this deactivates MCP in other tabs).

• Active: The MCP server is running, and this tab is active and ready to respond to MCP tool calls.

Configuration

For optional environment variables, see packages/mcp-server/README.md.

MCP tools

These tools are called by the agent. For everyday use, describe the task in your own words.

• get_code: High-fidelity JSX/Vue + TailwindCSS code output by default, plus attached assets and the codegen preset/config used.
• get_design_system: An immutable, deterministic catalog. It returns compact pages of component definitions on accessible pages plus local or directly referenced variable, collection/mode, style, and shader definitions without inspecting canvas usage or loading every page. Cursor continuation exposes omitted definitions; exact-ref lookup returns one bounded definition. With scope: "fonts", it queries available font families and exact native styles without scanning file resources.
• apply_canvas: Creates, updates, removes, or activates exact pages and managed roots. Canvas HTML is optional for page-only operations and native-only updates to existing stable keys inside an exact managed root; a root can be written directly to an exact off-current page without switching editor context. The extension resolves, validates, diffs, applies, and structurally verifies each requested result. Authoring requires edit access to the current Figma Design file.
• get_screenshot: A bounded rendered PNG for selective visual validation.
• get_structure: A structural outline (ids, types, geometry) for an exact node, exact managed page, or the current selection.
• upload_asset: Stores a generated PNG/JPEG/GIF in the local Hub and returns an assetHash for canvas authoring.
• Binary assets are returned as metadata + HTTP download URLs (asset.url) in tool responses. Asset MCP resources are not exposed.

---

Inspect designs