실습

04. 실습 — Framelink MCP

목표

Framelink MCP를 설치하고, 공개된 Figma 파일의 한 컴포넌트를 React로 변환하여 워크스페이스에 통합한다.

준비물

•

Figma 계정 (무료 OK)

•

Personal Access Token

•

VS Code + GitHub Copilot

•

Node.js 18+

•

실습용 공개 Figma 파일 URL (Figma Community 디자인 시스템 추천)

실습 1단계 — Figma Token 발급

Figma 웹 → Settings → Security

Generate new personal access token

권한: File content: Read, Variables: Read

토큰 복사 (예: figd_xxxxxxxx)

체크: 토큰을 안전한 곳에 저장 (.env, 1Password 등)

실습 2단계 — VS Code MCP 설정

Ctrl+Shift+P → >MCP: Open User Configuration

다음 추가:

{
  "mcp": {
    "servers": {
      "figma-developer-mcp": {
        "type": "stdio",
        "command": "npx",
        "args": [
          "-y",
          "figma-developer-mcp@0.5.0",
          "--figma-api-key=figd_여기에_토큰",
          "--stdio"
        ],
        "env": {}
      }
    }
  }
}
JSON
복사

>MCP: Restart Server 실행.

체크: Copilot 채팅 도구 패널에 figma-developer-mcp 표시 + get_figma_data 도구 보임

실습 3단계 — 실습 프로젝트 준비

cd E:/실습폴더
npm create vite@latest framelink-practice -- --template react-ts
cd framelink-practice
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
code .
PowerShell
복사

tailwind.config.js, index.css 설정 (공식 MCP 실습과 동일)

실습 4단계 — Figma URL 준비

Figma Community에서 무료 디자인 시스템 파일 1개 복제

•

예: "Material 3 Design Kit", "Untitled UI Free" 등

복제한 파일에서 Card/Button 같은 컴포넌트 1개 우클릭 → Copy link to selection

URL 형태: https://www.figma.com/design/xxxxx/...?node-id=12-34

체크: URL이 ?node-id= 파라미터를 포함하는지 확인

실습 5단계 — 컴포넌트 변환

Copilot 채팅:

다음 Figma 컴포넌트를 React + TypeScript + Tailwind로 만들어서
src/components/Card.tsx 에 저장해줘.
Props는 추론해서 작성하고, 사용된 색상은 인라인 hex 그대로 둬도 좋아.

[복사한 Figma URL]
Plain Text
복사

체크: src/components/Card.tsx 자동 생성, 코드가 디자인과 유사

실습 6단계 — 아이콘 다운로드

Copilot 채팅:

다음 노드의 아이콘들을 SVG로 src/assets/icons/ 에 저장해줘.
[Figma URL]
Plain Text
복사

체크: SVG 파일 생성 + download_figma_images 호출 흔적

실습 7단계 — 페이지 단위 도전

Figma에서 페이지 전체 Frame URL 복사

Copilot:

이 Figma 페이지를 src/pages/Landing.tsx 로 만들어줘.
섹션을 Hero, Features, Pricing, Footer로 컴포넌트 분리.
디자인 토큰은 tailwind.config.js의 theme.extend로 추출.
Plain Text
복사

체크:

•

컴포넌트 분리됨

•

tailwind.config.js에 토큰 등록됨

실습 8단계 — 실행 및 비교

npm run dev
PowerShell
복사

•

브라우저 결과  Figma 원본 비교

•

차이점을 노트에 기록

회고 체크리스트

공식 MCP 대비 무엇이 더 편했는가?

무엇이 더 부족했는가? (예: Code Connect)

토큰/스코프 권한 문제는 없었는가?

어떤 노드 단위로 쪼개야 결과가 좋았는가?

디자이너와 협업할 때 어떤 워크플로가 자연스러울지 정리