ไอคอนสามารถใช้เป็นโทเค็นการออกแบบได้อย่างไร

แม้ว่าพวกเขาจะได้รับความสนใจน้อยลงเมื่อพูดถึงโทเค็นการออกแบบ แต่โทเค็นไอคอนก็มีประสิทธิภาพมาก

เช่นเดียวกับโทเค็นประเภทอื่นๆ โทเค็นไอคอนต้องอยู่ในระดับ 1 และระดับ 2 โดยที่ระดับ 3เป็นตัวเลือก

มีประโยชน์หลักอย่างน้อย 2 ประการที่ควรกล่าวถึงเมื่อพูดถึงโทเค็นไอคอน:

1. ความคิดที่เข้มงวดมากขึ้นในบทบาทของทุกไอคอน
2. ชุดไอคอนที่มีโครงสร้าง ปรับขนาดได้ และบำรุงรักษาได้มากขึ้น

ลองจินตนาการว่าเราเลือกไอคอนเหล่านี้สำหรับผลิตภัณฑ์ที่เรากำลังพัฒนาอยู่

คุณจะตั้งชื่อพวกเขาว่าอย่างไร?

ฉันเดาว่าอย่างน้อยพวกคุณบางคนก็เลือกความหมาย/บทบาท/หน้าที่ของพวกเขา ดังนั้น: หน้าแรก รายการโปรด/ถูกใจ ถังขยะ แก้ไข และการแจ้งเตือน

แม้ว่าสิ่งนี้จะไม่ผิดเลย แต่ก็ไม่ใช่วิธีโทเค็นในการทำ

มาดูระดับที่หนึ่งและสองของโทเค็นการออกแบบ:

1. โทเค็นอ้างอิง

เลือกอาวุธของคุณก่อน สัตว์ประหลาดมาทีหลัง

นี่คือที่ที่เรากำหนดตัวเลือกของเรา เช่น:

• ฉันเลือกสีแดงนี้ #ff0044 และจะเรียกว่า “color.chills”
• ฉันเลือก Comic Sans และจะเรียกมันว่า "font.lovely"

• ฉันเลือกบ้านหลังนี้และฉันจะเรียกมันว่า “icon.100”

• ฉันเลือกบ้านหลังนี้และฉันจะเรียกมันว่า “icon.house”

อย่างที่คุณเห็น มีสอง "โรงเรียน*" สำหรับตั้งชื่อโทเค็นอ้างอิงบางอย่าง เช่น สีหรือไอคอน

*อันที่จริงไม่มีโรงเรียนแบบนี้ ฉันแค่อยากจะอธิบายสองวิธีที่ฉันมักจะใช้ในการตั้งชื่อไอคอนอ้างอิง

โรงเรียน " ความหมาย" :

• ฉันเลือกบ้านหลังนี้และฉันจะเรียกมันว่า “icon.house”
• ฉันเลือกหัวใจดวงนี้และฉันจะเรียกมันว่า “icon.heart”
• ฉันเลือกถังขยะใบนี้ และฉันจะเรียกมันว่า “icon.trash-can”
• ฉันเลือกดินสอนี้และฉันจะเรียกมันว่า "icon.pencil"
• ฉันเลือกระฆังนี้และฉันจะเรียกมันว่า “icon.bell”

• ฉันเลือกบ้านหลังนี้และฉันจะเรียกมันว่า “icon.100”
• ฉันเลือกหัวใจดวงนี้และฉันจะเรียกมันว่า “icon.120”
• ฉันเลือกถังขยะนี้และฉันจะเรียกมันว่า “icon.155”
• ฉันเลือกดินสอแท่งนี้และฉันจะเรียกมันว่า “icon.156”
• ฉันเลือกระฆังนี้และฉันจะเรียกมันว่า “icon.172”

ข้อดีและข้อเสีย

หาก " ไม่เชื่อเรื่องพระเจ้า " เป็นนามธรรมเกินกว่าจะสื่อสารและจดจำได้ " ความหมาย " จะไปขัดแย้งกับหลักไม่เชื่อเรื่องพระเจ้าของโทเค็นอ้างอิง (หรือที่เรียกว่าโทเค็นพื้นฐาน ดั้งเดิม โทเค็นสากล)

