[ShowReco] Cursor, Figma MCP로 화면 디자인하기

2025.06.27 - [프로젝트/ShowReco] - [ShowReco] 요구(기능)사항 정의 - 음반 컬렉터들을 위한 SNS 플랫폼

[ShowReco] 요구(기능)사항 정의 - 음반 컬렉터들을 위한 SNS 플랫폼

 
 
지난 포스팅에 걸쳐 진행했던 요구사항과 기능 명세를 마치고 이제 화면을 그릴 차례다
 

개박자에게 '디자인'이라는 거대한 벽
 

솔직히 프로젝트의 모든 단계 중 이 단계가 가장 막막하게 느껴졌는데..
 
회사에서 협업을 할 때도 디자이너가 전달해주는 완벽하게 정리된 피그마만 전달받아 작업해왔지 
 
실제로 피그마로 작업을 해본적도 없고 디자인에 감각도 없다.. 그래서 요즘 핫한 Figma MCP를 사용하여 화면 디자인을 하기로 했다.
 

Cursor와 Figma MCP
 

Cursor, Figma MCP 연결법은 다른 분들이 많이 남겨주셨으니 따로 상세하게 적지는 않을것이고 (Windows 환경에서는 MCP 연결 과정이 꽤나 귀찮다) Mac 기준으로 간단히 연결방법을 정리하자면 
 

1. Cursor로 cursor-talk-to-figma-mcp 를 열고..
2. Bun을 설치하고.. (초기에만)
3. WebSocket 서버를 시작하고..
4. MCP 서버를 시작하고..
5. Figma 플러그인 Cursor MCP Plugin을 연결하고 채널이름이 나오면..
6. Figma 채널에 Join 시키고..

 
Cursor 채팅창에 내 기능명세서를 프롬프트삼아 명령을 내리면 피그마에 바로 자동 생성 시켜준다.
 
디자인 감각이 없는 내가 봐도 세련되진않지만 충분히 도움이 많이 된다
 
좀 더 구체적으로 명령을 내려야 할 것 같다.

피그마를 수정해달라고 명령

MCP가 만들어준 로그인 화면