Figma Design to Code, Code to Design: Giải thích rõ ràng
Figma Design to Code, Code to Design: Clearly Explained
Bài viết này đề cập đến cách hoạt động thực sự của quy trình thiết kế theo mã và từ mã đến thiết kế của Figma, bắt đầu từ lý do tại sao các phương pháp tiếp cận hiển nhiên lại thất bại, cách MCP giải quyết chúng và những thách thức kỹ thuật còn tồn tại.
Biến thiết kế thành mã hoạt động là một trong những nhiệm vụ phổ biến nhất trong quá trình phát triển giao diện người dùng và là một trong những nhiệm vụ khó tự động hóa nhất. Thiết kế tồn tại trong Figma. Mã sống trong một kho lưu trữ. Việc kết nối cả hai theo truyền thống yêu cầu nhà phát triển diễn giải bố cục, màu sắc, khoảng cách và cấu trúc thành phần theo cách thủ công từ tham chiếu trực quan. Các tác nhân mã hóa AI hứa hẹn sẽ thu hẹp khoảng cách đó, nhưng những cách tiếp cận ngây thơ lại thiếu sót ở những khía cạnh quan trọng.
Figma đã ra mắt máy chủ MCP vào tháng 6 năm 2025 để đưa ngữ cảnh thiết kế vào mã. Năm nay, họ đã phát hành hai quy trình làm việc mới: khả năng tạo thiết kế từ các công cụ mã hóa như Claude Code và Codex cũng như khả năng cho nhân viên viết trực tiếp vào thiết kế Figma.
Chúng tôi đã nói chuyện với Emil Sjölander, Aditya Muttur và Shannon Toliver từ nhóm Figma đằng sau những bản phát hành này để hiểu chi tiết và những thách thức về mặt kỹ thuật. Bài viết này đề cập đến cách hoạt động thực sự của quy trình thiết kế theo mã và từ mã đến thiết kế của Figma’, bắt đầu từ lý do tại sao các phương pháp tiếp cận hiển nhiên lại thất bại, cách MCP giải quyết chúng và những thách thức kỹ thuật mà vẫn còn.
Khoảng cách giữa thiết kế và Code
Trước khi đi sâu vào cách hoạt động của máy chủ MCP của Figma’, bạn nên hiểu các phương pháp tiếp cận trước đó và lý do mỗi phương pháp đều gặp khó khăn. Có hai cách tự nhiên để cấp quyền truy cập LLM vào một thiết kế: hiển thị cho nó một bức ảnh hoặc đưa cho nó dữ liệu thô. Cả hai đều có những hạn chế cơ bản nên đã thúc đẩy một cách tiếp cận khác.
Phương pháp 1: Chụp ảnh màn hình thiết kế
Cách rõ ràng nhất để biến thiết kế thành mã bằng LLM là chụp ảnh màn hình tệp Figma của bạn và dán nó vào tác nhân mã hóa. LLM nhìn thấy hình ảnh, diễn giải bố cục và tạo mã.
Tính năng này phù hợp với các giao diện người dùng đơn giản. Nhưng nó bị hỏng đối với bất cứ điều gì phức tạp. LLM phải đoán các giá trị dựa trên pixel. Nó không’không biết màu chính xác hoặc khoảng cách giữa các thẻ là 24px chứ không phải 20px. Đầu ra có thể trông gần, nhưng không giống hệt nhau.
[[TAG _127]]Vì vậy, ảnh chụp màn hình cung cấp cho LLM tham chiếu trực quan nhưng không có giá trị chính xác. Bước tự nhiên tiếp theo là đi theo hướng ngược lại: cung cấp tất cả dữ liệu.
Phương pháp 2: Nhận JSON thiết kế thông qua API của Figma’s
Figma hiển thị API REST trả về toàn bộ cấu trúc của tệp’ dưới dạng JSON. Mọi nút, thuộc tính và kiểu đều được bao gồm. Bây giờ LLM có dữ liệu thực thay vì pixel.
Nhưng việc có tất cả dữ liệu sẽ dẫn đến vấn đề riêng của nó: có quá nhiều dữ liệu. Một trang Figma có thể tạo ra hàng nghìn dòng JSON chứa đầy tọa độ pixel, hiệu ứng hình ảnh, quy tắc bố cục bên trong và siêu dữ liệu khác không hữu ích cho việc tạo mã. Việc đưa tất cả những thứ này vào một dấu nhắc có thể vượt quá cửa sổ ngữ cảnh. Ngay cả khi phù hợp, LLM vẫn phải duyệt qua tọa độ pixel, chế độ hòa trộn, cài đặt xuất và siêu dữ liệu hình ảnh khác không liên quan gì đến việc xây dựng giao diện người dùng, điều này làm giảm chất lượng đầu ra chất lượng.
Cả hai phương pháp đều không có tác dụng riêng. Ảnh chụp màn hình thiếu độ chính xác. Dữ liệu API thô có độ chính xác nhưng làm LLM bị nhiễu. Những gì bạn thực sự cần là thứ gì đó ở giữa: dữ liệu thiết kế có cấu trúc bảo tồn các giá trị chính xác như màu sắc, khoảng cách và tên thành phần nhưng loại bỏ tiếng ồn không cần thiết cho việc tạo mã.
Nền trung gian: Máy chủ MCP của Figma’s
Đó là những gì máy chủ MCP của Figma’ thực hiện. MCP là viết tắt của Model Context Protocol, một tiêu chuẩn xác định cách các tác nhân AI khám phá và gọi các công cụ bên ngoài. Máy chủ MCP của Figma’ lấy dữ liệu thiết kế thô từ API REST của Figma’, lọc nhiễu và chuyển đổi những gì còn lại thành một bản trình bày có cấu trúc rõ ràng. Vị trí pixel trở thành mối quan hệ bố cục như “được căn giữa bên trong phần gốc của nó.” Màu hex thô trở thành tham chiếu mã thông báo thiết kế. Các lớp được lồng sâu sẽ được làm phẳng để phù hợp với những gì nhà phát triển thực sự sẽ xây dựng. Kết quả là một bối cảnh nhỏ gọn, hiệu quả về mã thông báo mà LLM có thể tác động trực tiếp.
Với bối cảnh đó, chúng ta hãy’s xem cách hai quy trình công việc chính, thiết kế theo mã và mã để thiết kế, thực sự hoạt động như thế nào.
Design to Code
Thiết kế theo mã quy trình làm việc bắt đầu khi nhà phát triển chọn một khung trong Figma, sao chép URL của nó và dán nó vào một tác nhân mã hóa như Claude Code hoặc Codex với lời nhắc như “Thực hiện thiết kế này.” Sau đó, tác nhân sẽ tạo mã hoạt động phù hợp với thiết kế. Đây là những gì xảy ra đằng sau cảnh.
[[TAG_267 icục G_277]]Tác nhân mã hóa và máy chủ MCP của Figma’ hoạt động cùng nhau qua bốn bước. Hai cái đầu tiên là cơ chế MCP chung: khám phá công cụ và gọi công cụ. Hai điều cuối cùng là nơi kỹ thuật của Figma’ tạo nên sự khác biệt.
Bước 1. Tác nhân khám phá các công cụ có sẵn
Khi bạn kết nối máy chủ Figma MCP lần đầu tiên, tác nhân sẽ nhận được danh sách các công cụ có sẵn. Chúng bao gồm get_design_context, get_screenshot, get_metadata, v.v. Mỗi công cụ đều có tên, mô tả và tham số lược đồ.
[[T AG_315]][[ TAG_342]]Nhân viên hỗ trợ không biết cách hoạt động nội bộ của Figma. Nó đọc những mô tả này giống như cách nhà phát triển đọc tài liệu API, sau đó quyết định nên gọi công cụ nào dựa trên người dùng’ lời nhắc.
Bước 2. Tác nhân chuẩn bị các đối số và gọi công cụ
Nhân viên hỗ trợ chuẩn bị các đối số để gọi công cụ đã chọn. Trong trường hợp này, vì công cụ được chọn là get_design_context nên nó cần có khóa tệp và ID nút. Vì vậy, nó phân tích cả từ URL Figma mà bạn đã dán và gọi công cụ.
[[TA G_403]]Bước 3. Yêu cầu chạm tới Figma’s phụ trợ
Cuộc gọi công cụ được gửi qua mạng tới máy chủ MCP của Figma’ tại mcp.figma.com/mcp qua HTTP có thể phát trực tuyến. Máy chủ MCP xử lý quá trình xác thực, sau đó gọi các dịch vụ nội bộ của Figma’ để đọc dữ liệu thiết kế như cây nút, thuộc tính thành phần, kiểu và định nghĩa biến.
Bước 4. Chuyển đổi dữ liệu thiết kế thô sang bối cảnh thân thiện với LLM
Đây là nơi diễn ra kỹ thuật quan trọng nhất. Máy chủ MCP chuyển đổi JSON thô từ API REST của Figma’ thành một biểu diễn có cấu trúc ánh xạ tới cách nhà phát triển nghĩ về việc xây dựng giao diện người dùng. Vị trí pixel trở thành mối quan hệ bố cục như “phần tử này được căn giữa bên trong phần tử gốc.” Giá trị màu trở thành tham chiếu đến mã thông báo thiết kế như màu xanh thương hiệu thay vì mã màu thô. Các lớp lồng nhau sâu được đơn giản hóa để phản ánh những gì người dùng thực sự nhìn thấy. Và các thành phần được làm phong phú hơn nhờ ánh xạ mã. Ví dụ: khi thành phần nút Figma được ánh xạ tới src/comComponents/ui/Button.tsx thông qua Code Connect, tham chiếu đó sẽ xuất hiện ở đầu ra. LLM sử dụng lại thành phần hiện có thay vì tạo lại nó từ vết xước.
Đầu ra mặc định là khung React + Tailwind vì đó là ngăn xếp giao diện người dùng phổ biến nhất. Nhưng nó là sự thể hiện có cấu trúc của thiết kế chứ không phải mã được tạo ra. LLM lấy cách trình bày này và tạo mã thực tế trong bất kỳ khuôn khổ nào mà nhà phát triển chỉ định.
Công cụ này sẽ mở URL mục tiêu trong trình duyệt và chèn tập lệnh chụp JavaScript. Đối với máy chủ dev cục bộ, nó kết nối trực tiếp. Đối với các URL sản xuất hoặc dàn dựng, nó sử dụng công cụ tự động hóa trình duyệt như Playwright để mở trang và chèn tập lệnh theo chương trình.
Khi cửa sổ trình duyệt mở ra, hai thứ xuất hiện: giao diện người dùng đang chạy và lớp phủ thanh công cụ chụp. Quá trình chụp ban đầu diễn ra tự động khi tải trang. Từ đó, nhà phát triển có thể chụp toàn bộ màn hình hoặc chọn cụ thể phần tử.
Bước 2: Tập lệnh đọc DOM
Khi người dùng chọn giao diện người dùng mong muốn từ ảnh chụp trực tiếp, tập lệnh được chèn sẽ không chụp ảnh màn hình. Nó đọc DOM trực tiếp.
Nó duyệt cây DOM và trích xuất các kiểu, thuộc tính bố cục, nội dung văn bản và nguồn hình ảnh được tính toán cho mọi thành phần hiển thị. Nó cũng bảo tồn hệ thống phân cấp cha-con. Một thùng chứa linh hoạt có ba thành phần con vẫn có cấu trúc như một thùng chứa có ba thành phần con chứ không phải là một tập hợp phẳng các thành phần con. hộp.
Cái này là yếu tố làm cho đầu ra có thể chỉnh sửa được trong Figma. Ảnh chụp màn hình chụp pixel. Quá trình DOM ghi lại cấu trúc và mối quan hệ giữa các phần tử.
Bước 3: Dữ liệu DOM trở thành các lớp Figma
Dữ liệu DOM đã thu thập sẽ được gửi đến phần phụ trợ của Figma’, nơi dữ liệu này được xây dựng lại thành các lớp thiết kế Figma gốc. Mỗi phần tử HTML ánh xạ tới một khung hoặc hình dạng Figma. Bố cục lưới và hộp linh hoạt CSS trở thành nhóm bố cục tự động của Figma. Các nút văn bản trở thành các lớp văn bản Figma có thể chỉnh sửa với phông chữ, kích thước, trọng lượng và màu sắc chính xác. Hình ảnh được trích xuất và nhúng dưới dạng hình ảnh lấp đầy.
Điều đó bao gồm hai quy trình công việc cốt lõi. Tuy nhiên, việc khiến chúng hoạt động đáng tin cậy trong quá trình sản xuất, trên hàng triệu tệp Figma, nhiều tác nhân mã hóa và hệ thống thiết kế thực, sẽ gây ra một loạt vấn đề khác.
Thách thức kỹ thuật
Dưới đây là một số thách thức quan trọng nhất mà nhóm của Figma’ phải đối mặt và cách họ giải quyết chúng.
Thử thách 1: Giới hạn cửa sổ ngữ cảnh
LLM có cửa sổ ngữ cảnh cố định, vì vậy số lượng mã thông báo là một hạn chế cứng. Dữ liệu thiết kế cho một trang Figma phức tạp có thể rất lớn, nhiều hơn những gì một tác nhân mã hóa có thể xử lý trong một cuộc gọi. Ví dụ: Mã Claude mặc định có giới hạn 25.000 mã thông báo cho các phản hồi của công cụ MCP. Nếu bạn gọi get_design_context trên toàn bộ trang thay vì một nút cụ thể, phản hồi có thể dễ dàng vượt quá giới hạn đó và bị cắt bớt. Thử thách này không phải chỉ có ở Figma. Bất kỳ máy chủ MCP nào hiển thị dữ liệu có cấu trúc lớn như cơ sở mã, kho tài liệu hoặc tệp thiết kế đều phải giải quyết cùng một vấn đề: làm thế nào để cung cấp cho LLM đủ ngữ cảnh hữu ích mà không vượt quá những gì nó có thể quá trình.