Cursor, Figma MCP를 활용해 퍼블리싱하기

1. 요약

1-1. 만족도

• 4/5
• 앞으로 퍼블리싱은 초안은 대부분 Cursor를 활용할 계획입니다.

1-2. 계기

• YouTube 영상 - 꽤 충격적이었고, 꼭 해봐야겠다고 생각이 들었습니다.

• 추가로 요즘 LLM들은 요구사항을 충분히 설명하면 웬만한 복잡한 기능을 충분히 만들어주기 때문에 퍼블리싱 역시 대부분 반복 작업이기 때문에 충분히 가능하다고 생각했습니다.

2. 설치 방법

2-1. Figma PAT(Personal Access Token) 만들기

• Figma Home > Me > ‘Settings’ 버튼

• Modal > ‘Security’ 탭 > ‘Personal access tokens’ > ‘Generate new token’ 링크 클릭

• ‘File content’, ‘Dev resources’ 속성을 ‘read-only’로 설정하고 생성

• 생성된 값

figd_*****

2-2. Cursor MCP 설정

• ‘Cursor Settings’ > ‘MCP’ > ‘Add new global MCP server’ 버튼

• mcp.json에 다음 내용 추가



• MacOS/Linux

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

• API Key도 적용하고, 저장

• 자동으로 MCP 서버로 Figma MCP가 구동되고, ‘Output’ 탭 > ‘Cursor MCP’를 선택해 출력을 확인할 수 있습니다.

3. 후기

3-1. 결과

• 확실히 퍼블리싱도 충분히 가능했습니다.

• 100%는 아니지만 얼추 해주기 때문에 검수 위주로 작업할 수 있습니다.

• 100% 직접 할 때보다 피곤함이 50-80% 정도입니다.

• 좌: 디자인, 우: 퍼블리싱 초안

• 간단할수록 더 잘 퍼블리싱합니다.

3-2. 한계

• 100% 퍼블리싱은 어렵습니다.

3-2-1. Figma MCP의 한계

• 디자인 자체가 복잡할수록 아예 이해를 실패하는 경우가 생기는 듯했습니다.

• 이해를 이상하게 하는 경우도 있었습니다.

3-2-2. Cursor의 한계

• 기존 폴더 컨벤션을 빈번하게 위반합니다.

• cursorrules가 있음에도 불구하고 기술 스택도 매번 지정해줘야 합니다.

4. 번외

• 퍼블리싱은 보통 컴포넌트 단위로 하다보니 Story를 작성할 일이 많은데요, Storybook Story 만들어주는 건 좀 편하고, 잘 합니다!