[FE] Figma와 cursor MCP 연결하기!

 

 

 

요즘 cursor와 거의 함께 하다 싶이 하다. vscode 와는 이별한지 오래..
가끔 퍼블리싱 작업을 진행할때 피그마에서 해당 내용을 스크린샷 해다가 사진을 넣고 '해줘'라고 부탁한다. 퍼블리싱에 시간을 줄이고 비즈니스 로직에 집중하기 위한 ^^;

하지만 사진으로 하다보면 이상하게 퍼블리싱을 뽑아줄 때가 있다. 색이 다르다거나 폰트 크기가 다르다 든가 말이다. 당연히 사진의 한계겠지.. 하지만 이런 이슈를 한 번에 잡아줄 방법이 하나 있다. 프로출신들은 이미 알고 있는 방법, Figma MCP를 cursor에 연결하는 것이다. 해당 MCP를 연결하면 정확한 값을 가지고 와서 퍼블리싱을 진행해 준다. 그럼 빠르게 알아가 보자.

 

 

순서는 아래와 같다. 이미지도 함께 했으니 쉽게 따라올 수 있을 것이다.

1. 피그마에서 토큰값 확인하기

2. 커서 설정에서 MCP 연결해 주기 (with 토큰)

3. 적용해 보기

 

 

 

1. Figma에서 토큰값 확인하기

피그마 홈 좌측 상단에 본인 아이디를 클릭하면 메뉴가 출력되는데  Settins → Security 로 이동한다.

 

 

 

하단에 Personal access tokens 부분에서 Generate new tokens를 클릭해서 생성해 주고 토큰값을 복사해 둔다.

생성한 직후에만 값을 확인할 수 있기 때문에 반드시 바로!! 저장해 둘 것. 

 

 

2. Cursor 설정에서 MCP 연결해 주기 (with 토큰)

 

커서를 켜고 Preference → Cursor Settings에 접속한다.

 

 

이후 [Tools & Integrations] 메뉴에서 [New MCP Server]를 클릭해 준다.

 

 

 

 

그러고 나면 json 파일을 추가할 수 있는데 아래의 값을 복사해 주고 저장해 주면 끝!

[복사한 토큰 값]에는 조금 전에 복사해 둔 피그마 토큰 값을 넣어주면 된다.

 

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=복사한 토큰 값",
        "--stdio"
      ]
    }
  }
}

 

아래와 같이 불이 들어왔다면 연결이 완료된 것이다! 정말 쉽죠?

 

 

 

3. 적용해 보기

이제 피그마에서 아래같이 링크 복사 버튼을 가지고 와서 agent에게 붙여 넣으면서 작업을 부탁하면 정확하게 작업을 진행해 준다. 이제 당신의 퍼블리싱 시간은 예전에 비해 현저히 줄어들 것이다~!

 

 

 

해당 기능은 node 18 이상의 상태에서만 정상 작동한다고 한다.

그래서 본인은 기존에 16인 상태에서 에러가 처음에 났었는데, 노드 버전을 변경하고 cursor를 재부팅하고 나니 정상 적용 되었다! 

(에러 상황에서 agent가 알아서 방법을 추천해 주고 진행해 주긴 한다!)

 

 

---

 

 

퍼블리싱은 처리했으니 비즈니스 로직에 집중하라구~!