# TemPad Dev

## Docs

- [definePlugin](https://mintlify.wiki/ecomfe/tempad-dev/api/define-plugin.md): Define a TemPad Dev plugin with full type support
- [get_code](https://mintlify.wiki/ecomfe/tempad-dev/api/get-code.md): MCP tool to generate code from Figma designs
- [get_structure](https://mintlify.wiki/ecomfe/tempad-dev/api/get-structure.md): MCP tool to extract Figma node structure and geometry
- [Helper Functions](https://mintlify.wiki/ecomfe/tempad-dev/api/helpers.md): Utility functions for building DevComponent trees and querying design nodes
- [Transform Hooks](https://mintlify.wiki/ecomfe/tempad-dev/api/transform-hooks.md): Transform generated code with custom hooks
- [Type Definitions](https://mintlify.wiki/ecomfe/tempad-dev/api/types.md): Complete TypeScript type reference for TemPad Dev plugins
- [Preferences](https://mintlify.wiki/ecomfe/tempad-dev/configuration/preferences.md): Configure TemPad Dev preferences to customize your workflow
- [Unit Conversion](https://mintlify.wiki/ecomfe/tempad-dev/configuration/units.md): Convert between px, rem, and scaled units in CSS output
- [Variable Display](https://mintlify.wiki/ecomfe/tempad-dev/configuration/variables.md): Control how CSS variables are displayed in generated code
- [Architecture](https://mintlify.wiki/ecomfe/tempad-dev/development/architecture.md): Understand TemPad Dev's monorepo structure and component architecture
- [Building](https://mintlify.wiki/ecomfe/tempad-dev/development/building.md): Build commands and packaging for TemPad Dev
- [Extension Package](https://mintlify.wiki/ecomfe/tempad-dev/development/extension.md): Browser extension implementation for Figma integration
- [MCP Server Package](https://mintlify.wiki/ecomfe/tempad-dev/development/mcp-server.md): MCP server runtime that exposes tools and proxies calls to the extension
- [Plugins Package](https://mintlify.wiki/ecomfe/tempad-dev/development/plugins-package.md): Public SDK for plugin authors to customize code generation
- [Development Setup](https://mintlify.wiki/ecomfe/tempad-dev/development/setup.md): Set up your local development environment for TemPad Dev
- [Shared Package](https://mintlify.wiki/ecomfe/tempad-dev/development/shared.md): Shared contracts between extension and MCP server
- [Testing](https://mintlify.wiki/ecomfe/tempad-dev/development/testing.md): Testing strategy, commands, and guidelines for TemPad Dev
- [Deep Select Mode](https://mintlify.wiki/ecomfe/tempad-dev/features/deep-select.md): Automatically select the deepest nested element with a single click in Figma's read-only view
- [Inspect CSS Code](https://mintlify.wiki/ecomfe/tempad-dev/features/inspect-code.md): Extract CSS and JavaScript code from any Figma element with configurable units, variables, and design tokens
- [Measure to Selection Mode](https://mintlify.wiki/ecomfe/tempad-dev/features/measure-mode.md): Automatically display spacing between elements without holding Alt key
- [Scroll Selection Into View](https://mintlify.wiki/ecomfe/tempad-dev/features/scroll-into-view.md): Center selected elements in the viewport at 100% zoom for better inspection
- [Installation](https://mintlify.wiki/ecomfe/tempad-dev/installation.md): Install the TemPad Dev browser extension and configure initial settings
- [Introduction](https://mintlify.wiki/ecomfe/tempad-dev/introduction.md): Inspect panel on Figma, for everyone - Extract CSS, JavaScript, and component code from Figma designs
- [Agent Skill Installation](https://mintlify.wiki/ecomfe/tempad-dev/mcp/agent-skill.md): Install the Figma-to-code skill for production-ready UI implementation
- [MCP Server Configuration](https://mintlify.wiki/ecomfe/tempad-dev/mcp/configuration.md): Environment variables and advanced configuration options
- [MCP Server Overview](https://mintlify.wiki/ecomfe/tempad-dev/mcp/overview.md): Pull Figma design code and context directly into coding agents and IDEs
- [MCP Server Setup](https://mintlify.wiki/ecomfe/tempad-dev/mcp/setup.md): Step-by-step guide to installing and configuring TemPad Dev MCP
- [MCP Tools Reference](https://mintlify.wiki/ecomfe/tempad-dev/mcp/tools.md): Detailed documentation for TemPad Dev MCP tools and their schemas
- [Available Plugins](https://mintlify.wiki/ecomfe/tempad-dev/plugins/available-plugins.md): Official registry of TemPad Dev plugins
- [Creating Plugins](https://mintlify.wiki/ecomfe/tempad-dev/plugins/creating-plugins.md): Build custom code generators with the TemPad Dev plugin SDK
- [Deploying Plugins](https://mintlify.wiki/ecomfe/tempad-dev/plugins/deploying-plugins.md): Host and share your TemPad Dev plugins
- [Plugin System Overview](https://mintlify.wiki/ecomfe/tempad-dev/plugins/overview.md): Customize TemPad Dev's code output with powerful, type-safe plugins
- [Quickstart](https://mintlify.wiki/ecomfe/tempad-dev/quickstart.md): Get started with TemPad Dev in 5 minutes - From installation to extracting your first code