Figma Dev Mode là thứ đầu tiên hiển nhiên bạn tìm đến khi designer bàn giao công việc. Nó được tích hợp sẵn, chính thức, và nói ngôn ngữ riêng của Figma. Vậy tại sao bạn lại tìm đến thứ khác?

Câu trả lời không phải là Dev Mode tệ. Đó là nó giải quyết vấn đề khác. Hiểu vấn đề đó là gì — và không phải là gì — là toàn bộ bài viết này. Nếu bạn muốn nhảy thẳng đến câu trả lời, hãy thử figmascope tại đây.

Figma Dev Mode là gì

Dev Mode là lớp handoff trả phí của Figma, có sẵn trên các gói Professional và Organization. Khi bạn chuyển vào nó (nút </> trên thanh công cụ trên cùng), bạn nhận được một panel hiển thị cho bạn các đoạn CSS hoặc iOS/Android cho các layer được chọn, chú thích component, giá trị biến, và marker trạng thái "sẵn sàng cho dev" mà designer có thể đặt.

Nó được thiết kế cho khoảnh khắc designer nói "xong rồi, đi xây dựng nó." Developer mở Figma, nhấp xung quanh, sao chép đoạn code, xem spacing. Không có bước xuất. Không có file. Bạn chỉ đang đọc thiết kế tại chỗ.

Figma cũng cung cấp một MCP server chính thức cho Dev Mode (riêng biệt — được đề cập trong so sánh MCP), nhưng Dev Mode UI chủ yếu là trải nghiệm đọc của con người. Bạn chỉ, nhấp, kiểm tra, sao chép.

Các đoạn code Dev Mode tạo ra thực sự hữu ích như tài liệu tham khảo nhanh. Bạn có thể thấy font stack, spacing token chính xác nếu các biến được thiết lập, border radii. Đối với dev cấp cao chỉ cần kiểm tra sanity về một giá trị cụ thể, nó nhanh chóng.

figmascope là gì

figmascope là một công cụ phía trình duyệt — không có backend, không cần cài đặt, chạy trong một tab — xuất structured context bundle từ bất kỳ file Figma nào. Bạn dán URL Figma và Personal Access Token (được giữ trong bộ nhớ, không bao giờ gửi đến máy chủ), và nó tạo ra một .zip chứa:

Bundle là các file đơn giản. Không có runtime. Không có SDK. Thả nó vào repo, commit nó, diff nó, giao cho bất kỳ AI agent nào đọc file.

Sự khác biệt chính so với Dev Mode: đây không phải là trải nghiệm đọc bên trong Figma. Đây là bản xuất rời khỏi Figma hoàn toàn.

Dev Mode thắng ở đâu

Kiểm tra trực tiếp. Nếu bạn muốn nhấp vào một layer cụ thể và nhận giá trị tính toán chính xác ngay bây giờ, Dev Mode là tức thì. Không có bước xuất, không có zip, không có chuyển đổi context. Câu trả lời nằm trong panel.

Tích hợp chính thức. Figma xây dựng nó, duy trì nó, và cung cấp cải tiến cùng với phần còn lại của sản phẩm. Hỗ trợ biến, quy trình annotation, trạng thái sẵn sàng cho dev — đây là các tính năng native với sự hỗ trợ first-party. Khi Figma thêm khả năng design system mới, Dev Mode nhận nó.

Phân phối nhóm. Mọi designer và developer trên gói Figma org đã có nó. Không cần tooling bổ sung để cài đặt, giải thích, hoặc duy trì.

Công cụ design-time. Designer có thể đánh dấu các frame là sẵn sàng, để lại các chú thích ở cấp code, và cộng tác với developer bên trong cùng canvas. Qua lại này thực sự tốt cho các chu kỳ QA nơi bạn cần comment và cập nhật trạng thái.

figmascope thắng ở đâu

Output agnostic-agent, dựa trên file. Output của Dev Mode sống bên trong Figma. Output của figmascope sống trong một zip bạn kiểm soát. Thả nó bên cạnh code của bạn, chỉ Claude Code hoặc Cursor vào nó, và agent có thông số đầy đủ — tất cả màn hình, tất cả token, tất cả chuỗi — mà không cần kết nối với Figma.

Version control. Một bundle figmascope có thể diff được. Commit nó. Đặt nó vào PR. Xem chính xác token nào thay đổi giữa thiết kế tuần trước và hôm nay. Dev Mode không có khái niệm về lịch sử phiên bản cho chính thông số — Figma có lịch sử phiên bản file, nhưng đó là cho nguồn, không phải cho snapshot có thể xuất của design intent.

Không yêu cầu gói trả phí. figmascope được cấp phép MIT và miễn phí. Nó sử dụng Figma REST API công khai, chỉ yêu cầu PAT (miễn phí trên bất kỳ tài khoản Figma nào). Dev Mode yêu cầu gói Professional hoặc Organization. Đối với dev solo hoặc nhóm nhỏ làm việc với designer trên gói miễn phí, figmascope là lựa chọn duy nhất.

