Cursor에서 Framelink Figma MCP 사용

 

 

1. Figma API key 생성하기

1.1. Figma 로그인

먼저, Figma 웹사이트(https://www.figma.com)에 로그인

 

1.2. Profile 접근

페이지 오른쪽 상단에 있는 프로필 아이콘(아바타)을 클릭. 이 아이콘은 보통 사용자의 이니셜이나 설정한 프로필 사진으로 되어 있다.

1.3. Settings 메뉴

드롭다운 메뉴에서 'Settings' 또는 '설정'을 선택

웹사이트

Figma 앱

 

1.4. API Key 생성

• 'Settings' 페이지로 이동하면 탭 메뉴에서 'Security' 섹션을 찾을 수 있다.
• 이 섹션에서 'Generate new token' 버튼을 클릭

Security

• 생성할 토큰의 용도를 설명하는 이름을 입력하고 'Create' 버튼을 클릭하여 API 토큰을 생성

Generate new token

 

2. Cursor에 Framelink MCP 추가

 

• .cursor/mcp.json 또는 전역 추가
• YOUR-KEY 부분에 Figma에서 생성한 access token으로 교체

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

 

 

3. Cursor에서 컴포넌트 생성

3.1. Figma에서 Copy link to selection

Copy link to selection

 

3.2. Cursor Agent에 프레임 생성

• chat
  자체적으로 프로젝트 표준에 맞게 제작한 룰을 적용해준다.

@Dashboard.tsx 컴포넌트

@https://www.figma.com/design/test&m=dev 

Figma MCP를 사용해서 위 Figma 데이터를 받아와서 UI 구조 파악하고 프레임 만들어줘

@uceo/convert-figma-to-react-rule.mdc 
@uceo/convert-css-nesting-rule.mdc 
@uceo/convert-classname-rule.mdc 
룰 적용해줘

Figma MCP를 사용해서 위 Figma 데이터를 받아와서 UI 구조 파악하고
@NotificationPermissionBanner.tsx 에
컴포넌트 만들어줘

@https://www.figma.com/design/GftRX4TKPBdXilz9vLbbGn/-%EA%B3%A0%EB%B0%A9--Update--25-3Q-?node-id=25398-16345&m=dev 

@gobang/convert-figma-to-react-rule.mdc ,
@gobang/convert-css-nesting-rule.mdc ,
@gobang/convert-classname-rule.mdc 룰 순서대로 적용해줘

 

3.3. 결과물

 

기존(Anima 코드 넣고 룰셋 실행)이랑 다른 방식인 Framelink mcp server를 통해서 컴포넌트를 만들어 보았다.

 

@uceo/convert-figma-to-react-rule.mdc, @uceo/convert-css-nesting-rule.mdc, @uceo/convert-classname-rule.mdc 등 우리 프로젝트 맞게 룰을 잘 정리해 둬서 그런지 두가지 방식 모두 잘된다.

 

다음 작업에는 framelink 위주로 작업해 봐야겠다.