소개
MCP로 Figma를 해보고 싶었어요. Cursor에 설정해서 다이어그램 하나 그려봤습니다.
진행 방법
원래는 클로드에 연동해서 Figma 디자인을 생성해보고 싶었는데 클로드에 연동 가능한 MCP 서버는 디자인 파일 읽기밖에 안되더라구요. 저는 디자인 생성!을 하고 싶어서 Cursor에 연동했습니다.
sonnylazuardi/cursor-talk-to-figma-mcp: Cursor Talk To Figma MCP
여기에서 fork를 한 다음에 git clone으로 소스를 당겨왔습니다.
bun 설치해야 하는데, 윈도우라서 "Windows + WSL Guide" 섹션에 있는 대로 했어요.
powershell -c "irm bun.sh/install.ps1|iex"그리고 WSL2 활성화가 필요합니다.
wsl --set-default-version 2이렇게 했는데 bun이 잘 인식이 안 되서 WSL에 bun을 설치했습니다.
curl -fsSL https://bun.sh/install | bash근데 또 unzip이 설치되어 있지 않아서 설치.. ㅠ.ㅠ
sudo apt install unzip -y경로 업데이트도..
source ~/.bashrc그 과정에서 sudo 패스워드와 아이디를 잊어서.. 다시 설치 후 재설정까지.. ㅠ.ㅠ
아.. 어렵네요..
이거 먼저 한 다음에 소스를 찾아서 hostname 부분의 주석 처리를 삭제합니다.
드디어 마지막.. 웹 소켓을 시작합니다.
bun socket또 할 게 있어요.. (계속 뭐가 나옴.. ㅠ.ㅠ)
https://www.figma.com/community/plugin/1485687494525374295
여기서 Figma 플러그인을 설치한 후,
여기서 Run을 하고
이 채널 아이디를 복사해 둡니다.
그리고 밑에 나오는 json을 복사해서 Cursor 설정 파일 편집!
드디어 Cursor에서 인식했습니다. 이제 채팅 창에서 아래를 입력합니다.
cursor talk to figma plugin channel : (채널이름)이렇게만 하면 Figma를 자유자재로 쓸 줄 알았어요.
고난의 시작은 지금부터였습니다.. ㅠ.ㅠ
일단 대량의 데이터를 주고 PPT를 만들어달라고 해 봤어요. 결과는 영 시원찮았습니다.
글씨만 잔뜩 넣어주더라구요.
그래서 이번에는 다이어그램을 하나 그려봤습니다.
많이 보신 MCP 구조 그림을 주고 여기에 디자인을 입혀달라고 했어요.
이 그림을 주고 인포그래픽 스타일로 디자인을 입혀 달라고 했습니다.
여기까지 오는 데도 아주 힘들었어요. 특히 밑의 Internet 컨테이너가 너무 작게 그려져서
안의 엘리먼트가 밖으로 비져 나가고, 전체 다이어그램이 잘리고.. 쉽지 않았습니다.
그래도 애니메이션을 넣고 싶었습니다.
여기까지 간신히 했는데, 이걸 PPT에 넣을 수 있는 SVG 파일로 만들려다..
너무 힘들어서 그만 두었습니다.
생성되는 파일이 이런 식이에요.
저 라인 엇나간 걸 고쳐보려고 무수한 노력을 해봤는데, 도저히 안되더군요. ㅠ.ㅠ
어렵습니다.. ㅠ.ㅠ
그리고 좀 멋진 웹 페이지 디자인 같은 걸 해보려고 했는데, 음.. 그것도 잘 안되었어요.
그래서 아예 Figma 템플릿을 구한 다음에
내용을 Figma MCP로 채우는 정도는 할 수 있지 않을까 해서
시도해보려고 합니다~
결과와 배운 점
윈도우에 파이썬 조합이 제가 쓰는 조합인데, 별로 간편한 환경은 아닌 듯 하네요.
Figma 쪽을 쓸 줄 몰라, 조금 봐야겠습니다. 알고 쓰는 것과 모르고 쓰는 것은 다르니까요.
도움 받은 글 (옵션)
sonnylazuardi/cursor-talk-to-figma-mcp: Cursor Talk To Figma MCP