03. Figma MCP 둘러보기 : Cursor Talk To Figma Plugin 커서 플러그인 다운 및 활용하기 [피그마 MCP]

 

 

 

다음은 피그마에서 활용할 수 있는 MCP 기능에 대해 알아봅시다!

 

우선 피그마에 들어오셔서 하단 메인 툴바에서 검색창을 켜 주세요.

MCP라고 검색하면 아래와 같은 화면이 뜹니다.

 

 

 

1. Enable Dev Mode MCP Server

Figma에서 공식적으로 지원하는 MCP입니다. 아직은 연동이 어렵고, 기능이 부족하지만 추후 업데이트가 기대되기때문에 우선은 알아만 두시면 좋을 듯 싶습니다.

 

2. Cursor Talk To Figma MCP Plugin

해당 MCP 플러그인이 저희가 함께 연동해볼 플러그인입니다. Cursor AI 코드 에디터에 연결해서 피그마에서 디자인한 작업물을 바로 코드로 옮길 수 있는지 테스트해볼거에요.

 

그 외에 클로드나 윈드서프같은 다른 툴과도 연동할 수도 있긴 합니다. 추후에 한번 시도해보고 비교해보면 좋을 듯 싶네요.

 

 

 

 

아무튼 플러그인을 클릭하고 들어와서 인스톨 버튼을 누르면 위와 같은 창이 뜹니다.

 

플러그인을 실행하면 보이는 초록색 박스 안의 영문은 나중에 활용해야합니다.

(MCP 서버를 열고, 연결하면서 다시 만들 것이기 때문에 우선은 잘 뜨는 것까지만 확인해주세요.)

 

 

 

+ Cursor 다운받기 링크

 

이어서 작업을 진행하기 위해서 Cursor 라는 코드 에디터를 다운받아야합니다.

공식 웹사이트 우측 상단의 다운로드 버튼을 누르시면 자동으로 다운이 시작됩니다.

 

다운로드 및 실행은 일반적인 프로세스와 동일하기 때문에, 제가 따로 글을 적지는 않을거에요.

유튜브나 다른 글들도 이미 잘 되어있기 때문에 금방 실행하실 수 있으실겁니다.

(그래도 혹시 필요하시다면 알려주세요!!)

 

 

---

 

 

다음부터는 본격적으로 피그마와 커서를 연결해볼거에요.

말로만 듣던 MCP지.. 결국 본질적으로 이해하기는 어려워서 하나씩 시도해보고 부딪혀보고 있는 중이라 너무 아픕니다..ㅎㅎ

그래도 한 단계씩 거쳐서 결국 한번이라도 완성해내면 되는 것 아니겠어요?

한 번 자동화 프로세스를 만들어놓으면 나중에는 조금 더 빠르게 작업할 수 있겠죠!

 

다들 조금만 더 화이팅입니다!!