Figma Dev Mode는 디자이너가 작업을 인계할 때 가장 먼저 손이 가는 도구입니다. 기본 탑재되어 있고, 공식적이며, Figma 자체 언어로 말합니다. 그렇다면 왜 다른 것을 선택할까요?

Dev Mode가 나쁘다는 것이 아닙니다. 다른 문제를 해결하기 때문입니다. 그 문제가 무엇인지, 무엇이 아닌지 이해하는 것이 이 글의 전부입니다. 바로 답으로 가고 싶다면, 여기서 figmascope를 사용해보세요.

Figma Dev Mode란

Dev Mode는 Professional 및 Organization 플랜에서 사용할 수 있는 Figma의 유료 핸드오프 레이어입니다. 상단 툴바의 </> 버튼으로 전환하면, 선택한 레이어의 CSS 또는 iOS/Android 스니펫, 컴포넌트 주석, 변수 값, 그리고 디자이너가 설정할 수 있는 "개발 준비 완료" 상태 마커가 표시되는 패널을 볼 수 있습니다.

디자이너가 "이거 완성됐어요, 이제 만들어주세요"라고 말하는 순간을 위해 설계되었습니다. 개발자는 Figma를 열고, 클릭하며, 스니펫을 복사하고, 간격을 확인합니다. 내보내기 단계가 없습니다. 파일도 없습니다. 그냥 디자인을 그 자리에서 읽는 것입니다.

Figma는 Dev Mode용 공식 MCP 서버도 제공합니다(별도 기능 — MCP 비교에서 다룸). 하지만 Dev Mode UI는 주로 사람이 읽는 경험입니다. 가리키고, 클릭하고, 검사하고, 복사합니다.

Dev Mode가 생성하는 코드 스니펫은 빠른 참조로 진정으로 유용합니다. 폰트 스택, 변수가 설정된 경우 정확한 간격 토큰, 테두리 반경을 볼 수 있습니다. 특정 값만 확인하면 되는 시니어 개발자에게는 빠릅니다.

figmascope란

figmascope는 브라우저 사이드 도구로 — 백엔드도 없고, 설치도 없이, 탭에서 실행됩니다 — 어떤 Figma 파일에서든 구조화된 컨텍스트 번들을 내보냅니다. Figma URL과 PAT(메모리에 보관, 서버로 전송 없음)를 붙여넣으면 다음을 포함하는 .zip을 생성합니다:

번들은 일반 파일입니다. 런타임도 없고, SDK도 없습니다. 레포지토리에 넣고, 커밋하고, diff하고, 파일을 읽는 어떤 AI 에이전트에게도 넘겨주세요.

Dev Mode와의 핵심 차이: 이것은 Figma 내부의 읽기 경험이 아닙니다. Figma를 완전히 벗어나는 내보내기입니다.

Dev Mode가 우위를 점하는 곳

실시간 검사. 지금 당장 특정 레이어의 정확한 계산 값을 클릭하고 싶다면, Dev Mode가 즉각적입니다. 내보내기 단계도, 압축 파일도, 컨텍스트 전환도 없습니다. 패널에 답이 있습니다.

공식 통합. Figma가 만들고, 유지 관리하며, 제품의 나머지와 함께 개선합니다. 변수 지원, 주석 워크플로, 개발 준비 완료 상태 — 이것들은 일급 지원을 받는 네이티브 기능입니다. Figma가 새로운 디자인 시스템 기능을 추가하면 Dev Mode가 그것을 받습니다.

팀 배포. Figma 조직 플랜의 모든 디자이너와 개발자가 이미 보유하고 있습니다. 추가 툴링 설치, 설명, 유지 관리가 필요 없습니다.

디자인 시간 툴링. 디자이너는 프레임을 준비 완료로 표시하고, 코드 수준의 주석을 남기며, 같은 캔버스에서 개발자와 협업할 수 있습니다. 이 왕복 과정은 댓글과 상태 업데이트가 필요한 QA 주기에서 진정으로 유용합니다.

figmascope가 우위를 점하는 곳

에이전트 독립적, 파일 기반 출력. Dev Mode의 출력은 Figma 안에 있습니다. figmascope의 출력은 여러분이 제어하는 zip 파일 안에 있습니다. 코드 옆에 넣고, Claude Code나 Cursor가 그것을 가리키면, 에이전트는 Figma에 전혀 연결하지 않고도 — 모든 화면, 모든 토큰, 모든 문자열을 포함하는 — 전체 사양을 갖게 됩니다.

버전 관리. figmascope 번들은 diff 가능합니다. 커밋하세요. PR에 넣으세요. 지난주 디자인과 오늘 디자인 사이에 어떤 토큰이 변경되었는지 정확히 확인하세요. Dev Mode에는 사양 자체의 버전 기록 개념이 없습니다 — Figma에는 파일 버전 기록이 있지만, 그것은 소스를 위한 것이지 디자인 의도의 내보내기 가능한 스냅샷이 아닙니다.

유료 티어 불필요. figmascope는 MIT 라이선스이며 무료입니다. 공개 Figma REST API를 사용하며, PAT(어떤 Figma 계정에서나 무료)만 필요합니다. Dev Mode는 Professional 또는 Organization 플랜이 필요합니다. 무료 플랜 디자이너와 함께 일하는 솔로 개발자나 소규모 팀에게는 figmascope가 유일한 옵션입니다.

