Introduction

In this post, I’ll explore how to use Figma’s MCP (Model Context Protocol) in the Agent Code Editor. We’ll cover the basic setup, available MCP tools, and best practices for efficiently using this powerful combination of design and development tools.

Setup Steps

Step 1: Enable MCP Server in Figma

Enable MCP Server in Figma Settings

Step 2: Configure Your MCP Client (IDE)

Configure MCP Client Settings

Step 3: Start Using MCP in Your Client

MCP Client Interface

Note: You can also copy a Figma frame or layer URL and ask your MCP client to implement the selected design. For more information, see the official documentation.

Available MCP Tools

1. get_code

Generates code based on your Figma selection. By default, it outputs React with Tailwind CSS, but you can customize the output through prompts:

1
2

Generate my current Figma selection using Tailwind CSS + HTML
Generate my current Figma selection using existing components in theme/custom/radix_opc/component folder

2. get_image

Captures screenshots of your selection to maintain layout fidelity. Useful for:

1
2

Could you match the color and spacing of the image in its container with my current Figma selection?
Match the layout of card components in their container with my selection in Figma

3. get_variable_defs

Returns variable definitions and styles used in your selection, including:

  • Colors
  • Spacing
  • Typography

Example prompts:

1
2
3

Get all color variables used in my Figma selection
What color and spacing variables are used?
List the variable names and their values in my Figma selection

Best Practices

In Figma

  1. Component and Variable Usage

    • Use components for reusable elements
    • Implement variables extensively for spacing, colors, and typography
    • Utilize auto-layout and grid-layout whenever possible

  2. Naming Conventions

    • Use semantic layer names (e.g., CardContainer, CardItem_Image)
    • Avoid generic names like Frame1

  3. Design Documentation

    • Add annotations to communicate design intent
    • Document component reuse patterns
    • Use Figma’s annotation features to add measurements and notes
    • These annotations will be converted to HTML data attributes (data-content-annotation) when using the get_code tool (see: example)

When Prompting

  1. Be Specific About Technology

    • Specify your tech stack and framework preferences
    • Mention any styling system requirements

  2. Encourage Component Reuse

    • Ask the agent to utilize existing components
    • Prefer modifying existing files over creating new ones

Example prompts:

1
2
3

Generate Tailwind CSS HTML code in this Twig template that aligns with my selected frame
Use DaisyUI to assemble this particular frame I selected
In this component, reuse my existing src/pricing-card to display the pricing information

References