MCP: Turn Figma designs into front-end code

Are you still manually extracting style information from Figma designs and writing front-end code for them? If so, Trae IDE's Model Context Protocol (MCP) functionality is recommended. By using the MCP server - Figma AI Bridge, you can automatically convert your Figma designs into neat front-end code and generate corresponding web pages. The whole process is simple and efficient, requiring no complex configurations. Follow the instructions in this tutorial to experience smart design delivery with Trae IDE. Let's get started!

Demonstration

Demo system environment

The system environment used in this tutorial is as follows:

• Trae IDE version: 1.3.5
• macOS version: 14.7
• Node.js version: 20.19.1
• npx version: 10.9.2
• Python version: 3.13.3
• uvx version: 0.6.16

Procedure

Follow the tutorial to integrate MCP server - Figma AI Bridge into your project, configure the agent, and then use natural language to ask AI to generate front-end pages.

Step 1: Install Trae IDE

Trae IDE is deeply integrated with AI, offering AI Q&A, code auto-completion, and AI-powered programming capabilities driven by agents. When developing projects with Trae IDE, you can collaborate flexibly with AI to enhance development efficiency.

Go to Trae's official website to download the installation package for Trae IDE, and then install it on your computer.

Step 2: Configure the runtime environment for MCP servers

To ensure that MCP servers can start up normally, you need to install the following dependencies:

• npx: a tool included in Node.js (the version must be 18 or later)
• uvx: a lightweight Python script runner from the uv toolchain

First, to facilitate installing dependencies via command lines later, let's open the terminal in Trae IDE. The steps are as follows:

1. Launch Trae IDE.
2. In the top menu bar, click Terminal > New Terminal.
3. The Terminal panel appears at the bottom of the interface.

Install uvx

After opening the terminal, use the following steps to install uvx:

1. Go to Python's official website, download and install Python 3.8 or later.

2. After the installation is complete, run the following command in the terminal to confirm whether the installation was successful:

   python3 --version

   If the installation is successful, the terminal will output the installed version number of Python.

3. Run the following command to install uv (including uvx):

   Installation command for macOS / Linux:

   curl -LsSf https://astral.sh/uv/install.sh | sh

   Installation command for Windows (PowerShell):

   powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

4. Run the source $HOME/.local/bin/env command to load the runtime environment variables and initialization settings required for uvx.

5. Run the following command to verify whether the installation was successful:

   uvx --version

   If the installation is successful, the terminal will output the installed version number of uvx.

Install Node.js

After uvx installation is complete, follow the steps below to install Node.js:

1. Go to the Node.js official website to download and install Node.js version 18 or later.

2. After the installation is complete, run the following command in the terminal to confirm whether the installation was successful:

   node -v
   npx -v

   If the installation is successful, the terminal will output the installed Node.js version number, for example:

   v18.19.0
   10.2.0

3. Restart Trae IDE to activate Node.js.

Step 3: Generate your Figma Personal Access Token

When configuring Figma AI Bridge, you need to enter your Figma Personal Access Token. You can obtain it in Figma's security settings center. The steps are as follows:

1. Click on the user avatar in the upper-left corner of the page, then select Settings from the menu.
2. The settings window appears.
3. From the top menu of the window, select Security.
4. You have entered the security settings panel.
5. Navigate to the Personal access tokens section, then click the Generate new token button.
6. The Generate new token pop-up window appears.
7. Configure your Figma Personal Access Token:
   • Enter the name of the token
   • Set the validity period of the token
   • Configure the token's permission scope. Directly use the configurations in the table below:

Permission Type	Permission Scope
Code Connect	Write
Comments	Read and write
Current user	Read-only
Dev resources	Write
File content	Read-only
File versions	Read-only
Library analytics	Read-only
Library assets	Read-only
Library content	Read-only
Projects	Read-only
Team library content	Read-only
Variables	Read and write
Webhooks	Read and write

8. Click the Generate token button at the bottom of the window.
9. Your Figma Personal Access Token is generated. You will use it later when configuring the MCP server - Figma AI Bridge.

Step 4: Add the MCP server - Figma AI Bridge

1. Open Trae IDE.
2. In the top-right corner of the AI chat box, click the Settings icon.

Related Articles

• Model Context Protocol
• MCP: Implement automated web testing
• Set up Trae
• What is Trae IDE?