Figma에 Cladue 연결해서 AI에게 디자인 생성해달라고 하기인데 이제 MCP를 곁들인…

오픈소스 과목에서 프로젝트 UI 디자인을 맡게 되었다.

지금까지 개발자로만 이루어진 프로젝트를 하면서 항상 떠맡듯이 디자인을 맡아왔는데 이번에는 내가 자진해서 디자인을 해보고싶다고 했다. 그동안 디자인 시스템을 개발하거나 동아리 내의 디자인 시스템인 Handy를 사용하면서 디자인에 관심이 생기기도 했고 요즘 핫하다는 MCP를 사용해서 디자인을 AI로 만들어내고 싶었기 때문에 처음으로 자진해서 디자인을 해보고싶다고 했다.

 

그래서 오늘 할 건

 

Figma에 claude 연결하기!!

일단 MCP에 관해 간단히 설명을 해보고 넘어가겠다.

 

MCP(Model Context Protocol)란?

MCP는 Model Context Protocol의 약자로, 대형 언어 모델(LLM)이 외부 애플리케이션과 상호작용할 수 있게 해주는 표준화된 프로토콜이다. AI와 다른 소프트웨어가 서로 정보를 주고받을 수 있는 통로를 만들어준다고 생각하면 된다. 진짜 이해하기 쉽게 설명해보자면 내가 claude를 구독중이라면 이걸 아무 소프트웨어랑 붙여서 결합할 수 있게 하는 것! 다양한 소프트웨어에 코파일럿을 붙이는 느낌이다.

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

GitHub - GLips/Figma-Context-MCP: MCP server to provide Figma layout information to AI coding agents like Cursor

이렇게 만들어져있는 걸 사용하기만 하면 된다.

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

Cursor는 이렇게 피그마에 플러그인도 있고 예제들도 많은데 Cladue는 많이 없다. 그래서 내가 해봤다!

 

Figma와 Cladue를 연결하기 ^_^

준비물

1. Figma 계정 (플랜은 상관 없음)
2. Figma API 액세스 토큰
3. Node.js (v16.0 이상)
4. Claude 계정 (pro? 무료도 되는지는 모르겠다)

1단계 : Figma API 토큰 받기

먼저 Figma API에 접근하기 위한 토큰이 필요하다. Figma 계정 설정에서 쉽게 발급받을 수 있다.

 

1-1. Figma에 로그인하고 프로필 아이콘을 클릭한다.

1-2. 설정(Settings) 메뉴로 이동한다.

1-3. 메뉴에서 '보안(Security)' 탭을 선택한다.

1-4. 아래로 스크롤하여 '개인 액세스 토큰(Personal access tokens)' 섹션을 찾는다.

 

1-5 '새 토큰 생성(Create a new personal access token)'을 클릭한다.

 

1-6. 토큰의 이름을 입력하고 '생성(Create)'을 클릭한다. -> 여기에서 접근 권한 (오른쪽 access는 모두 허용해둔다. write and read나 read only 모두 허용! 근데 안해도 될 것 같다. claude가 figma 캔버스에 직접 그리는 방법은 아니고 캔버스만 보고 새로운 디자인을 만들어주는거라! 지금 생각하니 read only만 해도 될 듯)

 

1-7. 생성된 토큰을 안전한 곳에 복사해 둔다. (이 토큰은 한 번만 표시되므로 꼭 저장해두기!) 

 

 

2단계: IDE에 Figma MCP 서버 추가하기

이제 Figma와 Claude 사이의 다리 역할을 할 MCP 서버를 설정해보자. 나는 Figma-Context-MCP의 Quickstart를 참고했다.

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

Quickstart - Framelink Figma MCP Reference

대부분의 IDE는 MCP 서버에 대한 JSON 설정을 지원한다. 이를 통해 Quickstart를 할 수 있게 된건데! IDE에서 MCP 구성 파일을 업데이트하면 MCP 서버가 자동으로 다운로드되고 활성화되는 방식이다.

 

2-1. Claude Desktop을 설치한다.

mcp 설정을 하기 위해서는 앱이 필요하다고 해서 깔았다.

앱 설치 후에 설정에 들어가면

개발자 섹션을 선택하면 설정 편집이 있는데 이걸 누르면

