Skip to main content

​
What is TemPad Dev?

TemPad Dev is a powerful browser extension that brings developer-friendly inspection capabilities to Figma. It enables designers and developers to extract production-ready code directly from Figma designs, bridging the gap between design and implementation.
TemPad Dev works seamlessly in both edit mode and view-only Figma files, making it perfect for handoff scenarios.

​
Key Features

Inspect CSS Code

Extract CSS and JavaScript styles from any Figma element. Get standard CSS or JavaScript object syntax for JSX/React scenarios.

Flexible Units

Configure CSS units (px, rem) and root font size. Apply scale factors to match your handoff requirements. Control variable display (Reference/Resolved/Both).

Deep Select Mode

Automatically drill down to the lowest-level nodes without repeated double-clicks. Works even in read-only view.

Measure to Selection

See spacing between nodes without holding modifier keys. Streamlined measurement workflow in view-only mode.

Plugin System

Customize code output with JavaScript plugins. Support for Tailwind CSS, UnoCSS, React Native, and custom design systems.

MCP Integration

Pull code and context directly into AI coding agents via Model Context Protocol. Generate repo-ready UI from Figma selections.

​
Use Cases

​
For Developers

  • Faster Implementation: Copy production-ready CSS and JavaScript directly from designs
  • Accurate Handoff: Eliminate guesswork with precise measurements and styles
  • Framework Integration: Generate code for React, Vue, React Native, and more via plugins
  • Design System Mapping: Transform Figma components into your design system components

​
For Designers

  • Better Collaboration: Share exact specifications with developers
  • Quality Assurance: Verify implementation matches design intent
  • Documentation: Extract design tokens and variables for style guides

​
For Teams

  • Design-Dev Workflow: Streamline the handoff process with consistent code output
  • AI-Assisted Development: Use MCP to have AI agents generate components from Figma
  • Custom Standards: Enforce team conventions through custom plugins

​
How It Works

1

Install the Extension

Add TemPad Dev to your browser from the Chrome Web Store. The extension activates automatically on Figma pages.
2

Open Figma Design

Navigate to any Figma file (edit or view-only mode). The TemPad Dev panel appears alongside Figma’s native tools.
3

Select Elements

Click any element on the canvas. Enable Deep Select mode for faster selection of nested elements.
4

Extract Code

View generated CSS and JavaScript code in the Code panel. Copy to clipboard or customize with plugins.
5

Configure Output (Optional)

Adjust units, scale, and variable display in Preferences. Install plugins for framework-specific output.

​
Code Output Examples

​
Standard CSS

background-color: #6699cc;
color: #ffffff;
font-size: 16px;
font-weight: 500;
padding: 12px 24px;
border-radius: 8px;

​
JavaScript Object (for JSX)

{
  backgroundColor: '#6699cc',
  color: '#ffffff',
  fontSize: 16,
  fontWeight: 500,
  padding: '12px 24px',
  borderRadius: 8
}

​
With CSS Variables

background-color: var(--color-primary, #6699cc);
color: var(--color-white, #ffffff);
font-size: var(--font-size-base, 16px);

​
Unit Conversion (px to rem)

background-color: #6699cc;
font-size: 1rem; /* 16px */
padding: 0.75rem 1.5rem; /* 12px 24px */
border-radius: 0.5rem; /* 8px */

​
Architecture

TemPad Dev is built with WXT (Web Extension Toolkit), TypeScript, and Vue 3. The extension injects into Figma’s page context to access design data while maintaining security through isolated Web Workers.

​
Components

  • Browser Extension: Runs on https://www.figma.com/* and provides the inspection UI
  • Plugin System: JavaScript plugins run in isolated Web Workers for security
  • MCP Server: Optional Node.js server for AI agent integration via Model Context Protocol

​
Plugin Architecture

Plugins transform the generated code output without accessing the DOM: 
import { definePlugin } from '@tempad-dev/plugins'

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

​
Open Source

TemPad Dev is open source and available on GitHub. Contributions are welcome!

Contribute on GitHub

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

​
Next Steps

Installation

Install TemPad Dev and get started in minutes

Quickstart

Follow a step-by-step guide to your first code extraction