Output xác định. Mọi lần xuất cùng file Figma ở cùng phiên bản đều tạo ra cùng bundle. Cùng JSON, cùng token, cùng chuỗi. Điều này quan trọng cho khả năng tái tạo — bạn có thể chạy nó trong CI, ghim bundle vào release, regression-test theo nó.

Di động và offline. Khi bạn có bundle, nó hoạt động không cần kết nối với Figma hoặc bất kỳ máy chủ nào. Context agent là tự chứa. Hữu ích khi bạn đang trên máy bay, sau tường lửa, hoặc chỉ muốn không phụ thuộc vào uptime của Figma trong sprint build.

IR bảo tồn ngữ nghĩa không gian. Intermediate representation screens/*.json nắm bắt loại layout (stack, overlay, absolute), danh tính component (componentId trên các node INSTANCE), và tham chiếu chuỗi văn bản — không chỉ là CSS đã tính toán. Một agent có thể suy luận về cấu trúc layout, không chỉ sao chép đoạn code.

So sánh từng cặp: cùng file Figma

Lấy một màn hình đăng nhập với một form, một primary button, và một vài text token. Đây là những gì mỗi công cụ cung cấp cho bạn:

Output Dev Mode: Thuộc tính CSS cho layer bạn nhấp (font-size: 16px; color: #1f1d1a; border-radius: 8px). Một layer tại một thời điểm. Bạn sao chép những gì bạn cần. Nếu bạn muốn các trạng thái button đầy đủ, bạn nhấp từng cái. Nếu bạn muốn tên token, nó có mặt nếu designer đã kết nối variables — thiếu nếu không.

Output bundle figmascope: CONTEXT.md với thông số màn hình đăng nhập đầy đủ. tokens.json với color.text.primary, spacing.4, radius.md — có khóa, có kiểu, được lấy từ variables hoặc được suy luận. screens/login.json với cây IR: một stack container chứa một INSTANCE form tham chiếu đến componentId: "abc123", các leaf node con với stringRef.key: "auth.login.cta". strings.json ánh xạ khóa đó đến "Sign in". screens/login.png ở 2×.

Bạn giao bundle cho Cursor. Nó đọc CONTEXT.md, lấy tên token từ tokens.json, xây dựng component từ IR. Nó không cần mở Figma.

So sánh

Khía cạnh Figma Dev Mode figmascope
Giá Trả phí (gói Professional / Org) Miễn phí, MIT open source
Định dạng output Panel trong Figma, đoạn CSS/iOS/Android .zip: CONTEXT.md, tokens.json, screens/*.json, *.png
Mô hình tích hợp Bên trong Figma UI, kiểm tra từng layer Xuất trình duyệt, sau đó các file đơn giản ở bất cứ đâu
Tương thích agent Qua MCP server (tính năng riêng) Bất kỳ agent nào đọc file (Claude Code, Cursor, Aider, Copilot…)
Thân thiện với version control Không (output sống trong Figma) Có — bundle có thể diff, có thể commit
Output xác định Không (theo từng click, theo phiên) Có — cùng phiên bản file → cùng bundle
Offline / di động Không — yêu cầu kết nối Figma Có — bundle hoạt động không cần bất kỳ kết nối nào
Chú thích design-time Có — sẵn sàng cho dev, comment Không
IR không gian / layout Không — CSS phẳng cho layer được chọn Có — stack/overlay/absolute/leaf với danh tính component
Nguồn token Từ Figma variables khi được đặt Figma variables → suy luận từ tần suất → không có
Khóa chuỗi i18n Không Có — stringRef.key trong IR + strings.json
Yêu cầu cài đặt plugin Không (tích hợp vào Figma) Không (tab trình duyệt, REST API)

Khi nào sử dụng mỗi cái

Dùng Dev Mode khi: bạn cần kiểm tra spot một giá trị cụ thể, bạn đang ở giữa design review và muốn tra cứu token, nhóm của bạn đã trên gói Figma trả phí và sống bên trong Figma, hoặc bạn muốn quy trình annotation của designer và marker trạng thái sẵn sàng cho dev.

Dùng figmascope khi: bạn đang giao context cho AI agent cho sprint build, bạn muốn version-control thông số thiết kế cùng với code, bạn đang trên gói Figma miễn phí, bạn cần IR layout đầy đủ (không chỉ CSS từng layer), hoặc bạn muốn output xác định, có thể tái tạo mà bạn có thể ghim vào release hoặc diff trong PR.

Chúng không loại trừ nhau. Dùng Dev Mode để kiểm tra trong khi xây dựng, xuất bundle figmascope để neo thông số thiết kế trong repo của bạn. Hai cái không cạnh tranh — chúng bao gồm các phần khác nhau của quy trình.