Figma-Context-MCP

https://github.com/GLips/Figma-Context-MCP

With this MCP, Cline can read Figma files and write design code. When applying code, you can request and receive results via Cline chat, so you can ask it to generate the code using tailwindcss or typescript.

이 MCP를 사용하면 Cline이 Figma 파일을 읽고 디자인 코드를 작성할 수 있습니다. 코드를 적용할 때 Cline 채팅을 통해 요청하고 결과를 받을 수 있으므로, tailwindcss나 typescript를 사용하여 코드를 생성하도록 요청할 수 있습니다.

Activate it as if you were publishing a Figma design.

Figma 디자인을 게시하는 것처럼 활성화하세요.

To use this MCP, you need to create a project in Figma, create a file, open the Settings menu, and get a personal access token from the Security menu.

이 MCP를 사용하려면 Figma에서 프로젝트를 생성하고, 파일을 만든 다음, 설정 메뉴를 열고 보안 메뉴에서 개인 액세스 토큰을 받아야 합니다.

If the file address of the created project starts with https://www.figma.com/design/filekey/, you can use that part of the file key.

생성된 프로젝트의 파일 주소가 https://www.figma.com/design/filekey/로 시작하는 경우, 파일 키 부분을 사용할 수 있습니다.

Search for figma on the Cline Marketplace, install it, and try it out.

Cline Marketplace에서 figma를 검색하고 설치한 다음, 사용해보세요.

MCP Configuration File

MacOS / Linux

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

cursor-talk-to-figma-mcp

https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp

https://www.figma.com/community/plugin/1485687494525374295/cursor-talk-to-figma-mcp-plugin

If you can use Figma-Context-MCP to generate code into a Figma file, cursor-talk-to-figma-mcp generates and modifies a Figma file.

Figma-Context-MCP를 사용하여 Figma 파일에 코드를 생성할 수 있다면, cursor-talk-to-figma-mcp는 Figma 파일을 생성하고 수정합니다.

That is, you can use Cline to generate and modify the design you want into a Figma file through cursor-talk-to-figma-mcp, and then use Figma-Context-MCP to code the design file using Cline.

즉, cursor-talk-to-figma-mcp를 통해 Cline을 사용하여 원하는 디자인을 Figma 파일로 생성하고 수정한 다음, Figma-Context-MCP를 사용하여 Cline으로 디자인 파일을 코딩할 수 있습니다.

For cursor-talk-to-figma-mcp, you can use git clone or get the source itself, install it using bun, run the socket, and then connect to Figma’s plugin and use it.

cursor-talk-to-figma-mcp의 경우, git clone을 사용하거나 소스 자체를 가져와서 bun을 사용하여 설치하고, 소켓을 실행한 다음 Figma의 플러그인에 연결하여 사용할 수 있습니다.

In the case of Cline, an error occurs even if you set the MCP configuration file, but if you request a channel connection connected to the Figma plugin through Cline chat and use it, it will be processed normally.

Cline의 경우, MCP 구성 파일을 설정해도 오류가 발생하지만, Cline 채팅을 통해 Figma 플러그인에 연결된 채널 연결을 요청하고 사용하면 정상적으로 처리됩니다.

For cursor-talk-to-figma-mcp, it’s easier to use it with Cursor and Figma Desktop.

cursor-talk-to-figma-mcp는 Cursor와 Figma Desktop을 사용하는 것이 더 쉽습니다.

Cline is not officially supported in cursor-talk-to-figma-mcp yet, so you can connect the channel and use it, but it will show as MCP connection failure and errors will continue to accumulate. Even if you use Cline Chat, it is not officially registered in the Marketplace, so you can use it by setting the configuration file yourself.

cursor-talk-to-figma-mcp에서는 Cline은 아직 공식적으로 지원되지 않습니다. 채널을 연결하고 사용할 수 있지만, MCP 연결 실패로 표시되고 오류가 계속해서 누적됩니다. Cline Chat을 사용하더라도 Marketplace에서는 공식적으로 등록되지 않았으므로, 설정 파일을 직접 설정하여 사용할 수 있습니다.

MCP Configuration File

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}