Quickstart - TemPad Dev

What You’ll Learn

This guide walks you through:

Installing the TemPad Dev extension
Opening a Figma file and selecting elements
Extracting CSS and JavaScript code
Configuring basic preferences
Using plugins to customize output

Time to complete: ~5 minutes

Step 1: Install Extension

Visit Chrome Web Store

Navigate to the TemPad Dev extension page in your Chromium-based browser

Install Extension

Click Add to Chrome and confirm the installation

Verify Installation

Check that TemPad Dev appears in your browser extensions list (chrome://extensions)

Step 2: Open Figma

Navigate to Figma

Go to figma.com and sign in to your account

Open Any Design File

Open an existing file or create a new design for testing. The extension works in both edit and view-only modes.

Locate TemPad Dev Panel

The TemPad Dev panel appears automatically in the Figma interface. Look for it in the right sidebar area.

If you don’t see the panel, try refreshing the page with Ctrl+Shift+R (Cmd+Shift+R on Mac)

Step 3: Select Element

Click Any Element

Select any element on the Figma canvas - a button, text layer, frame, or component

View Generated Code

The TemPad Dev panel automatically updates to show:

CSS code: Standard CSS properties
JavaScript code: Object syntax for JSX/React

Copy Code

Click the copy icon in the code block header to copy the code to your clipboard

Example Output

When you select a button element, you’ll see:

background-color: #6699cc;
color: #ffffff;
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
padding: 12px 24px;
border-radius: 8px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);

Step 4: Configure Basics

Open Preferences

Access Settings

Click the settings/gear icon in the TemPad Dev panel header

Explore Options

Review available configuration options

Configure CSS Units

Convert pixel values to rem units:

Enable rem Units

In Preferences, set Units to rem

Set Root Font Size

Configure Root Font Size (typically 16px)

See Updated Output

Select an element again to see rem-converted values:

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

Apply Scale Factor

Scale all values for different screen densities:

Set Scale

In Preferences, adjust the Scale value (e.g., 0.5 for 50% scale)

View Scaled Output

Select an element to see scaled values:

/* Original: 24px, Scale 0.5 */
font-size: 12px;

Configure Variable Display

Control how CSS variables appear in output:

Reference Mode

Shows variable names only:

background-color: var(--color-primary);

Resolved Mode

Shows computed values only:

background-color: #6699cc;

Both Mode (Recommended)

Shows variable names with fallback values:

background-color: var(--color-primary, #6699cc);

Step 5: Enable Enhanced Features

Deep Select Mode

Automatically selects the deepest nested element without repeated double-clicks. Perfect for complex components.

Enable Feature

In Preferences, toggle Deep Select Mode ON

Test It Out

Click a complex component with nested layers. TemPad Dev automatically selects the lowest-level node.

Before Deep Select:

Click → selects outer frame
Double-click → selects inner group
Double-click again → selects actual element

With Deep Select:

Single click → selects actual element directly

Measure to Selection Mode

Displays spacing measurements automatically without holding modifier keys.

Enable Feature

In Preferences, toggle Measure to Selection Mode ON

View Measurements

Select any element, then hover over nearby elements to see spacing measurements displayed automatically

Scroll Selection Into View

Select an Element

Choose any element on the canvas

Find Scroll Button

Hover over the node name section in the TemPad Dev inspect panel

Click to Center

Click the scroll button to center the selection in the Figma viewport at 100% zoom

Step 6: Install Your First Plugin

Plugins customize code output for different frameworks and design systems.

Install Tailwind CSS Plugin

Open Plugin Settings

Navigate to Preferences → Plugins

Add Plugin

Enter the plugin name:

@tailwind

Click Add

The plugin installs automatically from the built-in registry

View Tailwind Output

Select an element to see Tailwind CSS classes:

<div class="bg-blue-500 text-white font-medium px-6 py-3 rounded-lg shadow">
  Button Text
</div>

Available Built-in Plugins

Install plugins by entering their @name in the plugin settings:

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

Install Custom Plugin from URL

Get Plugin URL

Find a plugin repository (or create your own) and copy the raw JavaScript file URL:

https://raw.githubusercontent.com/username/tempad-plugin/main/plugin.js

Add URL in Preferences

Paste the full URL into Preferences → Plugins and click Add

Verify Installation

Select an element and check that new code blocks appear according to the plugin configuration

Common Workflows

Extract Design Tokens

Select Element with Variables

Choose an element that uses Figma variables/styles

Set Variable Display to Both

In Preferences, set Variable Display to Both

Copy Variable References

The output includes both variable names and fallback values:

color: var(--color-text-primary, #1a1a1a);
background: var(--color-surface-raised, #ffffff);

Generate Component Props

Select Component Instance

Click any component instance on the canvas

View Component Code

If using a plugin with transformComponent hook, you’ll see component invocation code:

<Button variant="primary" size="lg">
  Click me
</Button>

Export for Multiple Frameworks

Install Multiple Plugins

Add plugins for different frameworks:

@tailwind
@react-native

Select Element

Click any element on the canvas

View All Formats

The Code panel shows multiple code blocks:

Standard CSS
JavaScript object
Tailwind classes
React Native StyleSheet

Copy Desired Format

Click the copy icon for the format you need

Tips and Best Practices

Use Deep Select for Nested Components

Enable Deep Select Mode when working with complex components that have many nested layers. This saves time by eliminating repeated double-clicks.

Configure Units Per Project

Set your units (px vs rem) based on project requirements. Most modern web projects benefit from rem units for better accessibility.

Create Custom Plugins for Design Systems

If your team uses a custom design system, create a plugin to map Figma components to your actual component library. See the plugin development guide for details.

Use Variable Display: Both

The “Both” mode for variable display provides the most useful output - you get variable names for design tokens while preserving fallback values for reference.

Combine with Figma Dev Mode

TemPad Dev complements Figma’s native Dev Mode. Use Dev Mode for layout and spacing, and TemPad Dev for extracting actual code.

Troubleshooting

Panel Not Appearing

Hard Refresh

Press Ctrl+Shift+R (Cmd+Shift+R on Mac) to hard refresh the Figma page

Check Extension Status

Verify TemPad Dev is enabled in chrome://extensions

Check Figma URL

Ensure you’re on a valid Figma file URL (figma.com/design/* or figma.com/file/*)

Code Not Updating

Reselect Element

Click away and reselect the element

Check Element Type

Some element types (like locked layers) may have limited inspection

Disable Conflicting Extensions

Temporarily disable other Figma-related extensions

Plugin Not Working

Plugin URLs must support CORS. Use GitHub raw URLs or Gist URLs for reliable access.

Verify Plugin URL

Test the URL in your browser to ensure it returns valid JavaScript

Check Export Format

Plugin must use export default definePlugin(...) or export const plugin = ...

Remove and Reinstall

Delete the plugin and add it again to clear cached errors

Check Browser Console

Open DevTools (F12) and look for plugin-related errors

Next Steps

Learn More

Plugin Development

Create custom plugins to transform code output for your workflow

MCP Integration

Connect TemPad Dev to AI coding agents via Model Context Protocol

Configuration Reference

Explore all configuration options and preferences

API Reference

Learn about the plugin API and available hooks

Join the Community

GitHub Repository

View source code, report issues, and contribute

Discord Community

Chat with other users and get help

Create Your First Plugin

Ready to customize TemPad Dev for your specific needs? Follow this example:

Install Plugin SDK

npm install -D @tempad-dev/plugins

Create Plugin File

import { definePlugin } from '@tempad-dev/plugins'

export default definePlugin({
  name: 'My Custom Plugin',
  code: {
    css: {
      title: 'Custom CSS',
      transform({ style }) {
        // Transform CSS properties
        return Object.entries(style)
          .map(([key, value]) => `${key}: ${value};`)
          .join('\n')
      }
    }
  }
})

Deploy to GitHub

Push your plugin to a GitHub repository and use the raw URL to install it

For complete plugin development guide, see the Plugin Development documentation.

Summary

You’ve learned how to:

✅ Install and verify the TemPad Dev extension
✅ Open Figma and locate the TemPad Dev panel
✅ Select elements and extract CSS/JavaScript code
✅ Configure units, scale, and variable display
✅ Enable enhanced features like Deep Select
✅ Install and use plugins for framework-specific output

You’re ready to streamline your design-to-code workflow!

Get Started

Core Features

Plugins

MCP Server

Configuration

​What You’ll Learn

​Step 1: Install Extension

​Step 2: Open Figma

​Step 3: Select Element

​Example Output

​Step 4: Configure Basics

​Open Preferences

​Configure CSS Units

​Apply Scale Factor

​Configure Variable Display

​Step 5: Enable Enhanced Features

​Deep Select Mode

​Measure to Selection Mode

​Scroll Selection Into View

​Step 6: Install Your First Plugin

​Install Tailwind CSS Plugin

​Available Built-in Plugins

​Install Custom Plugin from URL

​Common Workflows

​Extract Design Tokens

​Generate Component Props

​Export for Multiple Frameworks

​Tips and Best Practices

​Troubleshooting

​Panel Not Appearing

​Code Not Updating

​Plugin Not Working

​Next Steps

​Learn More

Plugin Development

MCP Integration

Configuration Reference

API Reference

​Join the Community

GitHub Repository

Discord Community

​Create Your First Plugin

​Summary

What You’ll Learn

Step 1: Install Extension

Step 2: Open Figma

Step 3: Select Element

Example Output

Step 4: Configure Basics

Open Preferences

Configure CSS Units

Apply Scale Factor

Configure Variable Display

Step 5: Enable Enhanced Features

Deep Select Mode

Measure to Selection Mode

Scroll Selection Into View

Step 6: Install Your First Plugin

Install Tailwind CSS Plugin

Available Built-in Plugins

Install Custom Plugin from URL

Common Workflows

Extract Design Tokens

Generate Component Props

Export for Multiple Frameworks

Tips and Best Practices

Troubleshooting

Panel Not Appearing

Code Not Updating

Plugin Not Working

Next Steps

Learn More

Join the Community

Create Your First Plugin

Summary