ทริคDesign
Design Token
Design token เปลี่ยนการตัดสินใจเรื่องแบรนด์ให้เป็นตัวแปรที่นำกลับมาใช้ซ้ำได้ ทั้งในโค้ด รายงาน และไฟล์ออกแบบ.
เริ่มอ่านตรงนี้ก่อน
อธิบายแบบง่าย
Design Token คือเรื่องที่ช่วยให้เราใช้ทำหน้าจอให้อ่านง่าย ใช้ง่าย และไม่สับสนได้ถูกทางขึ้น
ระดับ
เหมาะกับคนที่เริ่มลงมือทำแล้ว
ใช้เมื่อไหร่
ตอนคุณต้องการตัวแปร CSS หรือไฟล์ธีมแบบ JSON
อ่านแล้วทำอะไรต่อ
ส่งออกบทบาทของสีที่อนุมัติแล้วเป็น JSON เพื่อใช้กับธีมเว็บ เอกสาร และส่งต่อให้แอป
เห็นภาพ: ทริคนี้เป็นยังไง
ฝังค่าตรงๆ
color: #5E8A00;
border: #5E8A00;
/* แก้ทีต้องไล่ทุกไฟล์ */ใช้ token
--primary: 82 100% 27%;
color: hsl(var(--primary));
/* แก้ที่เดียว */ใช้ตอนไหน?
- ตอนคุณต้องการตัวแปร CSS หรือไฟล์ธีมแบบ JSON
- ตอนคุณอยากใช้ชุดสีเดียวกันทั้งในเอกสารและในแอป
- ตอนคุณส่งกฎเรื่องสไตล์ต่อให้คนทำอีกคน
ความหมาย
design token (ค่าตั้งต้นของดีไซน์) คือค่าที่มีชื่อกำกับ เช่น สี ความมนของมุม ฟอนต์ หรือระยะห่าง ที่ส่งออกไปใช้ซ้ำได้ในเครื่องมือหลาย ๆ ตัว
การส่งออก token
ตั้งชื่อให้คงที่ไม่เปลี่ยนไปมา แล้วจับคู่ token เข้ากับแต่ละแพลตฟอร์ม
{
"color.primary": "#4F46E5",
"color.foreground": "#0F172A"
}ตัวอย่างการใช้
ไฟล์ token เริ่มต้น
ส่งออกบทบาทของสีที่อนุมัติแล้วเป็น JSON เพื่อใช้กับธีมเว็บ เอกสาร และส่งต่อให้แอป