개발자가 "Figma 인스펙터"를 검색할 때 보통 두 가지 중 하나를 원합니다: Dev Mode 시트 없이 노드의 속성 값을 확인하는 방법, 또는 Figma 콘텐츠를 AI 에이전트에 전달하는 방법. 첫 번째 카테고리는 플러그인으로 충분히 해결됩니다. 두 번째 카테고리는 figmascope가 나타나기 전까지 거의 아무것도 해결하지 못했습니다.

이 글은 두 카테고리를 비교하고, 서로 다른 문제를 해결한다는 것을 설명하며, 실제로 에이전트 네이티브 내보내기가 어떻게 보이는지 보여줍니다. 직접 내보내기를 시도하려면 figmascope.dev를 방문하거나 계속 읽으며 전체 비교를 확인하세요. 실용적인 워크플로우는 Figma to Cursor 또는 Figma to Claude Code를 참고하세요.

"Figma 인스펙터" 도구가 실제로 하는 것

클래식 Figma 인스펙터는 Figma 자체 UI의 우측 패널입니다. 노드를 선택하면 채우기, 선, 효과, 치수, 제약, 타이포그래피가 표시됩니다. 2023년에 추가된 Dev Mode에서 이 패널은 코드 스니펫을 제공합니다 — 노드에서 추론된 CSS 속성, flexbox로 표현된 auto-layout, Variables가 설정된 경우 variable 이름이 있는 색상.

Inspect, Figma to Code, Anima 등 수십 개의 플러그인이 이를 더 확장합니다. 일부는 선택된 노드에서 React 또는 SwiftUI 스니펫을 생성합니다. 일부는 CSS 파일을 내보냅니다. 일부는 핸드오프 리뷰를 위해 캔버스에 주석을 달습니다.

이 모든 것은 화면을 보고 있는 인간 개발자를 위해 설계되었습니다. 관심 있는 노드를 아는 사람이 선택하면 정보를 요청에 따라 노드별로 노출합니다.

이 모델이 AI 에이전트에 작동하지 않는 이유

언어 모델은 Figma에서 노드를 클릭하며 탐색하지 않습니다. 코드 생성을 시작하기 전에 전체 관련 컨텍스트가 컨텍스트 창에 있어야 합니다. 노드별 인스펙션은 단편만 생성합니다. 에이전트에게 필요한 것은 전체 화면을 커버하는 구조화된 문서입니다: 계층 구조, 토큰 값, 문자열, 컴포넌트 참조 — 모두 한 번에.

형식 문제도 있습니다. Dev Mode는 거의 맞지만 완전히 맞지는 않은 CSS 스니펫을 생성합니다 — 속성 이름은 프레임워크마다 다르고, 단축 속성은 확장이 필요하며, 절대 픽셀 값은 토큰 시스템에 매핑해야 합니다. Dev Mode 원시 출력을 사용하는 에이전트는 토큰 이름을 재-환각하고, 간격 값을 만들어내고, 디자인을 한 번 본 것처럼 보이는 코드를 생성합니다.

인스펙터 도구는 "이 노드는 무엇인가?"에 답합니다. 에이전트 도구는 "이 전체 화면은 모델이 추론할 수 있는 형식으로 무엇인가?"에 답합니다.

Figma 인스펙터 대안으로서의 figmascope

figmascope는 Figma 내부의 패널이 아닙니다. 브라우저에서 실행되고, Figma REST API와 직접 통신하며, 컨텍스트 번들을 내보냅니다 — AI 에이전트가 디자인을 구현하는 데 필요한 모든 것을 포함하는 구조화된 zip. 토큰 형식은 AI 에이전트를 위한 디자인 토큰 내보내기에서 자세히 설명되며, 폭넓은 핸드오프 철학은 AI 디자인 핸드오프에서 다룹니다.

내보내기에 포함되는 것:

직접 비교

