Chuẩn bị design system Figma để agent hiểu được

1. Design system mà agent hiểu được, và layer name có ý nghĩa

Video mở đầu bằng một điều kiện: theo video đăng ngày 28/10/2026, muốn Figma agent tạo ra những bản design trông và "cảm" giống sản phẩm của bạn, nó cần một design system mà nó hiểu được. Điều đó gồm ba thứ nền: component được thiết kế chu đáo, naming convention nhất quán, và documentation mô tả rõ ràng. Sau đó mới tới lớp thứ hai: hướng dẫn dành riêng cho agent, gồm examples, guidelines và skills. Người trình bày nói đây là những best practice sẽ có lợi cho cả đồng đội của bạn lẫn các agent của họ.

Việc trước hết là audit và tinh chỉnh những component bạn đã có. Theo video đăng ngày 28/10/2026, component được thiết kế tốt sẽ tự "dạy" agent cách dùng chúng, vì thông tin về mục đích (purpose), cấu trúc (structure) và hành vi (behavior) đã được cài sẵn ngay trong design. Video liệt kê năm cải tiến trong phần "Optimize your component library": dùng layer name có ý nghĩa, kiểm cách component resize, cấu hình component property, giữ variant gọn, và viết component description.

Mục thứ nhất là layer name có ý nghĩa. Theo video đăng ngày 28/10/2026, layer name mô tả rõ và nhất quán cho agent những thông tin giá trị về cấu trúc của một component. Ví dụ video đưa ra: một layer tên "Card Footer" cho agent biết nhiều hơn hẳn so với "Frame 437". Trong file demo, cây layer của component Card / Exhibit được đặt tên kiểu đó: Card media, Exhibit image, Card body, Card footer.

Agent tip #1: nếu bạn không có nhiều thời gian, bạn có thể dùng chính agent để đổi tên layer hàng loạt. Theo video đăng ngày 28/10/2026, agent phân tích nội dung của layer cùng ngữ cảnh xung quanh, rồi gán cho nó một cái tên có tính mô tả.

2. Component resize đúng và component property đầy đủ

Mục tiếp theo là kiểm cách component resize. Theo video đăng ngày 28/10/2026, khi bạn kéo đổi kích thước một component trên canvas, nó phải phản ánh chính xác hành vi responsive của component đó. Hãy dùng auto layout hoặc constraint để đảm bảo component resize đúng. Như vậy, khi agent dùng component của bạn ở các kích thước khác nhau, chúng sẽ hoạt động đúng như bạn mong đợi.

Agent tip #2: theo video đăng ngày 28/10/2026, agent có thể giúp bạn đánh giá hành vi responsive của component. Chỉ cần bảo nó bày các component ra ở nhiều kích thước khác nhau, để bạn dễ dàng nhìn lướt, phát hiện và sửa chỗ nào có vấn đề.

Kế đến là thiết lập component property cho từng component. Theo video đăng ngày 28/10/2026, component property cho agent biết khía cạnh nào của component có thể tuỳ biến và khía cạnh nào phải giữ cố định. Hãy cấu hình property cho mọi khía cạnh tuỳ biến được của component.

Agent tip #3: theo video đăng ngày 28/10/2026, bạn cũng có thể dùng Figma agent để audit các component và gợi ý những property mà bạn có thể đã bỏ sót. Trong demo, người trình bày chọn bốn component và gõ một yêu cầu bắt đầu bằng "Suggest any missi…".

Một số property còn mang các thiết lập cho agent thông tin cụ thể hơn. Ví dụ, theo video đăng ngày 28/10/2026, đưa một slot vào component sẽ báo cho agent biết component đó có một vùng nội dung tự do (freeform content area). Sau đó, preferred instances và phần description của slot sẽ cho agent biết thứ gì nên nằm bên trong vùng đó.

3. Variant gọn, description rõ ràng

Về variant, lời khuyên trong video đăng ngày 28/10/2026 là dùng chúng để thể hiện các biến thể về style hoặc state, như một button primary và một button secondary, chứ không dùng cho khác biệt về cấu trúc, như hai layout card hoàn toàn khác nhau. Nếu một lựa chọn có cấu trúc hoặc mục đích khác hẳn, có lẽ nó nên là một component riêng.

Nhìn chung, theo video đăng ngày 28/10/2026, tốt hơn là giữ số variant ở mức tối thiểu và dựa vào component property thay thế. Cách này giữ cho mục đích của mỗi component rõ ràng và tập trung, giúp agent dễ hiểu component đó dùng để làm gì và khi nào nên dùng.

Cuối cùng trong nhóm component: hãy viết vào description của component một đoạn tổng quan ngắn về component đó và cách nên dùng nó. Bạn cũng có thể thêm các alias (tên gọi khác) giúp cả người lẫn agent tìm ra đúng component khi tìm bằng những từ khác. Theo video đăng ngày 28/10/2026, điều này cho agent thêm ngữ cảnh về mục đích của từng component, để nó chọn đúng cái cần dùng.

Agent tip #4: nếu bạn đã có sẵn mô tả component nằm trên canvas, theo video đăng ngày 28/10/2026, hãy cân nhắc dùng agent để chép toàn bộ thông tin đó vào phần description của component một cách dễ dàng. Bạn cũng có thể nhờ nó đề xuất keyword và alias cho từng component. Trong demo, người trình bày chọn ba component và gõ một yêu cầu bắt đầu bằng "Add a desc…".

