CSS Academy · บทเรียน

เครื่องมือโทเค็น: Style Dictionary

แปลงและเผยแพร่ design token ไปยังแพลตฟอร์มต่าง ๆ ด้วยเครื่องมือ Style Dictionary

บทเรียน 4 จาก 413 ขั้นตอน

เครื่องมือโทเค็น: Style Dictionary เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

Style Dictionary คืออะไร

สไตล์ดิกชันนารีคือเครื่องมือสร้างแบบโอเพนซอร์สของอเมซอน ซึ่งแปลงแหล่งข้อมูลโทเคนในรูปแบบเจสันเป็นผลลัพธ์สำหรับแพลตฟอร์มต่าง ๆ ได้แก่ คุณสมบัติที่กำหนดเองของ CSS ตัวแปร SCSS ค่าคงที่ Swift สำหรับ iOS ไฟล์ XML สำหรับแอนดรอยด์ และโมดูล JavaScript/TypeScript ทั้งหมดมาจากแหล่งข้อมูลจริงเพียงแหล่งเดียว

โครงสร้างโครงการ

จัดระเบียบโทเคนไว้ในไดเรกทอรี tokens/ เป็นไฟล์ JSON หรือ JSON5 สไตล์ดิกชันนารีจะรวมไฟล์ทั้งหมดโดยอัตโนมัติ แยกไฟล์ตามหมวดหมู่ เช่น tokens/color.json tokens/spacing.json และ tokens/typography.json

รูปแบบ JSON ของโทเคน

โทเคนแต่ละรายการเป็นออบเจ็กต์ซ้อนกันที่มีคีย์ value และฟิลด์เสริมอย่าง type description และ comment สไตล์ดิกชันนารีจะทำให้โครงสร้างซ้อนกันแบนราบเป็นชื่อแบบจุดสำหรับผลลัพธ์

  <pre class="json-block">{
  "color": {
    "brand": {
      "primary": { "value": "#3b82f6", "type": "color" }
    }
  }
}</pre>

ไฟล์การกำหนดค่า

config.json จะระบุแหล่งข้อมูล (ไฟล์โทเคน) แพลตฟอร์ม (เว็บ, iOS, แอนดรอยด์) และการแปลงหรือรูปแบบสำหรับแต่ละแพลตฟอร์ม แต่ละแพลตฟอร์มสามารถใช้การแปลงที่แตกต่างกันและสร้างไฟล์ผลลัพธ์คนละรูปแบบได้

  <pre class="json-block">{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "css": {
      "transformGroup": "css",
      "buildPath": "dist/css/",
      "files": [{"destination": "variables.css", "format": "css/variables"}]
    }
  }
}</pre>

การแปลงค่า

การแปลงค่าจะปรับเปลี่ยนค่าโทเคนระหว่างการสร้าง: color/css จัดรูปแบบสีเป็นเลขฐานสิบหก size/rem แปลงพิกเซลเป็น rem และ name/cti/kebab สร้างชื่อรูปแบบขีดกลางจากโครงสร้างหมวดหมู่-ชนิด-รายการที่ซ้อนกัน

รูปแบบผลลัพธ์

รูปแบบจะกำหนดเนื้อหาของไฟล์ผลลัพธ์ รูปแบบที่มีมาให้ ได้แก่ css/variables ซึ่งส่งออกบล็อก :root ของ CSS, scss/variables ซึ่งส่งออกตัวแปร SASS และ javascript/module ซึ่งส่งออกออบเจ็กต์ JS รูปแบบที่กำหนดเองช่วยให้สร้างโครงสร้างผลลัพธ์แบบใดก็ได้ตามต้องการ

การอ้างอิงระหว่างโทเคน

อ้างอิงโทเคนอื่นโดยใช้รูปแบบวงเล็บปีกกา: {"value": "{color.brand.primary}"} สไตล์ดิกชันนารีจะแก้การอ้างอิงขณะสร้าง และส่งออกเป็นค่าที่เป็นรูปธรรม การอ้างอิงจะสร้างการจับคู่ระหว่างนามแฝงกับโทเคนส่วนกลาง

การแปลงค่าแบบกำหนดเอง

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

การเรียกใช้การสร้าง

เรียกใช้ npx style-dictionary build หรือเพิ่มคำสั่งนี้ลงในสคริปต์สร้างแพ็กเกจ ไฟล์ผลลัพธ์จะไปอยู่ในไดเรกทอรี buildPath ที่กำหนดค่าไว้ คุณสามารถส่งไฟล์ที่สร้างแล้วขึ้นที่เก็บ หรือสร้างไฟล์ขณะสร้างผ่านระบบผสานรวมต่อเนื่อง ทั้งสองแนวทางเป็นรูปแบบที่ใช้กันทั่วไป

การผสานรวมกับฟิกมา

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

การกำหนดเวอร์ชันโทเคน

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

ตรวจสอบความรู้

บทบาทของ "การแปลงค่า" ในสไตล์ดิกชันนารีคืออะไร

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

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

เริ่มต้นได้ฟรี

เรียนรู้ CSS ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 40
บทเรียน: 159

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “เครื่องมือโทเค็น: Style Dictionary” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เครื่องมือโทเค็น: Style Dictionary” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เครื่องมือโทเค็น: Style Dictionary”

แปลงและเผยแพร่ design token ไปยังแพลตฟอร์มต่าง ๆ ด้วยเครื่องมือ Style Dictionary คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “เครื่องมือโทเค็น: Style Dictionary” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ CSS Academy