기능 Figma Dev Mode 인스펙터 플러그인 figmascope
단일 노드 속성 값 있음 있음 없음 (목적이 아님)
전체 화면 레이아웃 트리 내보내기 없음 일부 있음 — screens/*.json
타입 명시 디자인 토큰 JSON 없음 일부 플러그인 있음 — tokens.json
AI 에이전트 스펙 문서 없음 없음 있음 — CONTEXT.md
키가 있는 통합 문자열 없음 없음 있음 — strings.json
컴포넌트 인벤토리 일부 일부 있음 — components/inventory.json
참조 렌더 수동 내보내기 없음 있음 — screens/*.png (2×)
토큰 빈도 추론 없음 없음 있음 — Variables 없는 파일 폴백
Figma 시트 필요 Dev Mode 시트 필요 다양 없음 — PAT만 사용
개인 정보 보호 / 업로드 없음 Figma에서 데이터 처리 플러그인에 따라 다름 클라이언트 측, api.figma.com에만 토큰 전송

Figma Dev Mode — 잘하는 것과 못하는 것

Dev Mode의 코드 패널은 간격 값을 빠르게 읽거나 폰트 스택을 확인하거나 색상이 해석되는 variable을 확인해야 하는 인간 개발자에게 진정으로 유용합니다. Variable 연결은 올바른 방향의 한 걸음입니다 — Figma 파일이 Variables를 올바르게 사용할 때 Dev Mode는 해석된 값과 함께 variable 이름을 표시합니다.

AI 워크플로우에서 부족한 점:

Figma 인스펙터 플러그인 — 현황

Figma 인스펙터 플러그인은 대략 세 가지 카테고리가 있습니다:

  1. 속성 뷰어 — Dev Mode 우측 패널이 보여주는 것을 복제합니다. 종종 Dev Mode 접근 권한이 없는 무료 티어 사용자를 위한 것입니다. 예시: Figma Inspect, Handoff.
  2. 코드 생성기 — 선택된 노드에서 프레임워크 특정 코드를 생성합니다. 예시: Figma to Code, Anima, Locofy. 전체 파일 구조적 내보내기가 아닌 개별 선택에서 코드를 생성합니다.
  3. 토큰 익스포터 — Figma Variables에서 디자인 토큰을 내보냅니다. 예시: Tokens Studio (구 Figma Tokens), Variables2JSON. 토큰 내보내기 문제는 해결하지만 레이아웃 IR이나 에이전트 스펙 문제는 해결하지 않습니다.

figmascope는 이 카테고리 중 어느 것도 아닙니다. 정신적으로는 "토큰 익스포터" 카테고리에 가깝지만 더 광범위한 문제를 해결합니다: AI 에이전트가 전체 화면을 올바르게 구현하는 데 필요한 전체 구조화된 컨텍스트를 생성합니다.

플러그인 현황에 대한 더 자세한 내용은 figmascope vs Figma 플러그인을 참고하세요.

무엇을 언제 사용할지

이 도구들은 상호 배타적이지 않습니다. 현실적인 워크플로우:

구별은 동기적 인스펙션(인간이 한 번에 한 노드씩 읽음)과 일괄 내보내기(에이전트가 하나의 구조화된 문서에서 전체 그림을 얻음)입니다.

PAT — 무엇에 접근하고 무엇에 접근하지 않는지

figmascope는 REST API를 통해 파일을 읽기 위해 Figma 개인 액세스 토큰을 사용합니다. 토큰은 브라우저에 입력되고, 세션 동안 브라우저 메모리에 저장되며, api.figma.com에 헤더로만 전송됩니다. 어떤 서버도 받지 않습니다. 탭을 닫으면 사라집니다.

필요한 최소 범위는 File content: read-only입니다. figmascope는 Figma에 쓰지 않고, 댓글을 생성하지 않으며, 토큰이 읽을 권한을 가진 팀 파일 이외에 접근하지 않습니다. 완전한 위협 모델은 PAT 보안과 figmascope를 참고하세요.

실제 프로젝트에서 출력의 모습

내보내기 후 컨텍스트 번들이 소스 코드 옆에 위치합니다:

myapp/
├── src/
│   ├── screens/
│   └── components/
├── design/
│   ├── CONTEXT.md          ← 에이전트가 먼저 읽음
│   ├── tokens.json         ← 타입 명시 디자인 토큰
│   ├── _meta.json          ← 내보내기 매니페스트, 경고
│   ├── components/
│   │   └── inventory.json  ← 정규 컴포넌트 이름 + ID
│   ├── screens/
│   │   ├── Home.json       ← 레이아웃 IR
│   │   ├── Home.png        ← 2× 렌더
│   │   ├── Profile.json
│   │   └── Profile.png
│   └── strings.json        ← 모든 UI 텍스트, 점 표기법 키
└── package.json

이것이 커밋하고, CLAUDE.md 또는 .cursorrules에서 참조하고, 에이전트가 가리키는 아티팩트입니다. 하나의 내보내기, 필요한 모든 컨텍스트.

일반적인 인스펙터 워크플로우와 비교해 보세요: 개발자가 Figma를 열고, 노드를 하나씩 클릭하고, 값을 코드에 복사하고, variable 이름을 놓치고, 모바일 패딩에서 간격을 틀리고, 디자인과 구현을 조화시키는 데 20분을 씁니다. 에이전트가 구현을 담당할 때 구조화된 내보내기는 이 루프를 완전히 제거합니다.

프로젝트 AI 설정에서 번들 참조하기

Claude Code는 세션 시작 시 CLAUDE.md를 읽습니다. Cursor는 .cursorrules를 읽습니다. 두 도구 모두 AI가 어떤 작업을 하기 전에 방향을 잡는 프로젝트 수준 지시 파일을 지원합니다. design/ 디렉토리를 가리키는 짧은 design 섹션을 추가하세요:

# For CLAUDE.md (Claude Code)
## Design context

All design data is in `design/`. Before implementing any UI:
1. Read `design/CONTEXT.md` for scope and token conventions
2. Use `design/tokens.json` for all color, spacing, radius, and typography values
3. Use `design/components/inventory.json` for canonical component names
4. Use `design/strings.json` for all UI copy — reference by dot-notation key
5. Validate against `design/screens/*.png` renders
# For .cursorrules (Cursor)
Always read design/CONTEXT.md before implementing UI.
Token values are in design/tokens.json — never hardcode colors or spacing.
Component names come from design/components/inventory.json.
UI strings come from design/strings.json with dot-notation keys.

이것들이 있으면 프로젝트의 모든 에이전트 세션이 design 디렉토리의 존재와 사용 방법을 자동으로 알게 됩니다 — 반복 프롬프팅이 필요 없습니다.

MCP 대안 — 왜 동일하지 않은지

Figma의 자체 Model Context Protocol (MCP) 서버는 AI가 Figma API에 직접 연결하고 요청에 따라 노드를 쿼리할 수 있게 합니다. 탐색 작업에 유용합니다 — 라이브 대화에서 "이 버튼의 색상이 무엇인가요?"라고 묻는 것. 재현 가능한 버전 관리 아티팩트를 생성하지는 않습니다. 에이전트가 실행될 때마다 변경되었을 수 있는 라이브 Figma 파일을 다시 읽습니다. 범위를 설명하는 CONTEXT.md가 없습니다. 안정적인 이름을 가진 사전 생성된 토큰 사전이 없습니다. 이상 레이아웃에 대한 경고 시스템이 없습니다.

figmascope와 Figma MCP는 서로 다른 문제를 해결합니다. MCP는 온라인, 라이브이며 인터랙티브 탐색에 적합합니다. figmascope는 구현 시 결정론적 코드젠에 적합한 오프라인, 버전 관리, 구조화된 아티팩트를 생성합니다. 자세한 비교는 figmascope vs Figma MCP를 참고하고, AI 디자인 워크플로우에 대한 더 많은 심층 분석은 figmascope 블로그를 탐색하세요.