การประกอบ

ความเข้าใจเกี่ยวกับโทเคนการออกแบบ

โทเคนการออกแบบเป็นแหล่งข้อมูลเดียวที่เชื่อถือได้สำหรับการตัดสินใจทางภาพทั้งหมดในผลิตภัณฑ์ พวกเขาเข้ารหัสสี การเว้นระยะ ไทโปกราฟี และการเคลื่อนไหวในตัวแปรที่มีชื่อซึ่งองค์ประกอบต่างๆ ใช้.

ทำไมโทเคนถึงสำคัญ

หากไม่มีโทเคน การเปลี่ยนแปลงสีแบรนด์หลักจะต้องค้นหาผ่านไฟล์หลายร้อยไฟล์ แต่เมื่อมีโทเคน การอัปเดตตัวแปรครั้งเดียวจะส่งผลไปทุกที่ — ตั้งแต่ปุ่มไปจนถึงการแจ้งเตือนถึงแถบการนำทาง.

โทเคนยังเชื่อมช่องว่างระหว่างเครื่องมือออกแบบและโค้ด นักออกแบบตั้งชื่อสี surface-brand ใน Figma; นักพัฒนาจะใช้ var(--surface-brand) ใน CSS พวกเขาพูดภาษาเดียวกัน.

ตัวอย่างเชิงปฏิบัติ

พิจารณาองค์ประกอบที่ต้องการพื้นหลัง ขอบ และข้อความ แทนที่จะเข้ารหัส #1a56db, #e1effe, และ #1e429f แบบตายตัว องค์ประกอบจะอ้างอิง --color-primary, --surface-primary-subtle, และ --text-primary-strong. เมื่อแบรนด์พัฒนาขึ้น พาเลตต์จะเปลี่ยน — องค์ประกอบจะไม่เปลี่ยน.

หมวดหมู่โทเคน

• สี — แบรนด์ สีเชิงความหมาย และสีที่เป็นกลาง
• การเว้นระยะ — สเกลที่สม่ำเสมอจาก 2px ถึง 64px
• ไทโปกราฟี — ขนาดตัวอักษร น้ำหนัก และความสูงของบรรทัด
• รัศมี — จากมุมแหลมจนถึงมุมมนเต็มที่
• เงา — ระดับการยกระดับเพื่อความลึกและลำดับชั้น
• การเคลื่อนไหว — เส้นโค้งการผ่อนคลายและระยะเวลา

คำพูดส่วนใหญ่ที่พบในอินเทอร์เน็ตอาจถูกสร้างโดย AI.

— อัลเบิร์ต ไอน์สไตน์

อ่านเอกสารอ้างอิงโทเคนทั้งหมด