4. Style và variable cho mọi giá trị

Xong phần component, video chuyển sang style và variable. Theo video đăng ngày 28/10/2026, khi agent dựng layout bằng system của bạn, nó tìm tới style và variable để quyết định các component được sắp xếp cùng nhau ra sao, và đôi khi để tạo ra những layout hoàn toàn mới.

Vì vậy, hãy đảm bảo mọi màu, mọi giá trị spacing, corner radius và text style trong system đều ánh xạ tới một style hoặc variable, và dùng chúng nhất quán trong các component. Theo video đăng ngày 28/10/2026, nhờ đó agent có thể lấy từ system của bạn khi tạo layout, thay vì tự đưa ra các quyết định design đó từ con số không.

Agent tip #5: nếu bạn chưa có hệ thống variable, theo video đăng ngày 28/10/2026, hãy nhờ agent tạo một hệ thống từ các design bạn đã có. Nó có thể nhận ra những giá trị lặp đi lặp lại và sắp xếp chúng thành variable, tiết kiệm thời gian setup cho bạn.

5. Semantic naming: đặt tên theo việc, không theo vẻ ngoài

Theo video đăng ngày 28/10/2026, semantic naming convention giúp agent hiểu cách dùng variable, component property và variant. Quy tắc chung: chọn tên dựa trên việc một thứ làm, không dựa trên vẻ ngoài của nó.

Ví dụ với variable: bg white mô tả một màu, còn bg primary mô tả mục đích của nó. Hay với variant của component: "black button" và "gray button" cho ít ngữ cảnh hơn "primary button" và "secondary button". Cả hai kiểu đặt tên trỏ tới cùng một giá trị, nhưng theo video đăng ngày 28/10/2026, chỉ kiểu sau mang thông tin về cách dùng, và điều đó giúp agent cho ra kết quả nhất quán hơn.

Theo video đăng ngày 28/10/2026, nhất quán là chìa khoá: chọn convention của bạn và giữ đúng nó.

Agent tip #6: theo video đăng ngày 28/10/2026, Figma agent có thể giúp audit và cải thiện naming convention. Bạn có thể dùng nó để đề xuất naming convention dựa trên system đang có và áp dụng hàng loạt. Nếu bạn đã có hệ thống đặt tên, agent có thể gợi ý cải tiến. Ví dụ, bạn có thể bảo nó đánh dấu mọi cái tên mô tả vẻ ngoài thay vì mục đích, hoặc tìm những chỗ không nhất quán, như chỗ này dùng "muted" còn chỗ khác lại dùng "subtle".

6. Thêm examples và guidelines vào library

Khi phần nền đã vững, bạn có thể thêm lớp hướng dẫn riêng cho agent. Rất có thể team của bạn đã làm ra một số design hoàn chỉnh bằng design system của mình. Theo video đăng ngày 28/10/2026, bạn có thể đưa những ví dụ này vào library file để giúp agent hiểu system của bạn kết hợp lại ra sao để tạo nên những design liền mạch.

Cách làm trong video đăng ngày 28/10/2026: biến mỗi design thành một component, rồi đặt chúng vào một trang tên "examples", hoặc thêm hậu tố _example vào tên từng component. Sau đó publish chúng cùng library, và agent có thể tham chiếu chúng như best practice cho các output về sau.

Guidelines bổ sung thêm chỉ dẫn cho agent vào library của bạn. Bạn có thể đưa vào những thứ như do và don't, các lỗi thường gặp, và những hướng dẫn khác giúp agent xử lý các quyết định còn mơ hồ. Theo video đăng ngày 28/10/2026, khi ai đó dùng agent với library của bạn được đính kèm, agent sẽ tự động tham chiếu guidelines của library đó khi ra quyết định.

7. Skill cho việc lặp lại, và tóm tắt

Theo video đăng ngày 28/10/2026, skill giúp agent xử lý nhất quán các việc lặp đi lặp lại như audit accessibility, chuyển đổi component (component migration) hay design QA. Skill cho agent một quy trình rõ ràng để làm theo, gồm những thứ như các câu hỏi cần hỏi trước khi bắt đầu, quy tắc cho các edge case, và output cuối cùng phải trông như thế nào.

Ví dụ trong video đăng ngày 28/10/2026: giả sử bạn đang deprecate một accordion component cũ để thay bằng một cái mới. Thay vì bảo từng designer trong team làm theo một bộ hướng dẫn viết sẵn để chuyển design của họ, bạn có thể mã hoá những hướng dẫn đó thành một component migration skill mới, để họ chạy nó trên design của mình.

Theo video đăng ngày 28/10/2026, bạn có thể tạo skill bằng cách prompt agent, rồi publish chúng lên tổ chức (org) của bạn để cả team dựa vào. Hoặc tìm những skill dựng sẵn cho design system trên Figma Community.

Tóm lại, video đăng ngày 28/10/2026 đề nghị bắt đầu từ những điều cơ bản, rồi thêm hướng dẫn riêng cho agent. Hãy tiếp tục tinh chỉnh khi bạn học được điều gì hiệu quả, và theo thời gian bạn sẽ có một system giúp cả đồng đội lẫn agent của họ đạt được những design chất lượng.