Design Tokens thu thập mọi biến CSS, màu sắc, ngăn xếp phông chữ, bán kính và bóng mà một trang sử dụng, sắp xếp chúng thành tokens cơ sở, chế độ chủ đề và phạm vi thành phần, đồng thời tải chúng xuống dưới dạng JSON design-token W3C cho Figma hoặc dưới dạng tệp CSS.
Một hệ thống thiết kế hiếm khi được viết ra đầy đủ như khi nó được thực hiện. Bảng màu thực, tỷ lệ khoảng cách và đoạn đường nối loại nằm trong biểu định kiểu — trải rộng trên các thuộc tính tùy chỉnh, ghi đè chủ đề và các giá trị được mã hóa cứng — và xây dựng lại chúng bằng tay từ DevTools có nghĩa là nhấp qua hàng trăm quy tắc và sao chép từng giá trị một.
Công cụ này đọc tất cả chúng cùng một lúc. Nó duyệt mọi biểu định kiểu trên trang, bao gồm cả các biểu định kiểu có nguồn gốc chéo mà bản thân trang không được phép kiểm tra và thu thập mọi thuộc tính tùy chỉnh, cùng với các biến được đặt trong thời gian chạy theo kiểu nội tuyến. Các biến trên:root trở thành tokens cơ sở; các tên tương tự được xác định lại trong bộ chọn chủ đề, chẳng hạn như.dark, [data-theme="dark"] hoặc prefers-color-scheme trở thành các chế độ riêng biệt; các biến được xác định trên các thành phần riêng lẻ được liệt kê dưới dạng phạm vi. Mọi giá trị đều được phân giải thông qua chuỗi var() của nó, do đó bạn sẽ thấy màu thực sự hiển thị chứ không chỉ tham chiếu đến một biến khác.
Mỗi token được phân loại theo giá trị và tên của nó — màu sắc, họ phông chữ, kích thước phông chữ, độ dày, chiều cao dòng, khoảng cách, bán kính, bóng, độ dốc, thời lượng, độ giãn hoặc chỉ mục z — và màu sắc được chuẩn hóa thành hex, bao gồm các định dạng chỉ dành cho kênh mà Tailwind và shadcn sử dụng ( 222 47% 11%) và bộ ba -rgb của Bootstrap. Bên cạnh các biến được khai báo, công cụ còn lấy mẫu các phần tử để báo cáo màu sắc, ngăn xếp phông chữ, kích thước, bán kính và bóng được sử dụng thực sự, cùng với số lượng sử dụng — chính xác là những gì bạn cần trên một trang web chưa bao giờ sử dụng biến.
Xuất chỉ mất một cú nhấp chuột. Download tokens JSON lưu định dạng Design Tokens W3C ( $value và $type), mà plugin Tokens Studio nhập vào Figma và Style Dictionary sẽ biến thành mã cho mọi nền tảng; các chế độ chủ đề và giá trị quan sát được lưu giữ trong các nhóm riêng nên không có gì bị lẫn lộn. Download CSS ghi lại các biến dưới dạng biểu định kiểu, với mỗi chế độ nằm dưới bộ chọn ban đầu.
Các thuộc tính tùy chỉnh từ mọi biểu định kiểu, bao gồm các trang có nguồn gốc chéo mà trang không thể đọc được, cùng với các biến được đặt trong thời gian chạy theo kiểu nội tuyến.
Ghi đè trong.dark, [data-theme] hoặc prefers-color-scheme trở thành các chế độ riêng biệt, hiển thị cạnh nhau với giá trị cơ sở.
Mỗi chuỗi var() đều được phân giải và mỗi token được nhập dưới dạng màu sắc, phông chữ, kích thước, khoảng cách, bán kính, bóng, thời lượng, độ giãn hoặc chỉ mục z.
Hex, rgb, hsl, oklch, màu được đặt tên và các giá trị chỉ dành cho kênh mà Tailwind, shadcn và Bootstrap sử dụng, tất cả đều được chuẩn hóa thành hex.
Màu sắc, ngăn xếp phông chữ, kích thước, trọng lượng, bán kính và bóng được lấy mẫu từ các phần tử được kết xuất, cùng với tần suất mỗi phần tử xuất hiện.
JSON design-token W3C cho Tokens Studio và Style Dictionary hoặc tệp CSS với mọi chế độ trong bộ chọn ban đầu của nó.
Nhập bảng màu thực, gõ và khoảng cách vào Tokens Studio thay vì chọn màu từ ảnh chụp màn hình.
Xem có bao nhiêu màu sắc và kích thước phông chữ mà một trang web thực sự sử dụng và giá trị nào bỏ qua các tokens mà nó xác định.
So sánh từng biến mà chế độ tối ghi đè với giá trị sáng của nó, cạnh nhau và phát hiện những biến không bao giờ bị ghi đè.
Xuất tokens một lần và đưa chúng vào Style Dictionary hoặc cấu hình Tailwind thay vì sao chép giá trị bằng tay.
Kéo hệ thống màu sắc, tỷ lệ loại và bán kính của trang web mà bạn ngưỡng mộ vào một tệp mà bạn có thể làm việc từ đó.
Nhấp vào biểu tượng Design Tokens trong thanh công cụ DevSuite Pro. Quá trình trích xuất diễn ra ngay lập tức và bản tóm tắt sẽ đếm các biến, chế độ, màu sắc và ngăn xếp phông chữ.
Tab Màu sắc hiển thị mọi token màu dưới dạng một mẫu màu, được phân chia để hiển thị từng chế độ chủ đề, theo sau là các màu mà trang hiển thị cùng với số lượng sử dụng.
Kiểu chữ xem trước từng ngăn xếp phông chữ và liệt kê kích thước, trọng lượng, chiều cao dòng và quy tắc @font-face; tab cuối cùng bao gồm khoảng cách, bán kính, bóng và chuyển động.
Tab Biến liệt kê mọi thuộc tính tùy chỉnh với giá trị được tạo và giải quyết. Chuyển đổi giữa cơ sở, từng chế độ chủ đề và các biến trong phạm vi thành phần.
Download tokens JSON cho Figma qua Tokens Studio hoặc Download CSS cho biểu định kiểu. Đánh dấu vào hộp kiểm để bao gồm cả các biến trong phạm vi thành phần.
Cài đặt DevSuite Pro miễn phí và mở khóa hơn 74 công cụ dành cho nhà phát triển cho trình duyệt của bạn.
