S-P-GitHub-Copilot-2025-05-23

gistfile1.txt

사전준비 관련 문서
https://sprout-log-68d.notion.site/SK-GitHub-Copilot-Figma-MCP-1f96777c6b5d8030afcedcb3bd40933d?pvs=4

https://github.com/Violet-Bora-Lee/github-copilot-samples
(오전 2시간, 시연에선 이 저장소에 있는 내용을 활용할 예정입니다. 미리 둘러보셔도 좋습니다~)


오후 4시간 실습 세션에선 실제 만들어보는것을 해볼 예정입니다 :)

https://github.com/Violet-Bora-Lee/krds-demo-boilerplate



## Figma MCP 세팅

1. 루트 경로에 `.vscode/mcp.json` 파일 추가
2. 추가할 MCP 정보 입력
    1. 윈도우기준
    
    ```yaml
    
      "servers": {
        "Framelink Figma MCP": {
          "command": "cmd",
    			"args": [
            "/c",
            "npx",
            "-y",
            "figma-developer-mcp",
            "--figma-api-key=나의피그마키",
            "--stdio"
          ]
        },
      }
    }
    ```
    
    - `나의피그마키` 부분을 본인의 키로 교체
    
    b. MAC 기준
    
    ```yaml
    {
      "servers": {
        "Framelink Figma MCP": {
          "command": "npx",
          "args": [
              "-y",
              "figma-developer-mcp",
              "--figma-api-key=나의피그마키",
              "--stdio"
          ]
        },
      }
    }
    ```
    
    - `나의피그마키` 부분을 본인의 키로 교체
- 키 입력시 주의점
    
    `inputs` 필드를 사용해 키 마스킹, 내부 보안처리되도록 하는게 베스트 프랙티스임
    
    ```yaml
    {
        "inputs": [
            {
              "type": "promptString",
              "id": "figma-key",
              "description": "-----키입력-------",
              "password": true
            }
        ],
        "servers": {
            "Framelink Figma MCP": {
                "command": "npx",
                "args": [
                    "-y",
                    "figma-developer-mcp",
                    "--figma-api-key=${input:figma-key}",
                    "--stdio"
                ]
            },
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest"
                ]
            }
        }
    ```
    

3. 피그마 MCP 동작여부 확인

1. Agent 모드에서 다음과 같은 프롬프트 입력
    
    ```yaml
    https://www.figma.com/design/AZXAoWUzgLEEOUdTZK6FG6/KRDS_v1.0.0--Community-?node-id=4869-175245&p=f&t=FmKJt8AsP1GYgziX-0
    
    이 피그마 파일의 제목이 뭐야?
    ```
    
    - `"KRDS_v1.0.0--Community-"` 라는 내용이 답긴 응답을 받으면 정상동작

# 실습 옵션 1  - 가상의 정부 프로젝트

## 실습 개요

- 범정부 디자인 시스템을 사용한 가상의 정부 프로젝트 구현
    - 범정부디자인시스템
        - 공식사이트: https://www.krds.go.kr/html/site/index.htm
        - 피그마: https://www.figma.com/design/N7VXBU7PKLxaQeinhktKeC/KRDS_v1.0.0-(Community)?node-id=5019-5082&t=6MkyJK3cpzfGo5Pk-0
        - 공식 GitHub: https://github.com/KRDS-uiux/krds-uiux
        - 작업일지: https://blog.pulip.com/

### 보일러플레이트 개요

- 저장소: https://github.com/Violet-Bora-Lee/krds-demo-boilerplate
    - 사이트 링크: https://krds-demo-boilerplate.vercel.app/

### 실습 준비

1. 저장소 clone
    
    `git clone https://github.com/Violet-Bora-Lee/krds-demo-boilerplate.git`
    
2. 개발 환경 세팅
    
    `pnpm install`
    
    `pnpm run dev` 
    
3. [Figma MCP 세팅](https://www.notion.so/Figma-MCP-1f96777c6b5d803fb375fc44fe8b8175?pvs=21) 가이드를 참고해 VS Code에 MCP 세팅

### 실습

- 원하는 디자인 시스템 or 컴포넌트 구현



-------

```
FROM node:20-slim

WORKDIR /app

# 패키지 복사 및 종속성 설치
RUN npm init -y
RUN npm install figma-developer-mcp@latest

# 실행 명령 (로컬 node_modules에서 실행)
ENTRYPOINT ["npx", "figma-developer-mcp", "--stdio"]
```

위 도커파일로 이미지 빌드 후에 아래 mcp.json을 사용하여 서버를 실행하니 되네요.

{
  "servers": {
    "Framelink Figma MCP": {
      "command": "docker",
      "args": [
        "run",
        "--rm",
       "-i",
        "-p",
        "3333:3333",
        "figma-mcp"
      ]
    }
  }
}

--stdio 모드는 figma-developer-mcp가 표준 입출력(stdin/stdout)을 통해 외부 클라이언트로부터 초기화 요청(initialize request)을 기다리는 모드라 docker 실행시 -i 옵션이 필요합니다.
도커 빌드시(docker build -t figma-mcp .)에 Dockerfile 과 같이 .env 파일을 아래와 같이 생성필요합니다.

FIGMA_API_KEY=XXXXX
PORT=3333

아 도커파일에도 .env 파일 추가 하는 라인도 필요하네요.

FROM node:20-slim

WORKDIR /app

# 패키지 설치
RUN npm init -y
RUN npm install figma-developer-mcp@latest

# .env 파일 복사 
COPY .env* /app/

ENTRYPOINT ["npx", "figma-developer-mcp", "--stdio"]

위 도커파일로 이미지 빌드 후에 아래 mcp.json을 사용하여 서버를 실행하니 되네요.

{
  "servers": {
    "Framelink Figma MCP": {
      "command": "docker",
      "args": [
        "run",
        "--rm",
       "-i",
        "-p",
        "3333:3333",
        "figma-mcp"
      ]
    }
  }
}

--stdio 모드는 figma-developer-mcp가 표준 입출력(stdin/stdout)을 통해 외부 클라이언트로부터 초기화 요청(initialize request)을 기다리는 모드라 docker 실행시 -i 옵션이 필요합니다. 도커 빌드시(docker build -t figma-mcp .)에 Dockerfile 과 같이 .env 파일을 아래와 같이 생성필요합니다.

FIGMA_API_KEY=XXXXX
PORT=3333

아 도커파일에도 .env 파일 추가 하는 라인도 필요하네요.

FROM node:20-slim

WORKDIR /app

# 패키지 설치
RUN npm init -y
RUN npm install figma-developer-mcp@latest

# .env 파일 복사 
COPY .env* /app/

ENTRYPOINT ["npx", "figma-developer-mcp", "--stdio"]

와우 감사합니다!!! 👍
진욱님 통해 정리된 문서를 다시 보내드렸어요. https://github.com/Violet-Bora-Lee/framelink-figma-mcp-docker 이 저장소도 한번 참고해주세요 😄