# Figma lập đội FDE đầu tiên, và nhiệm vụ của đội là dạy agent hiểu design system của khách

> Figma ghi rõ vai trò này không phải bán hàng, cũng không phải dịch vụ. Việc chính là ngồi cạnh khách và dựng phần ngữ cảnh để agent sinh code dùng đúng component của họ.

Bản gốc: https://fdetimes.net/vi/phan-tich/forward-deployed-engineer-figma-design-system-san-sang-cho-ai/

Trong tin tuyển dụng FDE trên Greenhouse, Figma viết thẳng: đây là vị trí kỹ sư cấp senior/staff thuộc khối Product and Engineering, và nó không phải bán hàng hay dịch vụ. Figma cũng cho biết đây là đội FDE đầu tiên của công ty, một founding team.

Một công ty làm công cụ thiết kế lập đội kỹ sư chuyên ngồi tại chỗ khách nghe có vẻ lạ. Lý do nằm ở nhiệm vụ mà tin tuyển dụng nêu ra: làm cho design system của doanh nghiệp sẵn sàng cho agent, để công cụ AI sinh ra code đúng hệ thống, bám sát thiết kế.

Câu đó đáng để bạn đọc chậm. Nó cho thấy việc FDE trong mảng AI đang đi về đâu: thứ khách hàng cần không còn chỉ là một tích hợp API, mà là một lớp ngữ cảnh được dựng riêng cho tổ chức của họ. Phải có người hiểu cả code lẫn con người ở phía khách mới dựng được lớp đó.

## Sản phẩm đã sẵn, vậy thiếu cái gì?

Nhìn bộ công cụ Figma đang có thì thấy hạ tầng đã khá đầy đủ. Theo tài liệu dành cho developer, Figma MCP server đưa Figma vào quy trình làm việc với AI. Server này không chỉ đọc dữ liệu thiết kế: từ client MCP, agent còn tạo và sửa được nội dung dựng trực tiếp trong Figma.

Kế đến là Code Connect, cầu nối giữa codebase và Dev Mode. Theo Figma, nó giữ cho code được sinh ra nhất quán với codebase của khách bằng cách dùng lại component thật của họ. Tài liệu còn nói agent có thể lấy design system làm nguồn chuẩn khi dựng và chỉnh nội dung trong Figma.

Config 2026 diễn ra hồi tháng 6 đẩy công ty thêm một bước về phía code. Code Layers đưa code lên canvas, và theo mô tả của Figma, designer giờ có thể tạo code tương tác ngay trong Figma. Tính năng Skills, theo bản tổng hợp của Classmethod, cho phép đóng gói quy trình và quy ước thiết kế riêng thành chỉ dẫn tái sử dụng cho agent.

Nhưng tất cả những công cụ đó có chung một điểm yếu: chúng chỉ là chỗ chứa. Code Connect không tự biết component `Button` nào trong repo của khách ứng với component nào trên canvas.

Skills không tự biết khi nào đội thiết kế của một ngân hàng dùng biến thể cảnh báo thay vì biến thể nguy hiểm. Phần ngữ cảnh ấy nằm trong đầu từng tổ chức, và chẳng sản phẩm nào đóng hộp sẵn được.

**Điểm mấu chốt:** Agent chỉ giỏi bằng phần ngữ cảnh mà ai đó chịu khó dựng cho nó.

## "Agent-ready" trông như thế nào ngoài thực tế?

Thử hình dung một doanh nghiệp có thư viện component React nội bộ và một file Figma chứa component "Button/Primary". Khi chưa có ánh xạ, agent đọc thiết kế qua MCP rồi sinh ra một thẻ `` trần, gắn mã màu hex cứng và padding tính bằng pixel. Nhìn thì đúng, nhưng nó không dùng gì trong design system cả.

Khi đã có ánh xạ Code Connect, agent biết phải import `` từ thư viện của khách. Nếu thêm một Skill ghi quy ước kiểu "form luôn đặt nút chính ở bên phải, không bao giờ có hai nút primary cạnh nhau", code sinh ra sẽ không chỉ đúng component mà còn đúng cách tổ chức đó vẫn dùng component.

Đi từ trạng thái thứ nhất sang trạng thái thứ hai chính là công việc FDE. Bạn phải đọc repo của khách, ngồi với đội thiết kế để lôi ra những quy ước họ chưa từng viết xuống, viết ánh xạ và chỉ dẫn, rồi kiểm tra kết quả trên những màn hình thật.

Bảng dưới đây đặt tài liệu sản phẩm cạnh nhiệm vụ trong tin tuyển dụng. Cột phải là suy luận về việc mỗi lớp công cụ đòi hỏi ở phía khách, không phải danh sách Figma công bố.

| Lớp sản phẩm | Sản phẩm cung cấp | Việc FDE phải làm tại khách |
|---|---|---|
| MCP server | Đọc dữ liệu thiết kế và ghi lại lên canvas từ client MCP | Nối vào công cụ AI khách đang dùng, quyết định agent được ghi gì và ở đâu |
| Code Connect | Cầu nối giữa codebase và Dev Mode | Ánh xạ từng component trên canvas tới component thật trong repo của khách |
| Skills | Chỗ chứa chỉ dẫn tái sử dụng cho agent | Lôi quy ước ngầm của đội thiết kế ra và viết thành chỉ dẫn |

