MCP 소개 및 설정 방법

이번 포스트에서 소개할 MCP는 아래와 같다.

• figma mcp
• `playwright

모든 실행 명령어는 mac과 homebrew를 기준으로 한다.

Figma MCP

1. access token 발급

codex에서 Figma에 접근하기 위한 액세스 토큰을 발급한다.
1. Figma desktop 접속 (없으면 설치하자)
2. 토큰 발급 위치 : [피그마 홈 - Settings - Security 하단]

2. config.toml 반영

[mcp_servers.figma]
command = "npx"
args = ["-y", "mcp-remote", "http://127.0.0.1:3845/mcp", "--transport", "http"]
enabled = true

[mcp_servers.figma.environment]
FIGMA_TOKEN = "${FIGMA_TOKEN}"

OS 환경변수로 1번에서 발급받은 토큰을 등록했다.

export FIGMA_TOKEN="figd_xxxx_xxxx"

3. 연결 확인

codex에서 figma를 읽게하기 위해서 디자인 요소의 url을 줘야한다.

3-1. Figma 디자인 요소 선택하기

Figma에서 개발하고자 하는 UI 컴포넌트를 선택하고 해당 요소의 URL을 복사한다.
(Pages가 아닌 Layers 메뉴에서 노드를 복사해야 한다!)

3-2. Codex에 프롬프트 작성하기

AGENTS.md나 PRD를 제대로 입력하지 않은 상태로, 아래와 같은 결과물이 나온다.