Figma-MCP

Figma-MCP가 최근에 공개가 되었는데요. MCP는 이전에 몇 차례 다루었기에 아래의 게시글을 참고해주시면 이에 대한 내용이 궁금하시다면, 아래의 게시글을 참고해주세요. 

https://x2bee.tistory.com/478

MCP (Model Context Protocol) 소개

https://x2bee.tistory.com/480

MCP를 Claude Desktop으로 간단히 구현해보자.

 

그렇다면 Figma-MCP는 무엇일까요?? Figma는 웹 기반 UI/UX 디자인 및 프로토타이핑, 협업툴인데요. 이를 MCP로 구현해 놓은 서버가 Figma-MCP입니다. LLM이 Figma 리소스와 상호 작용할 수 있는 표준화된 컨텍스트입니다. 디자이너와 개발자는 디자인 작업을 자동화하고 협업을 강화하며 작업 흐름을 간소화하기 위해 AI를 활용할 수 있습니다.

 

그러면 바로 사용할 수 있는 방법을 설명드리도록 하겠습니다. 

 

1. Figma API Key 

 

우선 https://www.figma.com/ 이 사이트에 들어가서 로그인을 해주신 다음, 위의 아이콘을 클릭하면 아래와 같이 됩니다. 여기서 setting을 클릭해주시면 됩니다. 

 

그러면 아래와 같은 팝업이 뜨게 되는데 여기서, Security를 클릭해주시면 Personal access tokens 부분에 Generate new tokens를 클릭하고 이름만 설정 후 Generate token을 클릭해주시면 생성됩니다. 

 

 

그 다음 아래의 git 주소를 clone해서 Figma-MCP 서버를 다운로드 받아주시면 됩니다. 

 

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

 

그다음 Node.js 패키지들을 설치해주시면 됩니다. 

 

cd Figma-Context-MCP
npm install

 

 

아래와 같은 명령어로 구동이 가능합니다. 

npm run dev

 

그 다음으로, 구동된 서버와 CursorAI 간의 연결 입니다. 

 

 

Cursor에 들어가서 오른쪽 상단에 있는 환경설정 버튼을 클릭 하면 아래와 같이 되는데, 이때 MCP 메뉴로 이동해주시면 됩니다. 

여기서  + Add new global MCP server 를 클릭하시면  설정할 수 있는 창이 뜨는 경우가 있다고 하는데 저는 Json 파일이 열립니다....

 

 

이와 같이 설정을 해주시면 됩니다. 그러면 설정이 됩니다. 이후의 사용 방법에 대해서는 추후에 추가하도록 하겠습니다...