[AI/MCP] figma mcp 시작하기

1. Figma API key 생성

1. figma 홈에서 프로필 아이콘 클릭

2. 메뉴에서 Settings 선택

3. 팝업에서 Security 메뉴를 선택하고 아래로 내려 Personal access tokens 항목에서 Generate new token 을 클릭
나오는 메뉴에서 이름과 Expiration, Scopes 등을 설정해 준 뒤 Generate token을 하면 key가 발급됩니다.
발급된 키는 다른 사람과 공유하지 말고 안전하게 보관하세요.

4. 생성된 키를 Copy this token 를 눌러 복사

 

 

2. Figma MCP 서버 설정

 

커서가 설치되어 있지 않다면 아래의 링크로 들어가 커서부터 설치해주세요.

https://www.cursor.com/

Cursor - The AI Code Editor

 

 

1. Cursor의 오른쪽 상단의 세팅 아이콘을 클릭

2. Cursor Settings 에서 MCP 선택 후 Add new global MCP server 클릭

3. 나타나는 json 파일에 아래의 텍스트 입력
YOUR-KEY 부분을  Figma 의 Key로 바꿔줍니다.

 

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

 

4. 저장 후 Cursor Settings로 돌아오면 Framelink Figma MCP가 추가된 것을 확인할 수 있습니다.

 

 

5. Figmalink Figma MCP에서 command: 항목에 표기된 내용을 terminal 창에 입력해줍니다.

 

6. Figma mcp가 실행됩니다.
    Figmalink Figma MCP 옆에 초록색 불이 들어오는지 확인하세요.

 

3. Figma MCP 실행

 

1. 디자인 된 피그마 파일의 Frame을 선택하고 마우스 오른쪽 클릭 후 나타나는 메뉴에서 Copy link to selection 을 선택

 

2. 복사된 링크를 Cursor 채팅창에 입력하면 디자인을 코드로 변환해줍니다.
     react, next 등 사용하는 프레임워크의 기본 프로젝트 세팅이 된 후 디자인 변환을 요청해야합니다.

 

참고 문서:

https://github.com/GLips/Figma-Context-MCP?tab=readme-ov-file

https://www.framelink.ai/docs/quickstart?utm_source=github&utm_medium=readme&utm_campaign=readme