> ## Documentation Index
> Fetch the complete documentation index at: https://docs.firebender.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma

> Access Figma designs, extract components, styles, and layout information for design-to-code workflows

## Connect Firebender to Figma

Connect Firebender to Figma to access your design files and convert designs into code.
Figma now supports remote MCP with Firebender.

<video autoPlay loop muted playsInline style={{width: '100%', borderRadius: '12px'}}>
  <source src="https://mintcdn.com/firebendercorp/JSX-KE-pMIQ-3Nqc/assets/mcp/figma.webm?fit=max&auto=format&n=JSX-KE-pMIQ-3Nqc&q=85&s=7979b26365b2c04d6642e0391dd2580d" type="video/webm" data-path="assets/mcp/figma.webm" />
</video>

## What is Figma?

Figma is a collaborative design and prototyping platform that allows teams to create, share, and iterate on designs in real-time.

With the Figma MCP integration, Firebender can:

* Access design files and components
* Extract styles, colors, and typography
* Read layout information and constraints
* Convert designs into code
* Sync design changes with your codebase

## Prerequisites

Before connecting Firebender to Figma, ensure you have:

* Access to the Figma remote MCP server
* Ability to authenticate from Firebender

## Installation

Click the button below to install the Figma MCP server:

[Add to Firebender](jetbrains://studio/firebender/add_mcp?id=figma)

Or manually configure in your `firebender.json`:

```json theme={null}
{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}
```

## Use Cases

* **Design to Code**: Convert Figma designs directly into React, Vue, or other framework components
* **Style Extraction**: Pull design tokens, colors, and typography into your codebase
* **Component Sync**: Keep your UI components in sync with design files
* **Layout Analysis**: Get precise layout information for implementation

## Tools Reference

See Figma's full MCP tools and prompts reference:
[Figma MCP tools and prompts](https://developers.figma.com/docs/figma-mcp-server/tools-and-prompts/)

<Note>
  Firebender currently supports MCP tools in this integration. MCP prompts are not supported yet.
</Note>