Connecting Figma with developers and their coding agents

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

Inspect CSS code

Select an element to read its CSS in the extension’s Code panel. In addition to standard CSS code, TemPad Dev also provides styles in the form of JavaScript objects, making it convenient for use in JSX and similar scenarios.

You can configure CSS units and root font size to convert px dimensions in CSS to rem units. You can also apply a scale factor to scale px values according to your handoff requirements.

Use Variable display (Reference/Resolved/Both) in Preferences to choose whether code output shows variable references, resolved values, or both.

When a Figma variable defines WEB codeSyntax, the Code panel preserves that exact author-provided syntax. MCP get_code still emits canonical CSS variable references so agents receive a stable intermediate representation.

Warning

Switching units only affects the output in the TemPad Dev panel, not the Figma canvas.

Deep select mode

In Figma's read-only view, selecting nodes requires double-clicking to drill down, and it often takes repeated double-clicks to select the lowest-level node. Although Figma offers a ⌘ + click shortcut, many users are unaware of this feature and need to perform extra key operations each time. Therefore, TemPad Dev provides a deep select mode in preferences.

Measure to selection mode

In Figma's read-only view, you need to hold ⌥ and move the cursor to display the spacing between other nodes and the selected node. For similar reasons to the deep select mode, TemPad Dev provides a measure to selection mode in preferences.

Scroll selection into view

When you hover over a node name section in TemPad Dev's inspect panel, a corresponding button appears. Clicking it will scroll the current selection to the center of the Figma viewport. Figma has a similar ⇧2 shortcut, but it zooms in to fill the viewport, which often doesn't meet the needs. Figma actually exposes an interface in the plugin API to move and zoom to 100%, so we also provide this capability as a supplement.

---

Output plugins

Plugins allow you to customize the built-in code output or add custom code blocks.

A TemPad Dev plugin is a simple JavaScript file that exports a plugin object as its default export or plugin named export. To install a plugin, paste the plugin file's URL into the Preferences > Plugins section. Some built-in plugins can also be enabled by using @{name} syntax (e.g., @foo), which corresponds to the plugin names in our plugin registry.

Note

Plugin code is stored in the browser's local storage. Plugins are not versioned or auto-updated, so you must manually update them from the UI.

Creating plugins

Use the fully typed definePlugin function from the @tempad-dev/plugins package to simplify plugin creation.

npm install -D @tempad-dev/plugins # or pnpm add -D @tempad-dev/plugins

Here is an example of a simple plugin that overrides the built-in CSS code block and hides the JavaScript code block:

import { definePlugin } from '@tempad-dev/plugins'

export default definePlugin({
  name: 'My Plugin',
  code: {
    css: {
      title: 'Stylus', // Custom code block title
      lang: 'stylus', // Custom syntax highlighting language
      transform({ style }) {
        return Object.entries(style)
          .map(([key, value]) => `${key} ${value}`)
          .join('\n')
      }
    },
    js: false // Hides the built-in JavaScript code block
  }
})

See Justineo/tempad-dev-plugin-kong for more comprehensive examples.

Note

Plugin file must be a valid ES module and export the plugin object as the default export or plugin named export.

Currently, we support 4 plugin hooks:

• transform: Converts the style object or code into a string format for the code block. Useful for custom structures, such as Tailwind CSS or UnoCSS.
• transformVariable: Converts CSS variables into alternate formats, e.g., converting them to Sass variables for design tokens.
• transformPx: Converts pixel values into other units or scales.
• transformComponent: Converts the design component object into a dev component object or a string for the code block. Useful for generating component code for design systems.

Tip

To include JavaScript variables in generated CSS, wrap the variable name in \0 characters. This will convert it into string interpolation for JavaScript. e.g. if you return \0foo\0 as the return value, an input of calc(var(--foo) + 10px) will be transformed into a JavaScript template string as `calc(${foo} + 10px)`.

Additionally, you can specify a custom title and lang for the code block or hide the built-in code block by setting it to false.

For full type definitions and helper functions, see packages/plugins/src/index.ts.

Deploying a plugin

Ensure your plugin is accessible via a URL that supports cross-origin requests, such as a GitHub repository (or Gist). For instance, you can use a raw URL:

https://raw.githubusercontent.com/{username}/{repo}/refs/heads/{branch}/{filename}.js

Note

