피그마와 Cursor 로 웹 디자인 구현하기

 

목표: 피그마로 디자인한 화면 그대로 웹 배포하기

어떻게: 피그마 디자인을 AI 가 대신 마크업(퍼블리싱) 하여 구현

---

첫번째 할일: 피그마/Cursor/Node.js 설치

두번째 할일: 피그마/Cursor 세팅

세번째 할일: 피그마 링크 복붙 -> Cursor에 붙여넣기

---

 

Cursor

: https://www.cursor.com/

Node.js

: https://nodejs.org/ko/download

 

 

-피그마 세팅

(1) [설정]에서'FIGMA_ACCESS_TOKEN'입력 및 피그마 토큰키를 Cursor AI에 입력

(2) 세팅 후 모든 '옵션'을 '읽고 쓰기 가능하게' 설정 변경

 

-Cursor AI 세팅

(1) [설정-MCP]에서 '피그마 토큰키' 입력 후 저장

{

"mcpServers": {

"Framelink Figma MCP": {

"command": "npx",

"args": [

"-y",

"figma-developer-mcp",

"--figma-api-key=피그마토큰",

"--stdio"

]

}

}

}

(2) Node.js다운로드 후, 'Refresh'버튼 클릭하면 빨간불 -> 초록불 바뀜

(3) 폴더 생성 후, 새 플젝 생성

(4) 로컬 서버에 띄우기

-ctrl + shift + L(채팅창 열기/닫기)
-'vite csr로 React 프로젝트를 만들고 싶어' 입력
-y''
-"cd my-react-app
-npm install
-npm run dev" 터미널에서 한 문장씩 입력 후 엔터(총 세번)  

 

아래 복붙하여 입력

"'my-react-app' 폴더 내 'src' 폴더 내에 하나의 components 폴더를 더 생성해주고 아래 피그마 링크를 mcp를 활용해서 정확히 마크업해줘. 궁금한게 있으면 나한테 물어봐줘

@https://www.figma.com/design/q7hEs2xOHHE4i6bnE0oSlk/kim-s-team-library?node-id=530-39&t=27Fz9AmkoFNHW2Fd-4"