💌 요즘 핫한 피그마 MCP 들어보셨나요?

Talk To Figma MCP 써봤습니다!

안녕하세요! 이번주는 제가 최근에 발견하고 완전 빠져버린 피그마 MCP를 소개해드릴게요. 

"모바일 로그인 화면 만들어줘"라고 말하면 진짜 그 화면이 뚝딱 생기는 AI 도구가 있어요. Figma에서 직접 디자인하지 않아도, 그냥 말 한마디로 화면을 만들어주는 Talk To Figma MCP예요. 마지막에 설치방법까지 정리했으니 끝까지 읽어주세요 ☺️

말로 만드는 디자인, 이렇게 작동해요.

Talk To Figma MCP는 Cursor라는 에디터와 Figma를 연결해주는 도구예요. Cursor 채팅창에 명령어를 입력하면 Figma에서 디자인이 생성돼요.

특히 놀라운 건 한글 명령어도 잘 알아듣는다는 거예요! 한영 혼용도 문제없이 작동하고, 디자인 전문 용어도 인식해요.

예를 들면 이런 명령어들이 가능해요

실제로 해보니 이런 점이 좋았어요.

직접 써보니 명령어 하나로 피그마에서 UI를 자동 생성하는 기능이 신기했어요. "모바일 앱용 간편 로그인 화면 만들어줘"라는 간단한 명령으로 완성된 화면을 바로 얻을 수 있었어요. 로그인 버튼부터 소셜 로그인 옵션까지 모든 요소가 적절한 간격과 크기로 잘 배치되었어요.

"다크모드로 바꿔줘"라고 하니 배경색과 텍스트 색상이 자동으로 바뀌었고, "다크모드에서 버튼 대비를 더 높여줘"라고 했을 때는 버튼 색상이 눈에 띄게 조정되어 보기 좋아졌어요.

다만 아쉬운 점은 아이콘 생성 기능이 아직 완벽하지 않다는 거예요. 아이콘을 그려달라고 해도 제대로 인식이 안됐어요. 앞으로 업데이트를 통해 개선되길 기대해봅니다.

이런 작업들이 가능해요.

이럴 때 써보세요!

솔직한 후기 

처음엔 "AI가 만든 디자인이 얼마나 괜찮을까?" 의심했지만, 실제로 써보니 초기 프로토타이핑과 반복 작업에서 시간을 절약할 수 있었어요. 단, 디자이너 입장에서는 이거 자동으로 그려주긴 하는데 좀 답답하다고 느낄 수 있어요. 왜냐면 커서에서 일일이 컴펌을 해주고 아직은 초기여서 제대로 배치가 안 될 때가 있거든요.

디자인 비전공자가 쓸 때 유용할 거라고 생각했습니다. "모바일 로그인 화면 만들어줘" 한마디면 끝나니까요. 디자이너에게도 AI 비서 한 명쯤은 필요한 시대, Talk To Figma MCP가 그 역할을 톡톡히 해줄 거예요!

설치는 간단해요.

자세히보기

Cursor-talk-to-Figma-MCP 사용법

1. cursor-talk-to-figma-mcp 페이지에 접속합니다.

2. Download ZIP 클릭

3. ZIP을 풀고 파일위치(예시: Documents)에 해당 폴더를 옮겨주세요.

4. https://www.cursor.com/ 페이지에 접속해 해당 어플리케이션을 다운 받습니다.

5. Cursor 앱을 실행합니다.

6. Open folder - cursor-talk-to-figma-mcp를 열어줍니다.

 6-1. 상단 툴바에서 Terminal-New terminal을 열어주세요.

 6-2. Bun 설치 (차례대로 터미널에 복사 붙여넣기 해 주세요)

설정 실행 

 웹소켓 서버를 시작

7. 커서의 새로운 터미널 열어서 입력
New client connected 라고 나왔으면 연결 성공!

피그마 플러그인 설치 

1. 피그마 플러그인을 설치해주세요.

플러그인 바로가기

2. 하단의 코드를 복사해주세요.

3.  Cursor > 설정아이콘 > MCP > add new glal mcp server 
복사한 코드를 넣어주세요.

4. 피그마 플러그인의 채널이름을 복사합니다.

5. Cursor 채팅창에 cursor talk to figma plugin channel : (채널이름) 을 입력하고 Send 버튼을 누릅니다. 

6. 채팅창에 명령어 실행

ex) 로그인 화면UI를 제작해주세요. 

마무리하며

오늘 소개한 아티클 도움이 되셨나요? 디자인픽 뉴스레터를 구독하시면, 한땀한땀 모은 디자인 레퍼런스 사이트 100개를 선물로!웰컴 메일로 더 많은 정보가 담긴 1초 만에 바로 받아보실 수 있습니다!

지금 구독하기