Plugin URLs must use HTTPS and support cross-origin requests. Loopback HTTP URLs remain available for local development. Raw URLs provided by GitHub or Gist are generally suitable. Plugin entry files are limited to 512 KiB and must be self-contained ES modules; bundle dependencies instead of loading them at runtime.

Plugin code is treated as untrusted at the extension capability boundary. Each call runs in a fresh, forcibly terminated Worker inside an opaque-origin Chrome sandbox page with a restrictive CSP. The sandbox has no extension APIs or DOM access, blocks storage and tested network channels, validates bounded structured input/output, and times out after five seconds. A plugin still receives the design data passed to its hooks and fully controls the code it returns; browser-engine vulnerabilities, side channels, deliberate memory pressure, and unsafe generated output are outside this boundary. Review plugin sources accordingly. See the threat model for the exact guarantees and non-goals.

Sharing a plugin

You can also register the plugin into our plugin registry file so that your plugin can be installed by name directly.

Come and add your own awesome plugin!

Current available plugins:

Plugin name	Description	Author	Repository
@kong	Kong Design System	@Justineo	GitHub
@kong/advanced	Kong Design System (Advanced)	@Justineo	GitHub
@fubukicss/unocss	UnoCSS by FubukiCSS	@zouhangwithsweet	GitHub
@nuxt	Nuxt UI	@Justineo	GitHub
@nuxt/pro	Nuxt UI Pro	@Justineo	GitHub
@baidu-health/wz-style	Custom style for Baidu Health wz-style	@KangXinzhi	GitHub
@baidu-health/med-style	Custom style for Baidu Health med-style	@KangXinzhi	GitHub
@tailwind	CSS to Tailwind CSS	@haydenull	GitHub
@react-native	CSS to React Native StyleSheet	@CANntyield	GitHub

Inspect TemPad component code

This feature only works with nodes produced by the TemPad Figma plugin, which is only available internally at Baidu, Inc. at the moment.

Currently this feature only supports Light Design components.

If there are components generated by the TemPad Figma plugin on the canvas, TemPad Dev can directly output the component's invocation code in the Code panel. You can also quickly jump to the TemPad Playground to preview and debug the runnable code.

Quirks mode

[!CAUTION] Quirks mode is no longer usable as of 2025.04.01. Figma removed the window.DebuggingHelpers.logSelected API, which was used to extract style data.

[!NOTE] New in v0.1.0

New in TemPad Dev v0.1.0, Quirks Mode lets you use the tool even when window.figma is unavailable. This mode extracts style data through Figma's debug logs, allowing for basic style generation, albeit with some limitations.

Known missing features generating style codes include:

• Styles added through Effects, corresponding to CSS properties like box-shadow, filter: blur(), and backdrop-filter: blur().
• Gradient fill styles. TemPad Dev can only detect the existence of a gradient and outputs it as linear-gradient(<color-stops>).
• Fill styles' blend mode, corresponding to the background-blend-mode CSS property.
• font-family of text nodes, which is obtained heuristically and may be inaccurate.
• Advanced OpenType configurations for text nodes, other than numeric styles, which are generally not used.
• The "Scroll Selection into View" feature is not available in this mode.

Except for the above-mentioned features, others are mostly consistent with the standard mode. If Quirks mode is sufficient for your scenarios, it can eliminate the tedious operation of duplicating to drafts and be used directly in view-only mode. Note that this mode also relies on Figma's globally exposed debug interface and cannot guarantee long-term validity. If Figma removes the related interface again, this mode will also become unavailable.

Compatibility Updates

2025.04.01: Figma removed the window.DebuggingHelpers.logSelected API, which was used to extract style data. As a result, Quirks mode is no longer usable.

2024.11.04: TemPad Dev now managed to bring back the window.figma API under view-only mode. But we still cannot guarantee the long-term validity of this feature. If Figma removes the related interface again, this mode will also become unavailable.

2024.04.08: TemPad Dev successfully retrieved most style information using currently unblocked debug interfaces, providing a new Quirks Mode. This mode does not rely on window.figma but instead parses debug logs to generate style code, with slight differences from the standard mode.

2024.03.20: After we posted complaints on the Figma Community Forum, the Figma team stated that they would reinstate the window.figma interface in view-only mode in the coming weeks. You can track the progress of this issue on this thread.

Acknowledgements

Built with WXT, TypeScript and Vue 3.

Inspired by the following projects:

• https://github.com/leadream/figma-viewer-chrome-plugin
• https://github.com/zouhangwithsweet/fubukicss-tool
• https://github.com/Inclushe/figma-ui3