Figma MCP로 Claude Code 연동하기: 화면 캡처부터 코드 반영까지

Claude Code로 어떤 화면을 Figma에 가져올 수 있습니까?

Claude Code to Figma는 브라우저에서 실행 중인 인터페이스를 캡처합니다. 실제 서비스, 스테이징 환경, 내 컴퓨터에서 구동하는 개발 서버인 localhost 모두 대상입니다. 한 세션에서 여러 화면을 캡처해 캔버스 위에 놓고 비교할 수 있습니다. 각 화면은 편집 가능한 프레임이 되므로 위치를 바꾸거나 복제하고, 디자인을 다듬거나 주석을 달 수 있습니다. 지원 환경과 여러 화면으로 구성된 흐름은 Figma의 발표 글에서 확인할 수 있습니다.

실제로 동작하는 앱을 편집 작업대 위에 펼쳐 놓는다고 생각하면 이해하기 쉽습니다. 브라우저에서는 화면을 따라 이동하며 경험을 확인하고, Figma에서는 각 단계를 한자리에 모아 살펴봅니다.

MCP는 Model Context Protocol의 약자로, Claude Code가 Figma의 툴을 사용할 수 있게 연결하는 역할을 합니다. 캡처 툴의 이름은 generate_figma_design입니다. 새 Figma Design 파일이나 기존 Design 파일, 또는 클립보드로 레이어를 보낼 수 있습니다. 캡처로 새로 만든 파일은 팀이나 조직의 초안에 저장되며, 클립보드로 보낸 결과는 캔버스에 붙여 넣을 수 있습니다. 각 저장 위치는 Figma 툴 레퍼런스에 설명되어 있습니다.

Figma MCP 연결: Claude Code에 한 번 설정하기

이 워크플로에는 원격 서버를 사용합니다. https://mcp.figma.com/mcp에 연결하며 Figma 데스크톱 앱 없이도 동작합니다. Figma는 권장 방식인 플러그인 설치와 수동 설정을 모두 안내합니다. 둘 중 하나를 선택하면 됩니다. 원격 서버 설정 안내.

권장 방식: Figma의 Claude Code 플러그인 설치

Claude Code가 설치되어 있다면 터미널에서 다음 명령을 실행합니다.

claude plugin install figma@claude-plugins-official

이어서 Figma 문서에 나온 인증 절차를 진행합니다.

1. Claude Code가 실행 중이었다면 재시작합니다.
2. /plugin을 입력하고 **Installed(설치됨)**에서 figma를 선택한 뒤 인증을 시작합니다.
3. 브라우저로 이동해 Figma 계정의 **Allow access(접근 허용)**를 선택합니다.
4. /plugin으로 돌아와 **Installed(설치됨)**에서 Figma가 연결된 상태인지 확인합니다.

플러그인에는 MCP 설정과 스킬이 포함됩니다. 스킬은 자주 쓰는 Figma 작업에 재사용할 수 있는 지침입니다. 조직에서 설치를 차단한 경우에는 Claude 관리자에게 문의하도록 Figma가 안내합니다. Figma의 Claude Code 설정 가이드.

수동 설정: 여러 프로젝트에서 같은 연결 사용하기

프로젝트가 바뀌어도 재사용할 수 있도록 수동으로 설정하려면 Figma가 안내하는 다음 명령을 실행합니다.

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

Claude Code에서 새 세션을 시작한 뒤 /mcp를 입력합니다. figma를 선택하고 Authenticate(인증), Allow Access(접근 허용) 순서로 진행합니다. 연결 상태는 /mcp에서 확인합니다.

--scope user 플래그를 쓰면 여러 프로젝트에서 이 연결을 사용할 수 있습니다. Figma는 claude mcp add --transport http figma https://mcp.figma.com/mcp 명령도 안내하는데, 이 명령은 기본적으로 현재 프로젝트에만 적용됩니다. 수동 설정과 적용 범위.

어떤 Figma 요금제와 시트가 필요합니까?

