TemPad Dev

Overview

TemPad Dev is an open-source browser extension and MCP connection that links Figma designs to developers and coding agents. It lets users inspect CSS, JavaScript styles, variables, layout, and measurements in the browser, and lets compatible agents read designs, create and edit native Figma layers, and implement UI in a code project. It also supports output plugins for adapting code generation to a project’s syntax.

Key Features

• Inspect selected Figma elements for CSS and JavaScript styles, variable references, layout, and measurements.
• Configure CSS units, root font size, and scale, and choose reference, resolved, or both variable display modes.
• Use deep select, measure to selection, and scroll selection into view for read-only Figma inspection.
• Connect compatible coding agents through MCP to read designs, create or edit native Figma layers, and implement UI in a project.
• Customize built-in code output or add code blocks through JavaScript output plugins.
• Use MCP tools for code, design-system catalogs, screenshots, structure, canvas application, and asset uploads.

Use Cases

• Inspect a Figma element to read CSS, variables, layout, and measurements without setting up an agent.
• Ask a connected coding agent to create a settings screen in Figma using existing components and variables.
• Implement the current Figma selection in a target code project using that project’s components and styling conventions.
• Adapt generated styles for Tailwind CSS, UnoCSS, Sass, React Native, or design-system components via output plugins.

Getting Started

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

Deployment & Requirements

• The agent connection requires Node.js 22.x, 24.x, or 26+.
• Canvas editing requires edit access to the Figma Design file; view-only files and Dev Mode remain read-only.
• Keep TemPad Dev open in the Figma tab the agent should inspect and allow the loopback connection to 127.0.0.1 when prompted.
• Pi requires version 0.99 or later with built-in MCP enabled.

Before You Adopt

• License: MIT. Review its terms before using, modifying, or distributing the project.
• The agent connection depends on a supported local Node.js runtime.
• Canvas authoring is limited to editable Figma Design files; view-only files and Dev Mode remain read-only.
• Quirks mode is unavailable in current releases.
• Installed plugin code is stored locally and must be manually updated because plugins are not versioned or auto-updated.
• Plugin code is treated as untrusted at the extension capability boundary.