Skip to main content

​
Browser Extension Installation

​
Chrome Web Store

Install TemPad Dev directly from the Chrome Web Store:

Install on Chrome Web Store

Click to install TemPad Dev for Chrome, Edge, Brave, and other Chromium-based browsers
1

Visit Chrome Web Store

Navigate to the TemPad Dev extension page
2

Add to Browser

Click “Add to Chrome” (or “Add to Edge” if using Microsoft Edge)
3

Confirm Installation

Review the permissions and click “Add extension” to confirm
4

Verify Installation

Open any Figma file at figma.com to see the TemPad Dev panel

​
Requirements and Compatibility

​
Browser Support

TemPad Dev works on all Chromium-based browsers:
  • Google Chrome (recommended)
  • Microsoft Edge
  • Brave
  • Opera
  • Vivaldi
  • Other Chromium-based browsers
Firefox is not currently supported. The extension requires Chromium-specific APIs.

​
Figma Compatibility

TemPad Dev works with:
  • Figma Files: Full support in edit and view-only modes
  • FigJam Files: Limited support (basic inspection)
  • Figma Prototypes: Inspection available in prototype mode

​
System Requirements

  • Operating System: Windows, macOS, Linux, or Chrome OS
  • Browser Version: Latest stable version recommended
  • Internet Connection: Required for accessing Figma files

​
Optional: MCP Server

For AI agent integration, additional requirements apply:
  • Node.js: Version 18 or higher
  • NPM/NPX: Installed with Node.js
The MCP server is optional and only required if you want to use TemPad Dev with AI coding agents like Claude or Cursor.

​
Initial Setup

​
First Launch

After installing the extension:
1

Open Figma

Navigate to any Figma file at https://www.figma.com/
2

Locate TemPad Dev Panel

The TemPad Dev panel appears automatically in the Figma interface. Look for the panel alongside the native Figma inspect tools.
3

Select an Element

Click any element on the canvas to see extracted code in the TemPad Dev panel

​
Access Preferences

Configure TemPad Dev to match your workflow:
1

Open Preferences

Click the settings icon in the TemPad Dev panel header
2

Configure Units

Set your preferred CSS units (px or rem) and root font size
Units: rem
Root Font Size: 16px
Scale: 1
3

Enable Features

Toggle optional features like Deep Select Mode and Measure to Selection
4

Variable Display

Choose how CSS variables are displayed:
  • Reference: Show variable names only (var(--color-primary))
  • Resolved: Show computed values only (#6699cc)
  • Both: Show both formats (var(--color-primary, #6699cc))

​
Permissions Explained

​
Required Permissions

TemPad Dev requests the following permissions:
Why needed: The extension must inject into Figma pages to read design data and display the inspection panel.Scope: Only https://www.figma.com/* - no other websites are accessed.
Why needed: Stores your preferences, plugin configurations, and MCP settings locally.Privacy: All data remains in your browser. Nothing is sent to external servers.
Why needed: Modifies Figma’s page behavior to enable inspection features.Scope: Limited to Figma domain only.

​
Configuration Options

​
CSS Units

Control how measurements are output: 
Units: px | rem
Root Font Size: 16px (for rem conversion)
Scale: 1 (multiplier for all values)
Example with rem: 
/* Input: 24px in Figma */
/* Output with rem (root 16px): */
font-size: 1.5rem;

​
Variable Display Modes

/* Shows variable names only */
background-color: var(--color-primary);
color: var(--color-text);

​
Enhanced Selection Modes

​
Deep Select Mode

Automatically drills down to the lowest-level node without repeated double-clicks. Essential for working in view-only mode.
Enable in: Preferences → Deep Select Mode Behavior:
  • Single click selects the deepest nested element
  • No need for ⌘/Ctrl + click shortcuts
  • Works in both edit and view-only modes

​
Measure to Selection Mode

Shows spacing between elements without holding modifier keys. Streamlines measurement workflow.
Enable in: Preferences → Measure to Selection Mode Behavior:
  • Automatically displays spacing measurements
  • No need to hold ⌥/Alt key
  • Replaces Figma’s default measurement behavior

​
Plugin Installation

Extend TemPad Dev with community plugins:
1

Find a Plugin

Browse available plugins in the README or create your own
2

Copy Plugin URL

Get the raw URL for the plugin JavaScript file
https://raw.githubusercontent.com/username/repo/main/plugin.js
Or use built-in plugin names with @ prefix:
@tailwind
@kong
@react-native
3

Open Plugin Settings

Navigate to Preferences → Plugins in the TemPad Dev panel
4

Add Plugin URL

Paste the plugin URL or @name and click “Add Plugin”
5

Verify Installation

Select an element and check that new code blocks appear according to the plugin configuration
Plugin code is stored locally and not auto-updated. You must manually update plugins from the UI when new versions are released.

​
Popular Plugins

  • @tailwind: Convert CSS to Tailwind CSS classes
  • @kong: Kong Design System components
  • @react-native: React Native StyleSheet format
  • @nuxt: Nuxt UI components
  • @fubukicss/unocss: UnoCSS utilities

​
MCP Server Setup (Optional)

The MCP server enables AI coding agents to extract code from Figma. Skip this section if you’re not using AI agents.

​
Requirements

  • Node.js 18 or higher installed
  • TemPad Dev extension active in a Figma tab

​
Installation

1

Enable MCP in Extension

Open Preferences → MCP server and toggle Enable MCP server
2

Configure Your AI Client

Add TemPad Dev to your MCP client configuration:
{
  "mcpServers": {
    "TemPad Dev": {
      "command": "npx",
      "args": ["-y", "@tempad-dev/mcp@latest"]
    }
  }
}
3

Install Agent Skill (Recommended)

Install the TemPad Dev skill for better AI code generation:
npx skills add https://github.com/ecomfe/tempad-dev/tree/main/skill
4

Keep Figma Tab Active

The MCP server requires an active Figma tab with TemPad Dev open. Click the MCP badge in the panel to activate the correct file.

​
Troubleshooting

​
Extension Not Appearing

1

Verify Installation

Check that TemPad Dev appears in chrome://extensions
2

Refresh Figma

Hard refresh the Figma page with Ctrl+Shift+R (Cmd+Shift+R on Mac)
3

Check Figma URL

Ensure you’re on https://www.figma.com/design/* or https://www.figma.com/file/*

​
Code Not Showing

1

Select an Element

Ensure you have an element selected on the canvas
2

Check Console

Open browser DevTools (F12) and check for errors in the console
3

Disable Other Extensions

Temporarily disable other Figma-related extensions to check for conflicts

​
Plugin Errors

Plugin URLs must support CORS (Cross-Origin Resource Sharing). GitHub raw URLs and Gist URLs work correctly.
1

Verify Plugin URL

Ensure the URL is accessible and returns valid JavaScript
2

Check Plugin Format

Plugin must export via default export or plugin named export
3

Remove and Re-add

Remove the plugin and add it again to clear any cached errors

​
Next Steps

Quickstart Guide

Follow a step-by-step tutorial for your first code extraction

Plugin Development

Learn how to create custom plugins for your workflow