🎨 Figma MCP로 프론트엔드 5초컷!하기

피그마를 다룰 줄 아시나요? 그렇다면 당신은 축복....
프론트엔드를 단 5초만에 만들어버릴 수 있습니다^^
지금부터 Cursor AI로 프론트엔드를 함께 만들어보아요

준비물

1. 피그마 계정 🎨
2. IDE (VScode 또는 IntelliJ 등등) 🖥️
3. 분주하게 움직일 손 ✋

1. Cursor AI 다운로드

먼저 피그마를 조종할 AI를 로컬 환경에 다운로드해야한다.
https://www.cursor.com/
위의 사이트로 접속하면 이렇게 멋찐 사이트를 볼 수 있다

OS에 맞추어 다운로드하면 된당

다운로드하고 기초 설정을 끝내기!

뭔가 안된다 싶으면 공식 문서를 참조하세용⭐️
https://docs.cursor.com/get-started/introduction

2. Figma MCP 가져오기

다음으로는 깃허브에 올라가있는 Figma MCP를 로컬에 가져와보자
(굉장히 많은 피그마 mcp들이 깃에 올라와있기 때문에 그냥 맘에 드는걸로 가져와서 쓰면된당)
https://github.com/GLips/Figma-Context-MCP
아래 링크로 들어가서

원하는 방식으로 로컬에 clone 해온다

그리고 cursor를 다시 켜서 이 다운받은 파일을 켜준다

open project로 아까 다운받은 파일을 열어주고 이제 대기!

3. 피그마 플러그인 열기

피그마에 다시 들어가서 내가 ai를 적용하고 싶은 프로젝트에 들어간다
나는 저번 프로젝트에서 만들었던 와이어프레임을 열어줬다

여기서 플러그인을 열어주는데,

가장 위에 보이는 Cursor Talk To Figma MCP Plugin을 열어준다

이 플러그인을 열면 아래의 팝업이 뜨는데,

MCP Configuration에 있는 코드를 복사해준다
그리고 채널명도 잘 기억해두자

4. Cursor MCP 설정

이 복사한 코드를 넣어줄건데, 다시 커서로 돌아와서

Cursor Settings에 들어간다

그리고 MCP 탭에 들어가서 오른쪽 위에 보이는 Add new~ 하는 버튼을 클릭해서 나오는 아래의 mcp.json 파일에 아까 복사한 MCP Configuration을 넣어주자.

중요한것!!!!!!
기본으로는 "command": "bunx" 이렇게 되어있을 텐데, 이걸 "command": "npx"로 바꿔줘야함

왜냐하면... 이거 안하면 연결이 잘 안되기 때문,, 왜 기본이 이건지 잘모르겠으나ㅠ 저는 이렇게 바꾸고 바로 해결됐습니다ㅠㅠ

이렇게 적용하고 저장한 후 Settings로 다시 돌아갔을때,

초록색으로 잘 연결되고 있다고 떠야 성공적으로 연결된것!!
자 이제 커서의 채팅창에 아까 봤던 피그마 채널명을 넣고 연결되었냐고 물어봤을때, 연결됐다고하면 끗!

5. Figma 5초만에 코드로 바꿔버리기

잘 연결됐는지 실험해보기

다시 피그마로 돌아와서 적용하고 싶은 프레임을 선택하자

그리고 명령을 넣어주고 적용해보자
나는 다크모드로 바꿔달라고 해봤다

그러면 이렇게 다크모드로 잘 바꿔준 모습을 확인할 수 있다!!!

코드로 바꾸기

잘 작동하는 것은 확인했으니, 프레임을 코드로 바꿔보자

지금 선택된 프레임을 HTML과 CSS로 구현해서 현재 폴더에 추가해줘. 
각 로그인이 써있는 부분은 버튼이고 누르면 구글홈페이지로 넘어갈거야. 적용해줘

라고 프롬프트를 넣어보자
나는 로그인하는 화면을 넣어봤다

이처럼 잘 적용된 모습을 볼 수 있고, 이 코드를 원래 쓰는 IDE로 가져와서 liveServer를 켜보자

엄청 잘 만들어진 모습을 확인할 수 있따!!
좀 다듬긴해야겠지만, 이렇게 틀이 있는것과 없는 것은 미친 차이가 있기때문에,, 대박이다

지금까쥐 mcp로 프론트엔드 핵짱빠르게 만들기 끗!

참고로 cursor에게 "지금 연결된 피그마에 ~~만들어줘"하면 만들어주기도 합니당!