서버 연결, 프레임 생성, 디자인을 다시 읽어 오는 작업은 각각 요구 조건이 다릅니다. 아래는 2026년 10월 12일에 확인한 Figma의 공식 기준입니다.

출처: MCP 사용 가능 범위, 캡처 권한, 읽기 제한.

Starter 사용자와 View 또는 Collab 시트에는 월 최대 20회의 읽기 툴 호출이 제공됩니다. 툴 호출은 개별 요청을 뜻하므로, 이 한도로 코드와 디자인을 20번 완전히 왕복할 수 있다는 의미는 아닙니다. 캡처 툴인 generate_figma_design에는 일반 MCP 호출 제한이 적용되지 않습니다. 읽기 호출 한도와 캡처 툴 예외.

제품 전반의 평가와 도입 판단은 Figma 리뷰를 참고할 수 있습니다.

실전 예시: 온보딩 화면 세 개를 캡처하고 코드에 반영하기

이미 실행 중인 앱에 환영, 팀원 초대, 첫 프로젝트라는 세 개의 온보딩 화면이 있다고 가정합니다. 이 예시를 따라 화면 캡처부터 디자인 검토, 구현까지 진행해 봅니다.

전체 흐름을 하나의 파일로 캡처하기

Claude Code에서 프로젝트를 열고 앱 URL과 저장할 파일을 알려 줍니다. 예를 들면 다음과 같습니다.

새 파일이 필요하면 Claude에게 새로 만들어 달라고 요청합니다. 앱이 실행 중이 아니라면 로컬 서버를 시작하도록 요청합니다. 캡처 워크플로에서는 클라이언트가 필요한 스크립트를 준비하고 브라우저를 엽니다. 해당 창이 열리면 첫 캡처가 이루어집니다. Figma 캡처 안내.

환영 화면이 들어왔는지 확인한 뒤 앱의 다음 단계로 이동합니다. 팀원 초대와 첫 프로젝트 화면에서는 캡처 툴바의 **Entire screen(전체 화면)**을 사용합니다. 일부 영역만 필요하면 **Select element(요소 선택)**를 쓸 수 있습니다. 마지막으로 **Open file(파일 열기)**을 선택합니다. 툴바 사용과 마무리 단계.

처음 캡처할 때는 뷰포트 크기를 일정하게 유지하고, 어떤 상태를 캡처했는지 기록하기를 권합니다. 입력값 검증 오류가 표시된 화면과 정상적으로 입력된 화면은 이름을 구분하는 편이 좋습니다.

Figma에서 사용자 흐름 다듬기

원본 캡처를 한 줄로 배치하고, 이를 복제해 수정안을 만듭니다. 프레임 이름을 명확하게 붙인 뒤 각 화면에서 무엇을 바꿀지 구체적으로 결정합니다.

이 수정안은 디자인 가설입니다. 특히 건너뛰기 선택지를 화면에 그렸다고 해서 필요한 권한이나 라우팅 로직까지 구현되는 것은 아닙니다. 확정한 프레임 옆에 관련 결정을 적고, 구현 요청서에도 포함합니다.

캡처한 레이어를 디자인 시스템 자산으로 사용하기 전에는 상태를 확인해야 합니다. Figma에 따르면 캡처 결과는 일반 레이어로 들어오며, 라이브러리의 컴포넌트나 스타일에 자동으로 매핑되지 않습니다. 다만 파일이나 추가한 라이브러리에 호환되는 변수가 있으면 연결할 수 있습니다. 변수는 색상이나 간격처럼 재사용하는 값입니다. 게시된 라이브러리를 추가하려면 유료 요금제가 필요합니다. 캡처 결과와 변수의 동작 방식.

확정한 프레임을 Claude Code에 전달하기

확정한 각 프레임을 마우스 오른쪽 버튼으로 클릭하고 **Copy link to selection(선택 항목 링크 복사)**을 선택합니다. 이 링크를 구현 요청과 함께 Claude Code에 붙여 넣습니다. Figma가 문서에서 안내하는 원격 워크플로입니다. 프레임 링크 사용법.

