Khi lập trình viên tìm kiếm "Figma inspector", họ thường muốn một trong hai thứ: cách xem giá trị thuộc tính trên node mà không cần ghế Dev Mode, hoặc cách đưa nội dung Figma cho AI agent. Loại đầu tiên được phục vụ tốt bởi các plugin. Loại thứ hai gần như không có gì phục vụ — cho đến khi có figmascope.

Bài viết này so sánh hai loại, giải thích tại sao chúng giải quyết các vấn đề khác nhau, và cho thấy thực tế một bản xuất native cho agent trông như thế nào. Ghé thăm figmascope.dev để tự thử xuất, hoặc đọc tiếp để có so sánh đầy đủ. Với quy trình thực tế, xem Figma to Cursor hoặc Figma to Claude Code.

Các công cụ "Figma inspector" thực sự làm gì

Figma inspector cổ điển là panel bên phải trong UI của Figma. Chọn một node: xem fill, stroke, hiệu ứng, kích thước, ràng buộc, kiểu chữ. Trong Dev Mode (thêm vào năm 2023), panel này có thêm đoạn code — thuộc tính CSS suy luận từ node, auto-layout biểu diễn dưới dạng flexbox, màu sắc với tên variable nếu Variables được thiết lập.

Các plugin như Inspect, Figma to Code, Anima và hàng chục plugin khác mở rộng thêm điều này. Một số tạo đoạn React hoặc SwiftUI từ node được chọn. Một số xuất file CSS. Một số chú thích canvas để xem xét bàn giao.

Tất cả những thứ này được thiết kế cho lập trình viên người đang nhìn vào màn hình. Chúng hiển thị thông tin theo yêu cầu, từng node một, được chọn bởi người biết node nào họ quan tâm.

Tại sao mô hình này không hoạt động với AI agent

Language model không ngồi trong Figma click từng node. Nó cần toàn bộ ngữ cảnh liên quan trong cửa sổ ngữ cảnh trước khi bắt đầu tạo code. Kiểm tra từng node tạo ra các mảnh rời rạc. Thứ agent cần là một tài liệu có cấu trúc bao phủ màn hình đầy đủ: cấu trúc phân cấp, giá trị token, chuỗi văn bản, tham chiếu component — tất cả cùng một lúc.

Còn có vấn đề về định dạng. Dev Mode tạo ra đoạn CSS gần đúng nhưng không hoàn toàn đúng — tên thuộc tính khác nhau giữa các framework, thuộc tính viết tắt cần mở rộng, giá trị pixel tuyệt đối cần ánh xạ sang hệ thống token của bạn. Agent tiêu thụ đầu ra Dev Mode thô sẽ tái tạo ảo giác về tên token, bịa giá trị khoảng cách và tạo ra code trông như được thiết kế bởi người đã nhìn qua thiết kế của bạn một lần.

Công cụ inspector trả lời "node này là gì?" Công cụ agent trả lời "toàn bộ màn hình này là gì, ở định dạng model có thể suy luận?"

figmascope như một thay thế Figma inspector

figmascope không phải là panel bên trong Figma. Nó chạy trong trình duyệt của bạn, giao tiếp trực tiếp với Figma REST API, và xuất một context bundle — một zip có cấu trúc chứa mọi thứ AI agent cần để triển khai thiết kế. Định dạng token được ghi chép chi tiết tại Xuất Design Token cho AI Agent, và triết lý bàn giao rộng hơn được đề cập tại Bàn Giao Thiết Kế AI.

Bản xuất bao gồm:

So sánh trực tiếp

