Loading...
라이트테이블 위 두 장의 UI 시안. 왼쪽은 아이콘 자리가 빈 원, 오른쪽은 아이콘이 채워져 있다.

시안 · Figma 공식

시안은 읽히는데, 아이콘은 사라져요

피그마 MCP를 연결하고 “이 디자인 그대로 구현해줘”라고 했어요. 페이지는 나왔어요. 근데 아이콘이 비고, 폰트가 밀리고, 배너 비율이 달라요.

연결

시안을 읽을 때

이 피그마 프레임 구조랑 간격만 설명해줘.

헤더 64, 본문 max-width 720, 카드 간격 24예요. 아이콘은 컴포넌트 인스턴스 12개예요.

구현

그대로 코드로 시키면

이 디자인 구현해줘.

페이지는 나왔어요. 아이콘이 비고, 배너 비율이 시안과 달라요.

오른쪽은 워킹 레퍼런스가 pix를 만들며 실제로 본 실패예요. 자세한 비교는 pix 스킬 글에 있어요. 피그마 공식은 원격 서버를 권장하고, 데스크톱 MCP는 조직용이라고 적어요. 연결 후 브라우저에서 계정 승인이 필요해요.

피그마 MCP가 주는 건 시안의 구조예요. 간격, 토큰, 레이어 이름, 컴포넌트 목록. 그걸 읽는 일과 픽셀을 맞추는 일은 달라요. 구현을 시키면 에이전트는 구조를 보고 자기 방식으로 그려요. 그래서 아이콘 같은 세부가 빠져요. 이 글은 깔지 말라는 얘기가 아니라, 뭘 기대할지 나누는 글이에요.

이 도구를 붙이면, 시안의 간격·토큰·컴포넌트를 에이전트가 직접 읽어 줘요. 픽셀은 pix 차례예요.

설치는 공식 원격으로

데스크톱 로컬 MCP보다 원격을 먼저 쓰라고 Figma가 적어요. 연결 후 브라우저에서 계정 승인이 필요해요.

  1. 1

    이 말을 그대로 AI에 붙여넣으세요

    공식 Figma 원격 MCP를 연결해줘. 권장은 claude plugin install figma@claude-plugins-official 이고, 수동이면 claude mcp add --transport http figma https://mcp.figma.com/mcp 야. OAuth로 내 피그마 계정에 붙으니, 시안 구조 설명부터 하고 파일은 수정하지 마. “그대로 구현해줘”는 pix 없이는 하지 마.

    수동 연결.

    claude mcp add --transport http figma https://mcp.figma.com/mcp
  2. 2

    연결됐다면, 이렇게 물어보세요

    이 피그마 프레임의 간격·그리드·컴포넌트 이름만 적어줘. 코드는 짜지 마. 피그마 파일도 수정하지 마.

GitHub 별이 없어 랭킹에는 ‘공식’으로만 표기했어요.

세 줄 요약

이럴 때

시안 구조·카피·간격·컴포넌트 이름을 에이전트가 읽어야 할 때. 핸드오프 설명을 줄이고 싶을 때.

들어 있는 것

원격 MCP. Claude Code는 플러그인 claude plugin install figma@claude-plugins-official이 권장이고, 막히면 수동 HTTP. 원격은 캔버스에 쓰기도 돼요.

안 되는 것

픽셀 일치의 정본이 아니에요. “이 디자인 구현해줘”만으로 시안과 같은 화면을 기대하면 깨져요. 그때는 pix 같은 대조 루프가 필요해요. 에이전트가 피그마 파일을 수정할 수도 있어요.

써본 사람들 반응

공식 설치와, 우리가 직접 돌린 구현 실패를 같이 둬요.

도움 됐다는 쪽

  • “Remote MCP server (preferred): Connects directly to Figma’s hosted endpoint at https://mcp.figma.com/mcp.” help.figma.com

    — Figma Help — Guide to the Figma MCP server

  • “claude mcp add --transport http figma https://mcp.figma.com/mcp” developers.figma.com

    — Figma 원격 서버 설치 문서

아쉽다는 쪽

  • “가운데가 보통 방식(피그마 MCP 연결) — 아이콘이 사라지고, 폰트가 밀리고, 배너 디자인이 날아갔어요.” working-ref.com

    — 워킹 레퍼런스, pix 1차 기록

  • “The desktop MCP server is primarily for specific use cases for organizations and enterprises. For the broadest set of features, use the remote MCP server.” help.figma.com

    — Figma Help

기대치를 나누는 법

  1. 01

    구조를 읽을 도구와, 픽셀을 맞출 도구를 한 문장에 섞지 마세요.

  2. 02

    Claude Code는 플러그인 설치가 권장이에요. 조직이 플러그인을 막으면 수동 HTTP로 우회해요.

  3. 03

    구현 품질이 목적이면 이 글 다음에 pix를 읽으세요. 둘이 경쟁이 아니라 순서예요.

← AI 도구