Cột giữa thì khách nào cũng nhận như nhau, còn cột phải thì mỗi khách một khác. Phần không lặp lại được ấy là lý do một công ty sản phẩm phải thuê kỹ sư đi tới tận nơi.

## Vì sao phải là senior?

Tin tuyển dụng đặt yêu cầu bắt buộc là từ 5 năm trở lên làm phần mềm production từ đầu đến cuối, kèm một khoảng thời gian đáng kể làm việc nhúng cùng khách hàng hoặc đội đối tác. Vai trò này cũng có đi lại định kỳ để làm việc trực tiếp với các khách hàng chiến lược.

Lý do rất dễ hiểu khi nhìn vào loại quyết định mà người này phải đưa ra. Ánh xạ sai một component dùng chung thì mọi màn hình agent sinh ra đều sai theo.

Cho agent quyền ghi lên canvas của một doanh nghiệp lớn mà không đặt ranh giới thì có thể phá file của cả một đội. Những lựa chọn như vậy cần người đã từng tự tay ship và vận hành hệ thống thật.

Còn một lý do nữa, nằm ở chữ "Product and Engineering". Đội đầu tiên thường là nơi sản phẩm học được nhiều nhất: mỗi lần FDE phải viết đi viết lại cùng một loại ánh xạ hay chỉ dẫn là một tín hiệu cho đội sản phẩm biết nên tự động hóa điều gì tiếp theo.

Một kỹ sư dịch vụ sẽ chỉ làm xong việc, còn kỹ sư sản phẩm sẽ mang bài học đó về.

## Bạn nên luyện gì nếu nhắm tới vai trò này?

Kỹ năng nằm ở trung tâm là dựng ngữ cảnh cho agent trên một hệ thống có sẵn, chứ không phải viết prompt hay.

Cách luyện tốt nhất là tự làm phiên bản nhỏ của đúng việc này: lấy một design system mã nguồn mở có thư viện React, ánh xạ vài component, viết chỉ dẫn quy ước, rồi cho agent dựng cùng một màn hình hai lần, một lần có ngữ cảnh và một lần không.

Sau đó, hãy đo. Đếm trong mỗi lần chạy có bao nhiêu phần tử giao diện dùng component của thư viện và bao nhiêu phần tử là HTML trần với giá trị gắn cứng.

Đừng dừng ở việc đếm component, vì một màn hình có thể dùng đúng component mà vẫn sai hệ thống. Hãy kiểm tra thêm màu và khoảng cách có lấy từ token của thư viện hay vẫn là mã hex, số pixel viết tay.

Rồi soát biến thể: nút xóa tài khoản mà agent dựng bằng `variant="primary"` thay vì biến thể nguy hiểm là một lỗi mà phép đếm component không bắt được.

Giả sử lần đầu chỉ 3 trên 20 phần tử đạt đủ ba tiêu chí, lần sau là 17 trên 20: một con số như vậy trong CV hay portfolio thuyết phục hơn mọi câu "có kinh nghiệm với AI agent".

Khi đọc mô tả FDE ở bất kỳ công ty nào, bạn có thể dùng tin của Figma làm thước đo. Vai trò đặt trong khối nào, cấp nào, có phải đội đầu tiên không, có yêu cầu thời gian làm việc nhúng cùng khách không. Những dòng đó cho bạn biết mình sẽ làm kỹ sư sản phẩm đi thực địa hay làm đội triển khai hậu mãi.

Những ánh xạ và chỉ dẫn mà đội đầu tiên viết tay hôm nay nhiều khả năng sẽ dần được đóng vào sản phẩm. Ai vào đội từ bây giờ sẽ là người chọn phần nào đáng tự động hóa, và đó là chỗ đứng đáng để bạn nhắm tới.

**Thử ngay tuần này:**

- Chọn một design system mã nguồn mở có thư viện React, viết ánh xạ Code Connect cho 5 component, rồi so sánh code agent sinh ra qua MCP server khi có và khi không có ánh xạ.
- Viết ra 10 quy ước thiết kế của dự án bạn đang làm (spacing, cách dùng biến thể, khi nào dùng component nào) dưới dạng chỉ dẫn mà agent dùng lại được.
- Đọc lại mô tả FDE của ba công ty, đánh dấu dòng nào nói vai trò thuộc khối nào, cấp nào, và yêu cầu bao nhiêu thời gian làm việc nhúng cùng khách.

## Nguồn

- [Forward Deployed Engineer – Figma (Greenhouse)](https://job-boards.greenhouse.io/figma/jobs/6158162004)

- [Figma MCP server – Figma Developer Docs](https://developers.figma.com/docs/figma-mcp-server/)

- [Code Connect – Figma Developer Docs](https://developers.figma.com/docs/code-connect/)

- [Everything announced at Config 2026 – Figma Forum](https://forum.figma.com/product-updates-3/everything-announced-at-config-2026-55221)

- [Figma Launches Code Layers, Motion at Config 2026 – CMSWire](https://www.cmswire.com/digital-experience/figma-launches-code-layers-motion-at-config-2026/)

- [Summary of Figma's New Features Announced at Config 2026 – Classmethod](https://dev.classmethod.jp/en/articles/figma-config-2026-recap/)