바로 설정을 편집할 수 있는 claude_desktop_config.json으로 이동시켜준다.

여기에 이것저것 명령어들을 넣어서 mcp를 사용하는 방식이다!

 

2-2. claude_desktop_config.json에 JSON 추가하기

Framelink Figma MCP 서버를 추가하기 위해서는

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

 

이걸 붙여넣어준다. --figma-api-key에는 아까 발급받은 키를 넣어준다.

이렇게 하면 Claude와 같은 AI 도구가 자동으로 MCP 서버를 시작하는 식으로 동작한다!

npx라 깃허브 클론 받고 그럴 필요 없이 알아서 다운받고 처리해준다.

 

2-3. 클로드 앱 재시작하기

json을 변경한 후에는 꼭 앱을 종료 후 재시작해야한다!

그러면 이렇게 망치표시가 뜬다.

개발자 설정에 running이 뜨면 잘 돌아가고 있는 것이고

이렇게 망치 아이콘을 클릭하거나 커넥트 아이콘을 클릭해서 내가 추가한 mcp들을 확인할 수도 있다.

 

3단계: Claude에게 디자인 생성 요청하기

이제 Claude에게 Figma 디자인을 생성해달라고 요청해보자. 명령 전에 Claude에게 피그마 디자인을 링크를 통해 알려줘야 한다.

이런식으로 내가 원하는 부분의 링크를 Copy link to selection을 통해 복사한 후에 이걸 가지고 명령어를 입력하면 된다!

 

3-1. Claude를 열고 새 대화를 시작한다.

이런 식으로 링크와 함께 명령을 작성하면 된다.

그럼 22달러짜리 똑똑한 나의 사랑스러운 클로드가 피그마 파일을 분석해준다. 내가 보내준 링크에는 흰 바탕의 기본 프레임만 존재했다. 이걸 알고 알아서 피그마가 모바일 앱 화면을 뚝딱뚝딱 만들어줬다.

3-2. Figma에 코드를 복붙한다.

제공해준 SVG 코드 전체를 복사해서 피그마에 붙여넣기를 하면 피그마가 자동으로 SVG를 가져오고 편집 가능한 요소로 변환해준다! 

 

생각보다 성능이 괜찮다는 걸 느꼈다.

 

디자인 작업 시 팁

디자인 작업 뿐만 아니라 프롬프팅을 해본 사람이라면 모두 공감할 것인데 ㅎ 0부터 10까지를 전부 만들어달라고 하기보다는 

 

1. 이미 제작되어 있는 디자인의 다른 버전을 만들어 달라고 하자. - 이 디자인을 다크모드로 만들어줘. 포인트 색상은 #~~ 이걸로 수정해주고.

 

2. 레퍼런스를 먹이자. - 이건 아무것도 없는 상태에서 디자인을 만들어달라고 하기보다는 레퍼런스를 모아두고 모아둔 링크를 줘서 이런 스타일로 만들어달라고 하면 더 효과적일 것 같다. + 참고 이미지나 스타일 가이드를 제공하자 - "Material Design 스타일로" 또는 "Apple의 Human Interface Guidelines를 따라" 같은 표현을 사용하자.

 

3. MCP를 중첩으로 사용하자. - 22달러 뽕을 뽑아야 한다!!! 디자인 시스템이 존재한다면 그걸 mcp를 통해 먹이든 뭘 먹이든 먹여서 피그마에 만들어달라 하자!!!

 

처음에는 서버 설정이 조금 까다로웠지만, 한 번 설정을 마치고 나니 너무 재밌었고 여러 MCP들도 다양하게 사용해보고 싶어졌다.

https://github.com/punkpeye/awesome-mcp-servers

GitHub - punkpeye/awesome-mcp-servers: A collection of MCP servers.

이런 어썸한 mcp 들을 모아두는 깃허브도 존재하니 심심할 때 마다 자주 찾아봐야겠다.

 

마치며

AI가 모든 디자인 작업을 대체할 수는 없지만, 초기 아이디어 구상이나 프로토타입 제작을 훨씬 빠르게 할 수 있도록 도와준다는 점에서 그리고 개발자로만 이루어진 프로젝트를 하는 입장에서 이런 도구는 너무나 감사하고... 더 써보고 후기로 찾아오겠다.