---
title: "tempad-dev"
description: "Connect your coding agent to Figma. Create and edit native designs, inspect existing designs, and implement UI in your codebase."
canonical: https://agentpluginsdirectory.com/plugins/tempad-dev
last-updated: 2026-09-21
---

# tempad-dev
Connect your coding agent to Figma. Create and edit native designs, inspect existing designs, and implement UI in your codebase.
- Slug: tempad-dev
- Publisher: TemPad Dev
- Repository: https://github.com/ecomfe/tempad-dev
- Manifest: agent-plugin/src/plugin.json
- Version: 0.2.0
- License: MIT
- Category (editorial): other
- Skills: 2 (figma-canvas-authoring, figma-design-to-code)
- MCP servers: 1 (tempad-dev)
- Stars: 499
- Repository created: 2024-03-13
- Repository last pushed: 2026-09-21
- Publisher type: Organization
- Listing: https://agentpluginsdirectory.com/plugins/tempad-dev
- Schema: https://agent-plugins.org/schemas/1.0.0/plugin.schema.json

## What tempad-dev does, in the publisher's words

Read, edit, and implement Figma designs through your coding agent or IDE. This plugin includes:

- figma-canvas-authoring: create and revise native Figma designs, reusing accessible components, variables, and styles as needed.
- figma-design-to-code: use Figma design context to implement UI with your project's components and conventions.
- The TemPad Dev MCP server configuration: connect to the Figma file open in your browser.

Requires the TemPad Dev browser extension. Canvas editing also requires edit access to the Figma Design file. For manual inspection and output plugins, see the full user guide.

This plugin follows Agent Plugins 1.0 and is published from one source as a standard package, a compatibility package for the plugins CLI, and a package per native host. Prefer native installation on Codex and Claude. Codex App binds tasks over MCP metadata and native IPC, so its plugin registers no lifecycle hooks.

From the project README, punctuation lightly normalized. Full text: https://raw.githubusercontent.com/ecomfe/tempad-dev/HEAD/agent-plugin/src/README.md

## Skills

- figma-canvas-authoring: Create or update native, editable Figma designs with TemPad Dev MCP: screens, flows, components, and requested local design-system resources, including on an empty canvas. Use for Design in Figma work, not Figma-to-code, critique without edits, or raw Plugin API automation.
- figma-design-to-code: Implement or update project-consistent UI code from a visible Figma selection or nodeId using TemPad Dev MCP. Use when the user wants Figma UI recreated, ported, or integrated into the target project's framework, styling system, tokens, assets, and existing components. Do not use for design critiqu…

Descriptions come from the frontmatter of each SKILL.md, punctuation lightly normalized.

## MCP servers

- tempad-dev: transport: stdio; command: npx -y @tempad-dev/mcp@latest

Read from the plugin's own mcp.json. Environment variable names only, never values.