Specify là gì

Specify là một pipeline design token giúp tự động hóa việc đồng bộ hóa các quyết định thiết kế trong toàn bộ vòng đời phát triển sản phẩm. Khác với quy trình bàn giao thủ công truyền thống, Specify đóng vai trò là nguồn sự thật duy nhất (single source of truth), trích xuất design token từ Figma và tự động phân phối chúng dưới dạng mã nguồn dành riêng cho từng nền tảng (CSS, SCSS, Tailwind, Android, iOS) vào các kho lưu trữ của bạn. Bằng cách xử lý thiết kế như dữ liệu, công cụ này loại bỏ các cập nhật thủ công, giảm thiểu lỗi con người trong quá trình triển khai và đảm bảo các thay đổi trong hệ thống thiết kế được lan truyền tức thì trên tất cả các codebase thông qua các pull request tự động.

Các tính năng chính của Specify

Đồng bộ hóa Figma-to-Code

Specify thu hẹp khoảng cách giữa thiết kế và phát triển bằng cách phân tích các kiểu dáng Figma thành các token JSON có cấu trúc. Nó hỗ trợ các kiểu dữ liệu phức tạp bao gồm màu sắc, kiểu chữ, khoảng cách và đổ bóng. Bằng cách tự động hóa quy trình chuyển đổi, nó đảm bảo các lập trình viên luôn làm việc với các cập nhật hệ thống thiết kế mới nhất, ngăn chặn tình trạng 'lệch pha' xảy ra khi nhà thiết kế cập nhật Figma nhưng lập trình viên vẫn sử dụng các giá trị hardcode cũ.

Phân phối Token đa nền tảng

Công cụ hỗ trợ nhiều định dạng đầu ra bao gồm biến CSS, SCSS, Style Dictionary, cấu hình Tailwind và các định dạng gốc của Android/iOS. Điều này cho phép một nguồn thiết kế duy nhất cung cấp sức mạnh cho hệ sinh thái đa nền tảng. Bằng cách sử dụng một pipeline thống nhất, các nhóm đảm bảo rằng một bản cập nhật màu thương hiệu chính trong Figma sẽ được chuyển đổi chính xác thành mã hex cho web và tham chiếu tài nguyên cho di động cùng một lúc.

Tự động hóa Pull Request

Specify tích hợp trực tiếp với GitHub, GitLab và Bitbucket để mở các pull request tự động bất cứ khi nào design token thay đổi. Quy trình này cho phép các lập trình viên xem xét các thay đổi thiết kế dưới dạng code diff trước khi hợp nhất. Nó biến các cập nhật thiết kế thành các đóng góp mã nguồn tiêu chuẩn, duy trì dấu vết kiểm toán rõ ràng và đảm bảo các thay đổi hệ thống thiết kế tuân thủ các cổng chất lượng CI/CD giống như logic ứng dụng.

Quản trị Token tập trung

Specify cung cấp bảng điều khiển tập trung để quản lý, tạo phiên bản và tài liệu hóa các design token. Nó đóng vai trò là nguồn sự thật duy nhất, ngăn chặn việc trùng lặp các biến thiết kế trên các kho lưu trữ khác nhau. Các nhóm có thể xác định quy ước đặt tên và phân cấp, đảm bảo các token luôn nhất quán và có khả năng mở rộng khi hệ thống thiết kế phát triển từ một sản phẩm đơn lẻ thành kiến trúc đa thương hiệu, đa nền tảng.

Pipeline chuyển đổi tùy chỉnh

Người dùng có thể xác định các quy tắc chuyển đổi tùy chỉnh để sửa đổi dữ liệu token trong quá trình đồng bộ hóa. Điều này rất quan trọng đối với các nhóm có yêu cầu đặt tên cụ thể hoặc nhu cầu kiến trúc độc đáo. Bằng cách sử dụng các trình phân tích và định dạng tùy chỉnh, các lập trình viên có thể chuyển đổi dữ liệu Figma thô thành cấu trúc chính xác theo yêu cầu của khung hệ thống thiết kế cụ thể của họ, mang lại sự linh hoạt tối đa mà không làm mất đi lợi ích của tự động hóa.

Cách sử dụng Specify

Tạo workspace Specify và kết nối tệp Figma của bạn thông qua tích hợp OAuth., 2. Xác định các design token trong Figma bằng plugin Specify để cấu trúc dữ liệu của bạn., 3. Cấu hình tệp 'Specify.json' trong kho lưu trữ của bạn để xác định định dạng đầu ra và đường dẫn đích., 4. Cài đặt Specify CLI qua npm hoặc sử dụng GitHub App để tự động hóa việc đồng bộ hóa., 5. Chạy lệnh 'specify pull' để lấy các token mới nhất và tạo các tệp mã nguồn sẵn sàng cho nền tảng., 6. Hợp nhất (merge) pull request được tạo tự động để cập nhật các kiểu dáng cho ứng dụng của bạn.

Các trường hợp sử dụng của Specify

Tính nhất quán thiết kế đa nền tảng

Một công ty có các ứng dụng web, iOS và Android sử dụng Specify để đảm bảo màu sắc thương hiệu và kiểu chữ giống hệt nhau trên tất cả các nền tảng. Khi nhóm thiết kế cập nhật một token khoảng cách trong Figma, Specify sẽ đẩy thay đổi đó đến cả ba codebase, đảm bảo sự đồng nhất về hình ảnh mà không cần sự can thiệp thủ công của lập trình viên.

Bảo trì hệ thống thiết kế tự động

Các nhóm hệ thống thiết kế sử dụng Specify để loại bỏ công việc thủ công khi cập nhật các biến CSS. Bằng cách tự động hóa pipeline, họ giảm thời gian dành cho việc bàn giao từ thiết kế sang mã nguồn lên đến 80%, cho phép các lập trình viên tập trung vào phát triển tính năng thay vì cập nhật các hằng số kiểu dáng.

Kiến trúc đa thương hiệu

Các agency quản lý nhiều thương hiệu khách hàng sử dụng Specify để duy trì các bộ token riêng biệt cho từng thương hiệu. Họ có thể chuyển đổi giữa các cấu hình thương hiệu trong CLI, đảm bảo rằng các design token chính xác được đưa vào quy trình xây dựng cho từng dự án khách hàng cụ thể.

Ai sẽ được lợi từ Specify

Kỹ sư hệ thống thiết kế

Họ cần duy trì các hệ thống thiết kế có khả năng mở rộng và nhất quán trên các codebase lớn. Specify tự động hóa công việc phân phối token tẻ nhạt, cho phép họ tập trung vào kiến trúc thay vì cập nhật kiểu dáng thủ công.

Lập trình viên Frontend

Họ gặp khó khăn trong việc giữ các biến CSS/Tailwind đồng bộ với Figma. Specify cung cấp cho họ một nguồn sự thật đáng tin cậy, tự động và tích hợp trực tiếp vào quy trình làm việc dựa trên Git hiện có của họ.

Nhà thiết kế sản phẩm

Họ muốn tầm nhìn thiết kế của mình được triển khai chính xác mà không cần phải trao đổi qua lại liên tục với bộ phận kỹ thuật. Specify đảm bảo rằng các design token của họ được chuyển đổi chính xác thành mã nguồn mỗi lần thực hiện.

Specify