Khả năng Figma Dev Mode Plugin Inspector figmascope
Giá trị thuộc tính từng node Có Có Không (không phải mục đích)
Xuất cây layout toàn màn hình Không Một phần Có — screens/*.json
Design token JSON có kiểu Không Một số plugin Có — tokens.json
Tài liệu đặc tả cho AI agent Không Không Có — CONTEXT.md
Chuỗi hợp nhất có khóa Không Không Có — strings.json
Danh mục component Một phần Một phần Có — components/inventory.json
Ảnh render tham chiếu Xuất thủ công Không Có — screens/*.png (2×)
Suy luận tần suất token Không Không Có — fallback cho file không có Variables
Yêu cầu ghế Figma Cần ghế Dev Mode Tùy plugin Không — chỉ dùng PAT
Riêng tư / không upload Dữ liệu được xử lý bởi Figma Tùy plugin Phía client, token chỉ đến api.figma.com

Figma Dev Mode — điểm đúng và điểm sai

Panel code của Dev Mode thực sự hữu ích với lập trình viên cần đọc nhanh giá trị khoảng cách hoặc kiểm tra font stack. Liên kết Variable của nó là bước đi đúng hướng — khi file Figma dùng Variables đúng cách, Dev Mode hiển thị tên variable cùng giá trị đã giải quyết.

Điểm yếu với quy trình AI:

Plugin Figma Inspector — toàn cảnh

Có khoảng ba loại plugin Figma inspector:

  1. Trình xem thuộc tính — sao chép những gì panel bên phải của Dev Mode hiển thị, thường miễn phí cho người dùng gói miễn phí không có Dev Mode. Ví dụ: Figma Inspect, Handoff.
  2. Trình tạo code — tạo code theo framework từ node được chọn. Ví dụ: Figma to Code, Anima, Locofy. Chúng tạo code từ lựa chọn riêng lẻ, không phải xuất có cấu trúc toàn file.
  3. Trình xuất token — xuất design token từ Figma Variables. Ví dụ: Tokens Studio (trước đây là Figma Tokens), Variables2JSON. Chúng giải quyết vấn đề xuất token nhưng không giải quyết vấn đề layout IR hay đặc tả agent.

figmascope không thuộc loại nào trong số này. Nó gần loại "trình xuất token" về tinh thần, nhưng giải quyết vấn đề rộng hơn: tạo ra ngữ cảnh có cấu trúc đầy đủ mà AI agent cần để triển khai chính xác một màn hình hoàn chỉnh.

Xem figmascope so với Figma plugin để có phân tích chi tiết hơn về toàn cảnh plugin.

Khi nào dùng gì

Các công cụ này không loại trừ nhau. Quy trình thực tế:

Sự khác biệt là kiểm tra đồng bộ (con người đọc từng node) so với xuất hàng loạt (agent nhận toàn bộ bức tranh trong một tài liệu có cấu trúc).

PAT — nó truy cập gì, không truy cập gì

figmascope dùng Figma Personal Access Token để đọc file qua REST API. Token được nhập trong trình duyệt, tồn tại trong bộ nhớ trình duyệt trong phiên, và chỉ được gửi như một header đến api.figma.com. Không có server nào nhận nó. Khi bạn đóng tab, nó biến mất.

Phạm vi tối thiểu yêu cầu là File content: read-only. figmascope không ghi vào Figma, không tạo bình luận, không truy cập file nhóm ngoài những gì token có quyền đọc. Xem bảo mật PAT và figmascope để có mô hình mối đe dọa đầy đủ.

Đầu ra trông như thế nào trong một dự án thực

Sau khi xuất, context bundle nằm cạnh source code của bạn:

myapp/
├── src/
│   ├── screens/
│   └── components/
├── design/
│   ├── CONTEXT.md          ← agent đọc cái này đầu tiên
│   ├── tokens.json         ← design token có kiểu
│   ├── _meta.json          ← manifest xuất, cảnh báo
│   ├── components/
│   │   └── inventory.json  ← tên + id component chuẩn
│   ├── screens/
│   │   ├── Home.json       ← layout IR
│   │   ├── Home.png        ← render 2×
│   │   ├── Profile.json
│   │   └── Profile.png
│   └── strings.json        ← tất cả bản sao UI, khóa dot-notation
└── package.json

Đây là artifact bạn commit, tham chiếu trong CLAUDE.md hoặc .cursorrules, và trỏ agent vào. Một lần xuất, tất cả ngữ cảnh cần thiết.

So sánh với quy trình inspector thông thường: lập trình viên mở Figma, click qua từng node, sao chép giá trị vào code, bỏ lỡ tên variable, sai khoảng cách padding di động, dành hai mươi phút điều chỉnh thiết kế so với triển khai. Bản xuất có cấu trúc loại bỏ hoàn toàn vòng lặp đó khi agent đang thực hiện triển khai.

Tham chiếu bundle trong cấu hình AI của dự án

Claude Code đọc CLAUDE.md khi bắt đầu phiên. Cursor đọc .cursorrules. Cả hai đều hỗ trợ file hướng dẫn cấp dự án định hướng AI trước khi nó làm bất cứ điều gì. Thêm một phần thiết kế ngắn trỏ vào thư mục design/ của bạn:

# 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.

Với những thứ này, mỗi phiên agent trong dự án tự động biết thư mục design tồn tại và cách sử dụng nó — không cần nhắc lại nhiều lần.

Thay thế MCP — và tại sao nó không giống nhau

Máy chủ Model Context Protocol (MCP) của Figma cho phép AI kết nối trực tiếp với Figma API và truy vấn node theo yêu cầu. Điều này hữu ích cho công việc khám phá — hỏi "nút này màu gì?" trong cuộc trò chuyện trực tiếp. Nó không tạo ra artifact có thể tái tạo, có phiên bản. Mỗi lần agent chạy, nó đọc lại file Figma trực tiếp, có thể đã thay đổi. Không có CONTEXT.md giải thích phạm vi. Không có từ điển token được tạo trước với tên ổn định. Không có hệ thống cảnh báo cho layout bất thường.

figmascope và Figma MCP giải quyết các vấn đề khác nhau. MCP là trực tuyến, trực tiếp và tốt cho khám phá tương tác. figmascope tạo ra artifact ngoại tuyến, có phiên bản, có cấu trúc phù hợp cho codegen xác định tại thời điểm triển khai. Xem figmascope so với Figma MCP để có so sánh chi tiết, và khám phá blog figmascope để có thêm phân tích sâu về quy trình thiết kế AI.