Giới thiệu
Trong lĩnh vực phát triển sản phẩm, sự hợp tác giữa các nhà thiết kế và lập trình viên là rất quan trọng. Mục tiêu chung của chúng ta là tạo ra những sản phẩm đồng nhất, có khả năng mở rộng và mang lại trải nghiệm tốt cho người dùng. Tuy nhiên, công cụ mà mỗi bên sử dụng thường không giống nhau. Một câu hỏi thường gặp là: "Nếu Figma Variables cho phép chúng ta quản lý màu sắc, khoảng cách và kiểu chữ trực tiếp trong Figma, thì tại sao chúng ta cần Tokens Studio?"
Câu trả lời ngắn gọn là Figma Variables và Tokens Studio phục vụ những vai trò khác nhau. Chúng không thể thay thế cho nhau, nhưng lại bổ sung cho nhau một cách tuyệt vời khi sử dụng cùng nhau.
Figma Variables: Điểm Mạnh
Figma Variables là công cụ tuyệt vời cho các nhà thiết kế vì chúng đưa các token trực tiếp vào canvas. Chúng có thể được áp dụng cho các thành phần, lớp và nguyên mẫu ngay lập tức, điều này giúp cho công việc hàng ngày trở nên dễ dàng hơn. Ví dụ, nền của một nút có thể được đặt thành color/primary/500 và có thể tái sử dụng ở mọi nơi. Khi giá trị của một biến thay đổi, toàn bộ tệp thiết kế sẽ được cập nhật ngay lập tức, mang lại phản hồi trực quan ngay cho các nhà thiết kế. Figma cũng cho phép xem trước các chế độ khác nhau, như chế độ sáng và tối, mà không cần rời khỏi canvas.
Tóm lại, Figma Variables được tối ưu hóa cho quy trình thiết kế. Chúng làm cho các token trở nên hữu hình, dễ thấy và dễ sử dụng trong thiết kế hàng ngày.
Tokens Studio: Lợi Thế Bổ Sung
Ngược lại, Tokens Studio được thiết kế với tính toàn vẹn của hệ thống và quy trình làm việc của lập trình viên trong tâm trí. Nó cho phép tổ chức các token thành các bộ như core, semantic, components và product, trong khi các chủ đề xác định bộ nào cung cấp các giá trị nguồn và bộ nào phục vụ như mục tiêu để xuất khẩu. Cách tổ chức này giúp duy trì mối quan hệ ngữ nghĩa như:
json
{
"button.background": "{color.blue.500}",
"color.blue.500": "#1D4ED8"
}Một điểm mạnh khác của Tokens Studio là khả năng tham chiếu, tức là một token có thể chỉ tới một token khác thay vì sao chép giá trị. Nếu một màu cơ bản thay đổi, mọi token ngữ nghĩa tham chiếu tới nó sẽ tự động được cập nhật. Các token được lưu trữ ở định dạng JSON, một định dạng mà các đội phát triển có thể sử dụng trên nhiều nền tảng như CSS, JavaScript, v.v. Và vì JSON đó có thể tồn tại trong Git, các token có thể được phiên bản hóa, xem xét trong các yêu cầu pull, triển khai qua các pipeline CI/CD, v.v.
Tóm lại, Tokens Studio được tối ưu hóa cho việc quản lý hệ thống. Nó đảm bảo rằng các quyết định thiết kế của bạn được chuyển giao từ Figma và vào các mã nguồn thực tế.
Tại Sao Không Làm Biến Thành Nguồn?
Điều này nghe có vẻ hấp dẫn. Tôi hiểu cảm giác khi có người hỏi: "Nếu chúng ta có thể cập nhật giá trị ngay trong Figma, tại sao không chỉ kiểm soát hệ thống ở đó và bỏ qua Tokens Studio?"
Điều này có vẻ tự nhiên. Các nhà thiết kế làm việc trong Figma hàng ngày, vậy tại sao không làm cho nó trở thành nguồn duy nhất? Vấn đề là trong khi bạn có thể kỹ thuật chuyển từ Figma Variables trở lại Tokens Studio, đó không phải là nền tảng an toàn cho một hệ thống thiết kế. Các variable làm phẳng dữ liệu, do đó các bộ, chủ đề và tham chiếu sẽ bị mất khi dữ liệu được nhập. Nếu các chỉnh sửa chỉ xảy ra trong Figma, các token phát triển trong JSON và Git sẽ nhanh chóng không còn đồng bộ với nhau. Và việc nhập từ Figma vào Tokens Studio thường đến theo dạng hàng loạt, với ít sự rõ ràng về lý do tại sao điều gì đó thay đổi, điều này làm cho việc xem xét trở nên khó khăn.
Việc đồng bộ ngược có thể giúp khởi động hoặc ghi lại các chỉnh sửa khẩn cấp, nhưng đó không phải là quy trình làm việc bền vững trong dài hạn. KHÔNG BAO GIỜ.
Tại Sao Chúng Không Thể Thay Thế Cho Nhau
Figma Variables rất tuyệt cho việc sử dụng các token trực tiếp trong công việc thiết kế, nhưng Tokens Studio là thiết yếu cho việc quản lý các token như một hệ thống ghi chép. Nếu một nhóm chỉ dựa vào Variables, nó sẽ mất đi các ánh xạ ngữ nghĩa, logic chủ đề, khả năng chuyển đổi sang mã và phiên bản hóa. Nếu một nhóm chỉ dựa vào Tokens Studio mà không có Variables, các nhà thiết kế sẽ mất đi tính tức thì của việc làm việc trực tiếp trên canvas.
Quy trình làm việc lành mạnh nhất là dòng chảy về phía trước theo mặc định, với dòng chảy ngược chỉ dành cho các ngoại lệ.
Quy Trình Thực Tế
Quy trình bắt đầu từ Tokens Studio, nơi các nhà thiết kế và lập trình viên hợp tác về các định nghĩa token. Các token được tổ chức, tham chiếu và xuất khẩu dưới dạng JSON. Từ đó, chúng được xuất khẩu vào Figma Variables, nơi chúng có thể được sử dụng ngay lập tức trong canvas. Các nhà thiết kế áp dụng chúng vào các thành phần và bố cục và thấy ngay kết quả khi giá trị thay đổi.
Điều quan trọng là Figma Variables nên được sử dụng, không nên chỉnh sửa. Chúng là đầu ra của hệ thống, không phải là nơi mà hệ thống được duy trì. Nếu một giá trị màu sắc, tỷ lệ kiểu chữ hoặc giá trị khoảng cách cần thay đổi, thì sự thay đổi đó nên được thực hiện trong Tokens Studio và sau đó được xuất khẩu lại. Điều này giữ cho hệ thống thiết kế ổn định, tránh tình trạng lệch giữa thiết kế và mã, và đảm bảo rằng mỗi token có cấu trúc và tham chiếu đúng đắn.
Việc điều chỉnh khám phá bên trong Variables có thể có vẻ hấp dẫn, nhưng chúng tạo ra sự không nhất quán và các tham chiếu bị hỏng nếu chúng không được chuyển về Tokens Studio. Một mẫu hành vi lành mạnh hơn là các nhà thiết kế nên đưa ra những yêu cầu đó, "thế nếu màu xanh này nhạt hơn thì sao?", và để sự thay đổi được xem xét và áp dụng ở nguồn, để nó được bảo tồn ở mọi nơi.
Trong mô hình này, các nhà thiết kế duy trì quy trình, các lập trình viên duy trì sự ổn định của hệ thống, và sản phẩm vẫn nhất quán giữa thiết kế và mã mà không khuyến khích các nguồn thông tin song song.
Ví Dụ: Nền Nút
Trong Tokens Studio, nền của một nút có thể được định nghĩa là:
json
{
"button.background": "{color.blue.500}",
"color.blue.500": "#1D4ED8"
}Khi được xuất khẩu, Figma nhận được một bộ biến gọi là product. Bên trong đó, color.blue.500 được định nghĩa là #1D4ED8, trong khi button.background là một bí danh chỉ về color.blue.500.
Một nhà thiết kế trong Figma áp dụng button.background cho một thành phần, thấy đúng màu sắc, và có thể chuyển chế độ nếu cần. Nếu giá trị của button.background thực sự cần thay đổi, yêu cầu đó nên quay trở lại Tokens Studio để cập nhật được áp dụng tại nguồn và xuất khẩu lại. Bằng cách đó, sự thay đổi sẽ được chuyển giao đến cả thiết kế và phát triển mà không làm phá vỡ tính nhất quán.
Kết Luận
Figma Variables và Tokens Studio không phải là những công cụ cạnh tranh. Chúng là bổ sung cho nhau. Variables giúp các token trở nên dễ sử dụng và tức thì cho các nhà thiết kế, trong khi Tokens Studio làm cho chúng có cấu trúc, có thể chuyển đổi và đáng tin cậy giữa các nhóm và nền tảng.
Có, bạn có thể kỹ thuật chạy dòng chảy ngược bằng cách nhập Variables vào Tokens Studio, nhưng điều đó nên chỉ là ngoại lệ, không phải là quy tắc. Tokens Studio là nguồn thông tin đáng tin cậy, trong khi Figma Variables là đầu ra thân thiện với canvas.
Khi cả hai công cụ được tôn trọng vì những gì chúng làm tốt nhất, các nhà thiết kế cảm thấy tự tin khi làm việc với các token thực sự, các lập trình viên có thể tin tưởng rằng các token là nhất quán và đã được phiên bản hóa, và các sản phẩm hưởng lợi từ một hệ thống duy nhất vẫn được đồng bộ từ thiết kế đến sản xuất. Các hệ thống thiết kế khỏe mạnh không phát triển bằng cách phân tán quyền sở hữu khắp nơi, mà bằng cách giữ Tokens Studio như hệ thống ghi chép và coi Variables là đầu ra thực tiễn, dễ tiêu thụ. Vậy câu hỏi thực sự là: chúng ta có đang sử dụng mỗi công cụ cho những gì nó làm tốt nhất không?
Các Thực Hành Tốt Nhất
- Sử dụng Tokens Studio như là nguồn thông tin chính: Đảm bảo mọi thay đổi đều được thực hiện tại đây để duy trì tính nhất quán.
- Chỉ sử dụng Figma Variables để áp dụng: Tránh chỉnh sửa trực tiếp trong Figma để không làm mất đi cấu trúc của hệ thống.
Những Cạm Bẫy Thường Gặp
- Cập nhật trực tiếp trong Figma: Điều này có thể dẫn đến sự không đồng bộ giữa thiết kế và mã.
- Không tổ chức các token: Thiếu tổ chức có thể gây khó khăn trong việc quản lý và sử dụng các token.
Mẹo Hiệu Suất
- Sử dụng JSON một cách hiệu quả: Đảm bảo rằng các token được lưu trữ và quản lý tốt trong định dạng JSON.
- Xem xét sử dụng CI/CD: Để tự động hóa quy trình xuất khẩu và cập nhật giữa Figma và Tokens Studio.
FAQ
- Figma Variables có thể thay thế Tokens Studio không?
Không, chúng phục vụ các mục đích khác nhau và nên được sử dụng cùng nhau. - Tại sao chúng ta cần cả hai công cụ này?
Chúng bổ sung cho nhau, giúp tối ưu hóa quy trình làm việc giữa thiết kế và phát triển.
Kết luận
Nắm vững cách sử dụng Figma Variables và Tokens Studio trong quy trình thiết kế sẽ giúp nâng cao hiệu quả làm việc giữa các nhà thiết kế và lập trình viên. Đừng ngần ngại khám phá và áp dụng những công cụ này để tối ưu hóa quy trình phát triển sản phẩm của bạn.
