Design Tokens รวบรวมตัวแปร CSS สี สแต็คฟอนต์ รัศมี และเงาทั้งหมดที่เพจใช้ จัดเรียงเป็น tokens พื้นฐาน โหมดธีม และขอบเขตส่วนประกอบ และดาวน์โหลดเป็น JSON design-token W3C สำหรับ Figma หรือเป็นไฟล์ CSS
ระบบการออกแบบไม่ค่อยถูกเขียนลงไปอย่างสมบูรณ์เมื่อมีการนำไปใช้งาน จานสีจริง สเกลระยะห่าง และทางลาดประเภทแสดงอยู่ในสไตล์ชีต — กระจายไปทั่วคุณสมบัติที่กำหนดเอง การแทนที่ธีม และค่าฮาร์ดโค้ด — และการสร้างใหม่ด้วยมือจาก DevTools หมายถึงการคลิกผ่านกฎหลายร้อยกฎและคัดลอกค่าทีละค่า
เครื่องมือนี้จะอ่านข้อมูลทั้งหมดพร้อมกัน โดยจะเดินทุกสไตล์ชีทบนเพจ รวมถึงสไตล์ข้ามต้นทางที่เพจไม่ได้รับอนุญาตให้ตรวจสอบ และรวบรวมคุณสมบัติที่กำหนดเองทุกรายการ รวมถึงตัวแปรที่ตั้งค่าขณะรันไทม์ในรูปแบบอินไลน์ ตัวแปรบน:root กลายเป็น tokens ฐาน; ชื่อเดียวกันที่ถูกกำหนดใหม่ภายใต้ตัวเลือกธีม เช่น.dark, [data-theme="dark"] หรือ prefers-color-scheme จะกลายเป็นโหมดที่แยกจากกัน ตัวแปรที่กำหนดในแต่ละองค์ประกอบจะแสดงรายการตามขอบเขต ทุกค่าได้รับการแก้ไขผ่านห่วงโซ่ var() ดังนั้นคุณจึงเห็นสีที่แสดงผลจริง ไม่ใช่แค่การอ้างอิงถึงตัวแปรอื่น
token แต่ละรายการจะถูกจัดประเภทตามค่าและชื่อ — สี, ตระกูลแบบอักษร, ขนาดแบบอักษร, น้ำหนัก, ความสูงของบรรทัด, ระยะห่าง, รัศมี, เงา, การไล่ระดับสี, ระยะเวลา, การค่อยๆ เปลี่ยนหรือดัชนี z — และสีจะถูกทำให้เป็นมาตรฐานให้เป็นเลขฐานสิบหก รวมถึงรูปแบบเฉพาะช่องเท่านั้น Tailwind และการใช้ shadcn ( 222 47% 11%) และ Bootstrap 's -rgb triplets นอกจากตัวแปรที่ประกาศแล้ว เครื่องมือยังแสดงตัวอย่างองค์ประกอบเพื่อรายงานสี กลุ่มแบบอักษร ขนาด รัศมี และเงาที่ใช้จริงพร้อมจำนวนการใช้งาน ซึ่งเป็นสิ่งที่คุณต้องการบนไซต์ที่ไม่เคยใช้ตัวแปรเลย
ส่งออกได้ในคลิกเดียว Download tokens JSON บันทึกรูปแบบ W3C Design Tokens ( $value และ $type) ซึ่งปลั๊กอิน Tokens Studio นำเข้าไปยัง Figma และ Style Dictionary เปลี่ยนเป็นโค้ดสำหรับแพลตฟอร์มใดๆ โหมดธีมและค่าที่สังเกตได้จะถูกเก็บไว้ในกลุ่มของตัวเอง ดังนั้นจึงไม่มีอะไรปะปนกัน Download CSS จะเขียนตัวแปรกลับออกมาเป็นสไตล์ชีต โดยแต่ละโหมดจะอยู่ภายใต้ตัวเลือกดั้งเดิม
คุณสมบัติที่กำหนดเองจากทุกสไตล์ชีต รวมถึงแผ่นงานข้ามต้นทางที่เพจไม่สามารถอ่านได้ รวมถึงตัวแปรที่ตั้งค่าขณะรันไทม์ในรูปแบบอินไลน์
การแทนที่ภายใต้.dark, [data-theme] หรือ prefers-color-scheme จะกลายเป็นโหมดที่แยกจากกัน ซึ่งแสดงเคียงข้างกันด้วยค่าฐาน
ทุกห่วงโซ่ var() ได้รับการแก้ไข และแต่ละ token จะถูกพิมพ์เป็นสี แบบอักษร ขนาด ระยะห่าง รัศมี เงา ระยะเวลา การค่อยๆ เปลี่ยน หรือดัชนี z
Hex, rgb, hsl, oklch, สีที่มีชื่อและค่าเฉพาะช่องสัญญาณเท่านั้น การใช้ Tailwind, shadcn และ Bootstrap ทั้งหมดนี้ทำให้เป็นมาตรฐานเป็นเลขฐานสิบหก
สี สแต็คแบบอักษร ขนาด น้ำหนัก รัศมี และเงาที่สุ่มตัวอย่างจากองค์ประกอบที่เรนเดอร์ พร้อมความถี่ที่แต่ละองค์ประกอบจะปรากฏ
JSON design-token W3C สำหรับ Tokens Studio และ Style Dictionary หรือไฟล์ CSS พร้อมทุกโหมดภายใต้ตัวเลือกดั้งเดิม
นำเข้าจานสีจริง พิมพ์ และเว้นวรรคลงใน Tokens Studio แทนที่จะเลือกสีจากภาพหน้าจอ
ดูจำนวนสีและขนาดแบบอักษรที่ไซต์ใช้จริง และค่าใดที่เลี่ยง tokens ที่ไซต์กำหนด
เปรียบเทียบทุกตัวแปรที่โหมดมืดแทนที่ด้วยค่าแสง เคียงข้างกัน และมองเห็นตัวแปรที่ไม่เคยถูกแทนที่
ส่งออก tokens เพียงครั้งเดียวและป้อนลงใน Style Dictionary หรือการกำหนดค่า Tailwind แทนที่จะคัดลอกค่าด้วยตนเอง
ดึงระบบสี ขนาดประเภท และรัศมีของไซต์ที่คุณชื่นชมมาไว้ในไฟล์ที่คุณสามารถใช้งานได้
คลิกไอคอน Design Tokens ใน Dock DevSuite Pro การแตกข้อมูลจะดำเนินการทันที และข้อมูลสรุปจะนับตัวแปร โหมด สี และสแต็คแบบอักษร
แท็บสีจะแสดง token ทุกสีเป็นตัวอย่าง โดยแยกเพื่อแสดงโหมดธีมแต่ละโหมด ตามด้วยสีที่เพจแสดงผล พร้อมจำนวนการใช้งาน
การพิมพ์จะแสดงตัวอย่างแต่ละสแต็คแบบอักษรและรายการขนาด น้ำหนัก ความสูงของบรรทัด และกฎ @font-face แท็บสุดท้ายครอบคลุมถึงระยะห่าง รัศมี เงา และการเคลื่อนไหว
แท็บตัวแปรจะแสดงรายการคุณสมบัติแบบกำหนดเองทั้งหมดพร้อมค่าที่เขียนและแก้ไขแล้ว สลับระหว่างฐาน แต่ละโหมดธีม และตัวแปรที่กำหนดขอบเขตคอมโพเนนต์
Download tokens JSON สำหรับ Figma ผ่าน Tokens Studio หรือ Download CSS สำหรับสไตล์ชีต เลือกช่องทำเครื่องหมายเพื่อรวมตัวแปรที่กำหนดขอบเขตคอมโพเนนต์ด้วย
ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 74 รายการสำหรับเบราว์เซอร์ของคุณ
