# Figma Dev Mode MCP

> Official MCP server from Figma that exposes live structure of selected designs to AI assistants, including hierarchy, auto-layout rules, variants, text styles, spacing tokens, and component references. Allows AI to generate accurate code from real design specs rather than screenshots, reducing friction in frontend development.

- **URL:** https://www.figma.com/dev-mode-mcp-server
- **Category:** Design Tools
- **Tags:** Official, Design To Code, Frontend
- **Updated:** 2026-04-22 08:15
- **Canonical page:** https://mcpserver.ever.works/items/figma-dev-mode-mcp

## Details

## Features

- Expose selected Figma layers with full structural detail, not just pixel dimensions
- Surface design tokens, color styles, and typography definitions
- Provide component variants and their properties
- Return auto-layout constraints and spacing rules

## Use Cases

- Implement selected Figma component as React component using Tailwind
- Extract spacing tokens and color variables from design
- Generate CSS file matching typography styles from Figma frame

## Pricing

Included with Figma Dev Mode access.

---

_This Markdown mirror is generated by Ever Works for AI agents. The canonical HTML page is at https://mcpserver.ever.works/items/figma-dev-mode-mcp._