โทเค็นอ้างอิงมักจะมีชื่อว่า “font-weight.100” หรือ “space.400” การตั้งชื่อสีและไอคอน “color.blue” และ “icon.house” จะไม่เข้ากับอนุกรมวิธานใช่หรือไม่

ในขณะที่ “icon.100” ช่วยให้ฉันใส่ไอคอนอะไรก็ได้เข้าไปข้างใน แต่ “icon.house” นั้นใช้งานง่ายกว่า 1,000 เท่า ถึงกระนั้น ฉันชอบที่จะใช้ตัวเลือกแรก " ผู้ไม่เชื่อเรื่องพระเจ้า " นี่คือเหตุผล:

ฉันต้องการให้โทเค็นอ้างอิงเป็นกล่องเปล่า สิ่งที่ฉันใส่เข้าไปข้างในไม่ควรทำให้เป็นรูปร่างของกล่อง ถ้าฉันใส่ไอคอนหัวใจลงในกล่องเหล่านี้หนึ่งช่องเหล่านี้ ฉันอยากจะเปลี่ยนให้เป็นดาวในวันพรุ่งนี้โดยไม่มีความขัดแย้งในการตั้งชื่อ

“ความหมาย” จะเริ่มที่โทเค็นระดับที่สองคือ “โทเค็นระบบ”

2. โทเค็นระบบ

นี่คือสิ่งที่น่าสนใจมากขึ้น: การตัดสินใจ

โดยการตัดสินใจ ฉันหมายถึง:

• ฉันตัดสินใจที่จะใช้ “ rt.icon.house ” หรือ “ rt.icon.100 ” (rt = โทเค็นอ้างอิง) เป็นไอคอนของฉันสำหรับHomeดังนั้น “ st.icon.home ” (st = โทเค็นระบบ)
• ฉันตัดสินใจใช้ “ rt.icon.heart ” หรือ “ rt.icon.120 ” เป็นไอคอนสำหรับรายการโปรดดังนั้นเป็น “ st.icon.favorite ”
• ฉันตัดสินใจที่จะใช้ “ rt.icon.trash-can ” หรือ “ rt.icon.155 ” เป็นไอคอนสำหรับการลบดังนั้นฉันจึงใช้ “ st.icon.delete ”
• ฉันตัดสินใจใช้ “ rt.icon.pencil ” หรือ “ rt.icon.156 ” เป็นไอคอนสำหรับEditดังนั้นฉันจึงใช้ “ st.icon.edit ”
• ฉันตัดสินใจที่จะใช้ “ rt.icon.bell ” หรือ “ rt.icon.182 ” เป็นไอคอนของฉันสำหรับการแจ้งเตือนดังนั้นเป็น “ st.icon.notifications ”

มีโอกาสที่สิ่งที่คุณจะใช้เพื่อแจ้งให้นักพัฒนาหรือนักออกแบบรายอื่นทราบจะเป็นโทเค็นระบบ การตัดสินใจ: "เฮ้ จอห์น โปรดใช้ st.icon.close สำหรับโมดอล"

1. คิดอย่างเข้มงวดมากขึ้นในบทบาทของทุกไอคอน

ตอนนี้ กลับไปที่ประโยชน์หลักสองประการของฉัน และหลังจากแบบฝึกหัดเล็กๆ น้อยๆ นี้ คุณจะเห็นว่าการเลือกและการกำหนดไอคอนนั้นผ่านกระบวนการที่แม่นยำและพิถีพิถันเป็นพิเศษ

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

2. ชุดไอคอนที่มีโครงสร้าง ปรับขนาดได้ และบำรุงรักษาได้มากขึ้น

เพื่ออธิบายถึงประโยชน์นี้ ลองนึกถึงสถานการณ์ที่เกิดซ้ำบางสถานการณ์:

ปัญหาที่ 1:คุณไม่ชอบไอคอนกากบาทและต้องการแทนที่ด้วยไอคอนที่บางกว่า