이 예시에서는 다음과 같이 요청할 수 있습니다.

Figma의 get_design_context 툴은 에이전트에 디자인 정보를 제공합니다. 프롬프트에 사용 중인 프레임워크와 기존 컴포넌트가 있는 디렉터리를 지정할 수 있습니다. 원격 서버를 사용할 때는 프레임이나 레이어 링크를 전달해야 합니다. 캔버스에서 항목을 선택하기만 해서는 원격 서버에 컨텍스트가 전달되지 않습니다. 디자인을 코드로 옮기는 툴.

마지막으로 수정된 앱을 실행하고 같은 사용자 흐름을 따라가 봅니다. 레이아웃과 문구를 비교한 뒤 건너뛰기 동작, 입력값 검증, 키보드 탐색을 확인합니다. 디자인 검토가 더 필요하면 수정된 화면을 다시 캡처합니다. 이 검증은 팀의 책임입니다. Figma는 컨텍스트를 제공하고, 코딩 에이전트는 구현을 수행합니다. MCP와 에이전트의 역할.

효과를 기대할 수 있는 다섯 가지 활용 상황

이미 존재하는 UI를 놓고 여러 사람이 함께 결정해야 하는 작업부터 시작하는 것이 좋습니다. 아래는 반복 작업을 얼마나 직접적으로 줄일 수 있는지에 따라 우선순위를 정한 활용 제안입니다.

재사용할 디자인 지침을 체계화하는 팀이라면 Figma Make 커스텀 스킬 디자인 시스템 팩도 참고할 수 있습니다. 다만 이 글은 별도의 Figma Make 워크플로를 다룹니다.

비용 대비 효과: 화면을 다시 그리는 시간부터 측정하기

살펴볼 비용은 디자인 준비와 반복 구현에 들어가는 시간입니다. 현재 팀이 이미 구현된 화면을 다시 만든 뒤 검토하고 있다면, 그 작업량을 캡처와 정리에 드는 작업량과 비교합니다.

검토당 순가치 = (기존 준비 및 재작업 시간 − 새 방식의 캡처·정리·재작업 시간) × 내부 시간당 비용 − 추가 툴 비용.

팀에서 직접 기록한 시간을 사용합니다. 이 워크플로로 인해 추가로 발생하는 구현 검토도 포함해야 합니다. 이미 Claude Code와 필요한 Figma 시트를 사용 중인 팀이라면 기존 구독료는 비교하는 양쪽에 모두 들어갑니다. 결과를 바꾸는 것은 추가 지출뿐입니다. Figma는 시트에 따른 사용 범위와 파일 권한을 구분하며, Professional 구독료는 시트 수와 결제 주기에 따라 달라집니다. Figma 결제 안내.

판단 기준은 디자인과 개발에 드는 총작업량을 줄이면서 변경안을 확정할 수 있는지입니다. 가져오기만 빨라지고 뒤처리에 많은 시간이 든다면 좋은 결과로 보기 어렵습니다.

이 연결을 바탕으로 만들 수 있는 두 가지 제품

유용한 기회는 기본 제공 연결을 활용해 검토 절차를 하나의 상품으로 구성하는 데 있습니다. 아래 아이디어는 제품 가설입니다. 2026년 10월 12일에 확인한 DataForSEO의 미국 영어 검색량 추정치는 월간 검색 횟수이며, 유료 고객 수가 아닙니다.

가장 유망한 아이디어: 온보딩 검토 키트

제품 팀이나 소규모 에이전시라면 실행 중인 온보딩을 체계적인 검토 자료와 구현 요청서로 정리하는 반복 가능한 방법에 비용을 지불할 수 있습니다. 관련 수요 신호로는 “claude code to figma”의 월간 검색량 590회와 “website to figma”의 260회가 있습니다. 두 검색어의 사용자층은 겹칠 수 있습니다.

