Documentation Index
Fetch the complete documentation index at: https://mintlify.com/ecomfe/tempad-dev/llms.txt
Use this file to discover all available pages before exploring further.
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.
Quick Start
Get up and running with TemPad Dev in minutes
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.
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;
}
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
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