วิธีแก้ไข:คุณเปิดโทเค็นอ้างอิงและแทนที่/ปรับรูปร่างภายใน

ผลลัพธ์: โทเค็นระบบทั้งหมดที่ชี้ไปที่โทเค็นอ้างอิงนั้นจะได้รับการอัปเดต ได้แก่:

• ลบ (สำหรับการดำเนินการลบองค์ประกอบ)
• ลบ (สำหรับการดำเนินการลบองค์ประกอบ)
• ปิด (สำหรับการดำเนินการปิดองค์ประกอบ)
• ข้อผิดพลาด (พร้อมกับข้อความแสดงข้อผิดพลาด)

วิธีแก้ไข:คุณสร้างโทเค็นอ้างอิงใหม่ “ icon.trash ” จากนั้นอัปเดตโทเค็นระบบ “ icon.delete ” เพื่อกำหนดเป้าหมายเป็น“icon.trash”ใหม่ สิ่งนี้จะทำให้Remove, Close และ Errorยังคงอยู่

ผลลัพธ์ 1:คอมโพเนนต์ใดๆ ที่ใช้ “ icon.delete ” จะแสดงถังขยะ

อย่างที่คุณเห็น ความยืดหยุ่นที่เป็นไปได้ทั้งหมดนี้จะมีประโยชน์ในบางจุด ในทางกลับกัน ต้นทุนของงานล่วงหน้านั้นไม่มีนัยสำคัญ

สรุป…

คุณสามารถเปลี่ยน rt.icon หนึ่งรายการและส่งผลต่อโทเค็นระบบและคอมโพเนนต์ทั้งหมดที่กำหนดเป้าหมายไปที่ไอคอนนั้น เช่นฉันเปลี่ยนไอคอนหัวใจเป็นดาว

คุณสามารถเปลี่ยน st.icon หนึ่งอันและส่งผลต่อโทเค็นส่วนประกอบทั้งหมดที่กำหนดเป้าหมายองค์ประกอบความหมายนั้น เช่นตอนนี้ "รายการโปรด" แทนด้วยดาว ในขณะที่หัวใจใช้สำหรับ "ชอบ"

คุณสามารถเปลี่ยน ct.icon หนึ่งรายการและมีผลกับส่วนประกอบเฉพาะเจาะจงเท่านั้น เช่นส่วนประกอบของการ์ด ในโหมดมืด จะใช้ดาวเต็มดวงแทนดาวที่อยู่ในกรอบ ซึ่งใช้ในโหมดสว่างสำหรับ "รายการโปรด"

โทเค็น Figma

ปลั๊กอิน Figma Tokens เพิ่งเริ่มสนับสนุน "สินทรัพย์" ด้วยวิธีนี้ คุณสามารถจัดเก็บโลโก้ ภาพ และภาพสัญลักษณ์ของคุณในที่เก็บข้อมูลระยะไกลและเชื่อมโยงผ่านปลั๊กอินได้อย่างง่ายดาย วิธีนี้จะช่วยให้คุณสามารถเพิ่มรูปภาพลงในรูปร่างใน Figma ได้ด้วยคลิกเดียว ในขณะเดียวกันก็มั่นใจได้ว่าคู่มือสไตล์การใช้ชีวิตจะแจ้งตำแหน่งที่จัดเก็บ

อย่างไรก็ตาม จากข้อมูลของทีม Figma Tokens มันอาจจะเร็วเกินไปที่จะใช้คุณสมบัตินี้ เนื่องจากยังมีงานอยู่ในระหว่างดำเนินการ:

“ปัจจุบัน แหล่งที่มาของรูปภาพจำเป็นต้องมีการตรวจสอบความถูกต้องของ CORS (Cross-Origin Resource Sharing) บางเว็บไซต์มีการดำเนินการดังกล่าวแล้ว (เช่น Unsplash) แต่มิฉะนั้น คุณสามารถวางไว้หลังพร็อกซี CORS สามารถดูข้อมูลเพิ่มเติมเกี่ยวกับ CORS ได้ที่นี่ เราจะเพิ่มพร็อกซี CORS ในรุ่นต่อๆ ไป” นี่คือบทความฉบับเต็ม