[Cursor] Figma MCP 연결하기 (더이상의 반복 작업은 지양한다)

기획을 Figma에서 많이 보다 보니, 매번 찾는 게 번거로웠다. 왔다 갔다 왔다 갔다 껐다 켰다 무한반복

 

 

Figma mcp를 연결하면 해소될까? 싶어서 설정 시작.

https://www.figma.com/community/plugin/1485687494525374295

 

---

Figma MCP 설치

아래 링크를 들어가서 다운로드한다. 

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

GitHub - grab/cursor-talk-to-figma-mcp: CTTF: MCP integration between Cursor and Figma, allowing Cursor Agentic AI to communicat

 

(또는 압축파일형태로 `.zip`을 내려받아도 됨)

git clone https://github.com/grab/cursor-talk-to-figma-mcp.git

 

Bun 설치

curl -fsSL https://bun.sh/install | bash

bun이 깔렸는지 확인해보기

ls -l ~/.bun/bin/bun

 

설정

bun setup

socket 서버 실행

bun socket

 

MCP 서버

위 터미널에서 socket 서버가 실행 중이므로 새 터미널을 실행하여 입력

bunx cursor-talk-to-figma-mcp

 

Figma 데스크톱 앱

Figma 데스크톱 앱을 열고 들어간다.

좌측 로고 > Preferences > Enable local MCP server 선택

클릭하면 아래와 같은 팝업이 뜬다. `mcp.json`에 추가해 준다.

Cursor MCP 추가

{
  "mcpServers": {
    "Figma Desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

로컬에서 실행할 때는, Figma Desktop을 실행해야, MCP를 활성화 할 수 있다. 

Cursor Settings에서 활성화되었는지 확인한다.

 

---

사용

난 아래처럼 사용해 봤다. 정확한 명칭으로 검색하면 더 확실하게 나오는 것 같다.

이런 식으로 조회되는 것을 확인할 수 있다.

 

---

활용

지금은 아래와 같이 단순하게 채팅을 써서 확인해 봤다.

• 현재 기획과 구현된 코드를 비교하여 누락된 기능이 무엇인지 확인해 줘
• Figma 화면 기준으로 개발되었는지 검증해 줘

그리고 분석에 나온 결과 토대로, 앞으로 해야 할 작업을 todo에 등록했다.

 

이 외에도 아래와 같이 다양하게 활용할 수 있을 것 같다.

 

예시

1. 디자인 컨텍스트 설명 요청

• “이 Figma 디자인 컴포넌트 구조를 설명해 줘”
• “이 색상 팔레트와 텍스트 스타일을 코드 변수로 추출해 줘”

2. 코드 변환 및 생성 요청

• “이 Figma 설정에 기반해 React 컴포넌트 코드를 생성해 줘”
• “Figma의 버튼 디자인을 Tailwind CSS 스타일로 변환해 줘”

3. 변경 및 수정 가이드 생성

• “이 디자인에서 버튼을 비활성화 상태로 수정하는 코드를 알려줘”
• “컴포넌트 간 간격을 16px로 조정하는 코드를 작성해 줘”

4. 작업 문서화 및 리뷰

• “현재 Figma 디자인 변경 내역을 요약 보고서 형태로 작성해 줘”
• “컴포넌트 이름과 사용법을 설명해 개발자용 문서로 만들어줘”

5. 질문-응답

• “이 디자인 모듈의 접근성 고려 사항을 요약해 줄래?”
• “이 색상 조합이 WCAG 대비 기준에 적합한가?”

 

---

참고

https://help.figma.com/hc/ko/articles/32132100833559-Dev-Mode-MCP-%EC%84%9C%EB%B2%84-%EC%95%88%EB%82%B4%EC%84%9C

Dev Mode MCP 서버 안내서

 

이로써 오늘도 능률 +1 되었기를 바라며...