Nguồn: Bytebytego Newsletter
Tóm tắt
Figma đã ra mắt MCP (Model Context Protocol) server vào tháng 6/2025 để đưa design context vào các AI coding agent. Năm 2026, Figma mở rộng thêm hai workflow mới: sinh design từ các coding tool như Claude Code và Codex, và cho phép AI agent viết trực tiếp vào Figma design. Bài viết phỏng vấn team engineering của Figma để giải thích cơ chế hoạt động thực sự đằng sau các workflow này.
Vấn đề cốt lõi mà Figma MCP giải quyết là “design-code gap”: trước đây, AI agent chỉ nhìn thấy code — không có ngữ cảnh về component hierarchy, constraint, spacing hay màu sắc trong Figma. Các tiếp cận ngây thơ gồm screenshot-to-code (mất thông tin cấu trúc) và direct API dump (quá nhiều dữ liệu dư thừa) đều thất bại. MCP cung cấp đúng lớp abstraction: agent query Figma qua giao thức chuẩn để lấy design token, component structure và layout theo yêu cầu.
Workflow ngược lại — code-to-design — cho phép AI agent từ output của coding tool (Claude Code, Codex) tự động cập nhật Figma file tương ứng. Đây là bước tiến từ “design drives code” sang vòng lặp hai chiều, nơi cả designer và developer có thể làm việc trên cùng source of truth. Các thách thức kỹ thuật còn tồn tại gồm: mapping giữa React component tree và Figma layer hierarchy, xử lý responsive constraints và state management.
Đây là ví dụ thực tế của MCP trong production workload, cho thấy protocol này không chỉ dùng cho tool integration đơn giản mà có thể xử lý design system phức tạp với hàng nghìn component. Engineering challenges của Figma team — đặc biệt là về performance khi serialize design graph lớn — là bài học có giá trị cho bất kỳ team nào đang xây dựng MCP server cho domain phức tạp.