결정론적 출력. 동일한 Figma 파일의 동일한 버전에서 매 내보내기는 동일한 번들을 생성합니다. 동일한 JSON, 동일한 토큰, 동일한 문자열. 이것은 재현성에 중요합니다 — CI에서 실행하고, 번들을 릴리스에 고정하고, 회귀 테스트를 수행할 수 있습니다.

포터블 및 오프라인. 번들을 얻으면 Figma나 어떤 서버에도 연결 없이 작동합니다. 에이전트 컨텍스트는 자급자족합니다. 비행기에서, 방화벽 뒤에서, 또는 빌드 스프린트 중에 Figma 가동 시간에 의존하지 않고 싶을 때 유용합니다.

IR이 공간적 의미론을 보존합니다. screens/*.json 중간 표현은 레이아웃 종류(stack, overlay, absolute), 컴포넌트 아이덴티티(INSTANCE 노드의 componentId), 텍스트 문자열 참조를 — 계산된 CSS만이 아니라 — 캡처합니다. 에이전트는 스니펫을 복사하는 것이 아니라 레이아웃 구조에 대해 추론할 수 있습니다.

나란히: 동일한 Figma 파일

폼, 기본 버튼, 몇 가지 텍스트 토큰이 있는 로그인 화면을 예로 들겠습니다. 각 도구가 제공하는 것:

Dev Mode 출력: 클릭한 레이어의 CSS 속성 (font-size: 16px; color: #1f1d1a; border-radius: 8px). 한 번에 한 레이어. 필요한 것을 복사합니다. 모든 버튼 상태를 원하면 각각 클릭합니다. 토큰 이름이 원하면, 디자이너가 변수를 연결한 경우 있고 — 그렇지 않으면 없습니다.

figmascope 번들 출력: 전체 로그인 화면 사양이 담긴 CONTEXT.md. color.text.primary, spacing.4, radius.md를 담은 tokens.json — 키가 지정되고, 타입되며, 변수에서 소싱되거나 추론됩니다. screens/login.json에 IR 트리: componentId: "abc123"를 참조하는 폼 INSTANCE를 담은 stack 컨테이너, stringRef.key: "auth.login.cta"가 있는 자식 leaf 노드. 그 키를 "Sign in"에 매핑하는 strings.json. 2×의 screens/login.png.

번들을 Cursor에 넘겨줍니다. CONTEXT.md를 읽고, tokens.json에서 토큰 이름을 가져오며, IR에서 컴포넌트를 빌드합니다. Figma를 전혀 열 필요가 없습니다.

비교

항목 Figma Dev Mode figmascope
가격 유료 (Professional / Org 플랜) 무료, MIT 오픈 소스
출력 형식 Figma 내 패널, CSS/iOS/Android 스니펫 .zip: CONTEXT.md, tokens.json, screens/*.json, *.png
통합 모델 Figma UI 내부, 레이어별 검사 브라우저 내보내기, 그 후 어디서든 일반 파일
에이전트 호환 MCP 서버를 통해 (별도 기능) 파일을 읽는 어떤 에이전트든 (Claude Code, Cursor, Aider, Copilot…)
버전 관리 친화적 아니요 (출력이 Figma에 있음) 예 — 번들은 diff 가능, 커밋 가능
결정론적 출력 아니요 (클릭별, 세션 바운드) 예 — 동일한 파일 버전 → 동일한 번들
오프라인 / 포터블 아니요 — Figma 연결 필요 예 — 번들은 연결 없이 작동
디자인 시간 주석 예 — 개발 준비 완료, 댓글 아니요
공간 / 레이아웃 IR 아니요 — 선택된 레이어의 평탄한 CSS 예 — 컴포넌트 아이덴티티가 있는 stack/overlay/absolute/leaf
토큰 소싱 설정된 경우 Figma 변수에서 Figma 변수 → 빈도에서 추론 → 없음
i18n 문자열 키 아니요 예 — IR의 stringRef.key + strings.json
플러그인 설치 필요 아니요 (Figma에 내장) 아니요 (브라우저 탭, REST API)

언제 무엇을 사용할지

Dev Mode를 사용할 때: 특정 값을 빠르게 확인하고 싶을 때, 디자인 검토 중에 토큰을 조회하고 싶을 때, 팀이 이미 유료 Figma 플랜에 있고 Figma 안에서 생활할 때, 또는 디자이너의 주석 워크플로와 개발 준비 완료 상태 마커를 원할 때.

figmascope를 사용할 때: 빌드 스프린트를 위한 AI 에이전트에게 컨텍스트를 전달할 때, 코드와 함께 디자인 사양을 버전 관리하고 싶을 때, 무료 Figma 플랜을 사용할 때, 전체 레이아웃 IR(레이어별 CSS만이 아닌)이 필요할 때, 또는 릴리스에 고정하거나 PR에서 diff할 수 있는 결정론적이고 재현 가능한 출력을 원할 때.

이 둘은 상호 배타적이지 않습니다. 빌드하는 동안 Dev Mode를 사용해 검사하고, 레포지토리에 디자인 사양을 고정하기 위해 figmascope 번들을 내보내세요. 두 도구는 경쟁하지 않습니다 — 워크플로의 서로 다른 부분을 커버합니다.