Figma MCP로 빠르게 개발하기 (feat. codex)

배경

작년부터 저는 모아동이라는 대학교 동아리 서비스를 개발하여 지금까지 운영중이에요. 3월 5일 열리는 동아리 소개 한마당은 동아리에 마지막으로 지원할 수 있는 행사에요.

요구사항

3월 5일에 열리는 동아리 소개 한마당에서 사용되는 동아리 부스 지도를 만들어야 했어요. 테스트까지 생각하면 촉박한 시간이었기에 figma MCP를 사용해 빠르게 개발하는 것을 선택했어요.

codex에 figma mcp 연결

저는 터미널에서 codex를 쓰고 있었어요. 그래서 .codex/config.toml 에서 직접 수정해야 합니다.

권한 변경

[projects."/Users/..../Desktop/moadong"]
trust_level = "untrusted"

제가 작업하고 있는 디렉토리의 권한을 볼 수 있어요. 디폴트는 untrusted기 때문에 trusted로 바꿔야 합니다.

figma mcp 붙이기

ide는 Cursor를 사용하고 있어요. Cursor에서 MCP를 사용하기 위해 Remote MCP Cient 기능을 활성화해야 해요. 이는 외부 MCP 서버 (여기선 Figma MCP)에 연결이 가능하도록 만드는 스위치라고 보면 됩니다.

[features]
rmcp_client = true

이제 Figma MCP 서버 연결 정보를 넣어줍니다.

[mcp_servers.figma]
url = "https://mcp.figma.com/mcp"
bearer_token_env_var = "FIGMA_OAUTH_TOKEN"
http_headers = { "X-Figma-Region" = "us-east-1" }

• url: Figma 공식 MCP 서버주소에요. Cursor는 여기로 API 요청을 보내요.
• bearer_token_env_var: 인증 토큰을 직접 쓰는 것이 아니라 환경변수에 저장된 값을 사용하도록 하는 설정이에요.

export FIGMA_OAUTH_TOKEN=피그마_토큰

이렇게 세팅되어야 해요. Cursor는 실행할 때

Authorization: Bearer <환경변수값>

이렇게 헤더를 붙여 Figma MCP에 요청을 보내요.

• http_headers: Figma MCP를 리전 기반으로 동작해요. 저는 us-east-1을 썼어요.

Figma token 발급

Figma Token은 홈에서 프로필 클릭하면 setting이 나오는데요. 거기서 Security를 보면 액세스 토큰을 발급할 수 있어요.

token 적용

token을 적용하는 것은 두 개의 방법이 있어요. mac인 경우 ~/.zshrc에

'export FIGMA_OAUTH_TOKEN=발급받은토큰'

이걸 저장하고 source ~./zshrc로 저장하면 됩니다.

두 번째는 mcp를 쓸 터미널에서 미리 'export FIGMA_OAUTH_TOKEN=발급받은토큰'를 입력하면 터미널에서 token을 사용할 수 있어요.

Figma node-id

저는 cursor ide에서 터미널로 codex를 켜서 작업했고, codex 실행 전에 터미널에 피그마 토큰을 주입하는 것으로 했습니다.

Figma에서는 node-id로 컴포넌트를 읽을 수 있습니다.
https://www.figma.com/design/...?node-id=8847-8004&m=draw 컴포넌트를 클릭하면 이런 식으로 된 URL을 볼 수 있는데, node-id를 codex에게 던져주면 해당 컴포넌트를 읽을 수 있습니다.

Cursor - Codex - Figma MCP 통신 순서

실제로는 Cursor(또는 Codex 실행 환경)가 MCP 클라이언트 역할을 하고, Figma 공식 MCP 서버와 통신합니다.
요청은 내가 링크(노드 id 포함)를 입력하는 순간부터 아래 순서로 진행돼요.

1. 사용자 입력
   • Figma URL(예: ...?node-id=8851-6378)을 Codex에 전달
2. Codex가 node-id 추출
   • 링크에서 fileKey, node-id를 파싱해서 어떤 프레임을 읽을지 결정
3. MCP 서버 설정 확인
   • ~/.codex/config.toml의 [mcp_servers.figma] 설정 사용
   • bearer_token_env_var = "FIGMA_OAUTH_TOKEN"로 토큰을 환경변수에서 읽음
4. Figma MCP 서버로 요청 전송
   • Codex → https://mcp.figma.com/mcp
   • 헤더:
     • Authorization: Bearer <FIGMA_OAUTH_TOKEN>
     • X-Figma-Region: us-east-1
5. Figma MCP가 Figma 데이터 조회
   • 해당 노드의 구조(텍스트, 레이아웃, 스타일), 메타데이터, 스크린샷/에셋 URL 반환
6. Codex가 결과를 코드로 변환
   • 반환된 디자인 컨텍스트를 기준으로 코드 생성/수정
   • 필요하면 여러 노드를 순차 조회해 화면 전체 구성 완성

요구사항 전달하기

내가 준 node-id 4개를 읽고 특정 파일 내에 동아리 부스지도 컴포넌트를 만들어줘.
아래 1/4 ~ 4/4 보여주도록 추가해주고 점선 누르면 슬라이드 이동도 가능해야해

결과적으로 기존 컴포넌트를 깨뜨리지 않으면서 요구사항과 동일하게 구현하는 데 성공했습니다.
프로젝트에서는 이미 Swiper 라이브러리를 사용하고 있었고, Codex가 프로젝트 구조를 파악한 뒤 기존 Swiper 기반 구조에 맞춰 슬라이드를 구현해주는 것을 확인할 수 있었습니다.

후기

작년 10월에도 Figma MCP를 이용해 컴포넌트를 구현한 적이 있었는데 그때는 픽셀도 제각각에다가 결과물도 좋지 않았어요. 제가 직접 구현하는게 더 빠를 정도였으니까요. 5개월이 지난 지금 Figma MCP의 성능은 훨씬 좋아졌고 직접 개발하는 것의 몇 배는 생산성이 높아졌어요.

조금 아쉬웠던 것은 카드 컴포넌트 내에 들어가는 여러 요소들의 위치를 하드코딩으로 구현한 것이었어요. 정말 껍데기만 잘 만들고 확장성이나 유지보수를 전혀 생각하지 않은 느낌이었어요.

이번 기능 개발은 딱 하루를 위한 기능이었기 때문에 확장성과 유지보수를 크게 고려하지 않아도 되기에 다시 수정하지는 않았습니다. 하지만 이후에도 간단한 컴포넌트는 Figma MCP로 개발해 볼 생각이에요. 확장성과 유지보수성을 프롬프트에 추가한다면 결과물이 또 어떻게 달라질지 궁금해지네요.