Skip to main content

Inspect Panel on Figma, for Everyone

Extract CSS and JavaScript code from Figma selections, customize output with plugins, and integrate with AI agents through MCP server.

Get StartedExplore MCP Server

Quick Start

Get up and running with TemPad Dev in minutes

1

Install the Extension

Install TemPad Dev from the Chrome Web Store:Install on Chrome Web Store
2

Open Figma

Navigate to any Figma file (design or view-only mode). The TemPad Dev panel will appear automatically.
TemPad Dev works in both edit mode and read-only view mode. Some features like “Scroll Selection into View” require edit access.
3

Select and Inspect

Click on any element in Figma, and TemPad Dev will generate the corresponding CSS and JavaScript code:
.element {
  display: flex;
  width: 200px;
  height: 100px;
  padding: 16px;
  background: #e47443;
  border-radius: 8px;
}
The code panel shows both CSS and JavaScript object syntax, making it easy to copy into your project.
4

Customize Output

Configure units, variables, and install plugins from Preferences to customize code generation:
  • Switch between px, rem, or other units
  • Choose variable display mode (Reference/Resolved/Both)
  • Install plugins for framework-specific output (Tailwind, UnoCSS, etc.)

Key Features

Everything you need to extract design code from Figma

CSS & JavaScript Code

Generate CSS and JavaScript object syntax from any Figma selection. Customize units, variables, and output format.

Plugin System

Extend code generation with custom plugins. Transform output to Tailwind, UnoCSS, or your design system.

MCP Server Integration

Connect AI agents and IDEs to Figma through Model Context Protocol. Extract code and structure programmatically.

Deep Select Mode

Select nested elements in read-only mode with a single click, no more double-clicking required.

Measure Mode

Display spacing between elements automatically without holding modifier keys.

Variable Support

Display Figma variables as CSS variables, resolved values, or both in your generated code.

Explore by Topic

Dive deeper into specific features and integrations

Core Features

Learn about code inspection, deep select, measure mode, and scroll features.

Explore features

Plugins

Create custom plugins to transform code output for Tailwind, UnoCSS, and design systems.

Build plugins

MCP Server

Connect AI agents and IDEs to Figma through Model Context Protocol integration.

Setup MCP

Resources & Community

Get help and connect with the community

GitHub

View source code, report issues, and contribute to the project.

Discord

Join our Discord community for support and discussions.

API Reference

Explore the complete Plugin API and MCP Tools reference.

Ready to Get Started?

Install TemPad Dev and start extracting design code from Figma in minutes.

Get Started Now

Build docs developers (and LLMs) love

Get started for freeTalk to us