[런치캐치 개발일지 #2] Figma AI & MCP 디자인 워크플로우 세팅

지현·2026년 9월 16일

배경

지난 글에서 피그마 AI로 빠르게 초안을 뽑고 다듬는 방식으로 가기로 하고 결제했다고 썼는데, 오늘 좀 당황스러운 걸 발견했다.

피그마 AI 에이전트가 베타 기간이라 무료 플랜에서도 사용 가능하다.

그럼 내가 왜 결제한 거지? 싶어서 환불까지 알아봤는데, 조사하다 보니 상황이 좀 달랐다.

무료 vs 유료 — AI 관련 차이

항목Starter (무료)Professional (유료)
AI 에이전트 베타✅ 사용 가능✅ 사용 가능
AI 크레딧일 150개 / 월 500개월 3,000개
MCP 디자인 생성❌✅ (Full seat 전용)
MCP 디자인 읽기월 6회 (사실상 불가)일 200회
무제한 파일❌✅
팀 라이브러리❌✅

지금은 베타라서 에이전트 사용 시 크레딧이 안 빠지지만, 정식 출시 후에는 크레딧이 소모된다. 런치캐치 화면이 67개나 되는데 무료 플랜의 월 500개로는 부족할 수 있다. 거기에 Figma MCP로 디자인을 생성하려면 유료 플랜의 Full seat이 필수다. 무료 플랜에서는 디자인 읽기만 월 6회 가능한데, 이건 사실상 안 되는 거나 마찬가지다. 그래서 일단 유료 플랜을 유지하면서 베타 기간 동안 최대한 뽑아보기로 했다.

Figma MCP 발견

피그마 AI 에이전트 말고 다른 방법도 있었다. Figma MCP라는 건데, 2026년 2월에 generate_figma_design 도구가 발표되면서 AI 코딩 도구에서 프롬프트를 입력하면 피그마 캔버스에 직접 디자인을 생성할 수 있게 됐다.

양방향으로 동작한다:

  • 디자인 → 코드: 피그마에 있는 디자인을 읽어서 코드로 변환
  • 코드 → 디자인: 프롬프트로 피그마 캔버스에 디자인 생성

나중에 런치캐치 프론트 개발할 때 디자인 → 코드 방향도 써볼 수 있을 것 같다.

OpenAI Codex + Figma MCP 연결

Figma MCP를 연결할 수 있는 도구가 여러 개 있는데 (Claude.ai, Cursor 등), 나는 OpenAI Codex 데스크톱 앱으로 연결했다.

세팅 방법

  1. openai.com/codex에서 Codex 데스크톱 앱 설치
  2. Codex 앱 안에 있는 플러그인 디렉토리에서 Figma 검색 → 설치

  1. 브라우저가 열리면 피그마 OAuth 로그인 → Allow access
    플러그인으로 설치하면 MCP 서버 URL을 직접 입력할 필요 없이 바로 연결된다.

디자인 생성

Codex 채팅창에 프롬프트를 입력하면 피그마 캔버스에 디자인이 생성된다.

기존 프레임 수정

이미 있는 디자인을 수정하고 싶으면:

  1. 피그마에서 프레임 선택 → 우클릭 → Copy/Paste as → Copy link to selection (또는 Cmd+L)
  2. Codex에 URL + 수정 요청 입력

현재 디자인 워크플로우 정리

정리하면 지금 쓸 수 있는 디자인 도구가 두 가지다:

  1. 피그마 AI 에이전트 : 피그마 안에서 프롬프트로 직접 디자인 생성/수정
  2. OpenAI Codex + Figma MCP : 외부에서 프롬프트로 피그마 캔버스에 디자인 생성/수정

둘 다 써보면서 어떤 게 런치캐치 화면 뽑기에 더 효율적인지 비교해볼 예정이다.

느낀 점

  • 결제하고 나서 "이거 무료인데?" 하고 당황했는데, 알아보니 완전히 같은 건 아니었다. 뭐든 바로 환불하기보다 정확히 뭐가 다른지 먼저 확인하는 게 맞는 것 같다
  • Figma MCP라는 걸 오늘 처음 알았는데, 나중에 디자인 → 코드 변환에도 써볼 수 있을 것 같아서 기대된다
  • AI 도구가 진짜 많다. 피그마 AI, Claude, Codex, Cursor... 결국 중요한 건 도구 자체보다 "어떤 상황에서 어떤 걸 쓸지" 판단하는 것 같다

다음 할 일

  • 피그마 AI vs Codex + MCP로 실제 런치캐치 화면 뽑아보고 퀄리티 비교
  • 9/18(금)까지 핵심 플로우(스와이프, 식당 상세, QR) 디자인 완성
  • 색상/디자인 팀 내 피드백 받고 확정

0개의 댓글