최소 구성은 프로젝트별 캡처 체크리스트, Figma 리뷰 템플릿, 프레임 명명 규칙, 그리고 확정한 프레임 링크에 동작 관련 결정을 함께 담는 재사용 프롬프트가 될 수 있습니다. 먼저 직접 안내하는 서비스로 시작하면 팀이 어느 부분에서 도움을 필요로 하는지 관찰할 수 있습니다.

이 아이디어가 가장 유망한 이유는 결과물에 고객 자신의 사용자 흐름에 대한 결정이 포함되기 때문입니다. 다만 캡처 기능은 이미 Figma가 제공하므로, 가져오기 기능을 간단히 감싼 제품만으로는 가치가 크지 않습니다. 검토 키트에 실제로 비용을 지불할 의사가 있는지는 여전히 검증해야 합니다.

구현 요청서 점검 툴

Figma의 변경 사항을 Claude Code에 반복해서 전달하는 팀에는 구현 전에 누락된 프레임 링크, 불분명한 이동 목적지, 빠진 컴포넌트 지침을 찾아 주는 작은 점검 툴이 유용할 수 있습니다. “Figma to code”의 월간 검색량은 약 720회입니다. 이는 관련 작업 전반의 수요 신호일 뿐, 이 점검 툴의 수요가 입증되었다는 뜻은 아닙니다.

최소 구성은 확정된 링크, 컴포넌트 경로, 인수 기준을 담은 구조화된 요청서를 검사하고, 아직 답이 정해지지 않은 질문 목록을 만드는 방식입니다. 한계는 의미 판단에 있습니다. 건너뛰기 규칙에 대한 설명이 빠졌다는 점은 찾을 수 있지만, 사용자가 건너뛸 수 있어야 하는지까지 결정할 수는 없습니다. 그 판단은 여전히 제품 담당자의 몫입니다.

코드와 디자인을 오가도 해결되지 않는 문제

이 방식은 캡처, 편집, 구현을 의식적으로 반복하는 작업 과정으로 받아들여야 합니다. Figma는 MCP를 구조화된 디자인 컨텍스트의 공급원이자 코드 작성을 위한 출발점으로 설명합니다. 에이전트에는 여전히 프로젝트 규칙과 명확한 지침이 필요합니다. 완성된 코드를 보장하거나 구현 문제를 자동으로 해결해 주지는 않습니다. Figma가 설명하는 역할과 한계.

캡처 품질도 상황에 따라 달라집니다. Figma는 복잡한 JavaScript 애니메이션, 캔버스 렌더링, 긴 목록의 일부만 한 번에 렌더링하는 가상화 목록을 문제가 생길 수 있는 요소로 꼽습니다. 전체 페이지가 잘 옮겨지지 않으면 특정 요소만 캡처해 봅니다. 알아보기 어렵게 바뀐 CSS 변수 이름도 변수 매칭을 방해할 수 있습니다. 개발 서버에서 캡처하면 읽기 쉬운 이름을 유지할 수 있습니다. 알려진 캡처 제약.

디자인 판단이 필요 없는 사소한 문구 수정이라면 이 과정을 거치지 않겠습니다. 반면 전체 흐름을 비교하는 일이 팀의 구현 방향을 바꿀 수 있다면 활용하겠습니다. 공유 Figma 캔버스 자체가 팀에 맞지 않는다면 Figma 대안 비교에서 더 넓은 선택지를 살펴볼 수 있습니다.

월요일에 시작할 일은 간단합니다. 화면 세 개로 구성된 온보딩 흐름을 골라 캡처하고, 개선 사항 하나에 합의한 뒤 그 결정을 앱에 반영합니다. 제품의 나머지 영역으로 절차를 넓히기 전에 이 순환을 끝까지 완료합니다.

팀의 제품에 맞춰 이 검토 워크플로를 구축하고 싶다면 자동화를 도와드릴 수 있습니다.