Frontend Academy · บทเรียน

โทเค็นการออกแบบด้วย Style Dictionary

กำหนดโทเค็นสี ระยะห่าง และตัวอักษรใน JSON แล้วแปลงด้วย Style Dictionary เป็นตัวแปร CSS ค่าคงที่ JS หรือรูปแบบ iOS/Android

บทเรียน 2 จาก 414 ขั้นตอน

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

Design Tokens คืออะไร

Design tokens คือค่าพื้นฐานที่มีชื่อในระบบออกแบบ ได้แก่ สี ระยะห่าง ขนาดฟอนต์ รัศมีเส้นขอบ และเงา สิ่งเหล่านี้คือแหล่งข้อมูลหลักเพียงแห่งเดียว — ทุก component จะสร้างรูปแบบจากค่าเหล่านี้

เหตุผลที่โทเคนมีความสำคัญ

โทเคนแยกการตัดสินใจด้านการออกแบบออกจากการนำไปใช้ เปลี่ยน color.primary จากสีน้ำเงินเป็นสีเขียวเพียงครั้งเดียว แล้วทุก component ที่ใช้ค่านี้จะอัปเดตตาม นอกจากนี้ยังช่วยให้คุณนำการออกแบบเดียวกันไปใช้กับเว็บ iOS และ Android ได้

การจัดเก็บโทเคน

จัดเก็บโทเคนใน JSON หรือ YAML ซึ่งเป็นรูปแบบกลางที่เครื่องมือบนแพลตฟอร์มต่าง ๆ นำไปใช้ได้ JSON เป็นรูปแบบที่พบได้บ่อยที่สุด

// tokens/color.json
{
  "color": {
    "brand": {
      "primary": { "value": "#2563eb" },
      "secondary": { "value": "#7c3aed" }
    },
    "text": {
      "default": { "value": "#111827" },
      "muted": { "value": "#6b7280" }
    }
  }
}

Style Dictionary

Style Dictionary (Amazon) คือเครื่องมือสร้างมาตรฐานโดยพฤตินัยสำหรับ design tokens โดยอ่านโทเคนแล้วแปลงเป็นรูปแบบผลลัพธ์ได้หลายแบบ ได้แก่ ตัวแปร CSS, SCSS, ค่าคงที่ JS, iOS Swift และ Android XML

npm install -D style-dictionary

การตั้งค่า

สร้าง style-dictionary.config.js เพื่อระบุโทเคนอินพุตและแพลตฟอร์มเอาต์พุต

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'tokens.css', format: 'css/variables' }]
    },
    js: {
      transformGroup: 'js',
      buildPath: 'build/js/',
      files: [{ destination: 'tokens.js', format: 'javascript/es6' }]
    },
    ios: {
      transformGroup: 'ios',
      buildPath: 'build/ios/',
      files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }]
    }
  }
};

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

เรียกใช้ CLI เพื่อสร้างผลลัพธ์สำหรับทุกแพลตฟอร์ม

npx style-dictionary build

# Output:
# build/css/tokens.css     — CSS variables
# build/js/tokens.js       — JS constants
# build/ios/Tokens.swift   — Swift constants

ผลลัพธ์ CSS ที่สร้างขึ้น

ตัวแปร CSS ที่ใช้รูปแบบการตั้งชื่ออย่างสม่ำเสมอ (kebab-case พร้อมเนมสเปซ)

:root {
  --color-brand-primary: #2563eb;
  --color-brand-secondary: #7c3aed;
  --color-text-default: #111827;
  --color-text-muted: #6b7280;
}

ผลลัพธ์ JS ที่สร้างขึ้น

ออบเจ็กต์ JS สำหรับใช้ในโค้ด JS/TS (การตั้งค่า Tailwind และ CSS-in-JS)

export const ColorBrandPrimary = '#2563eb';
export const ColorBrandSecondary = '#7c3aed';
export const ColorTextDefault = '#111827';

แนวทางการตั้งชื่อโทเคน

ใช้ชื่อเชิงความหมาย (color.primary) แทนชื่อที่ระบุค่าตรง ๆ (color.blue-500) โทเคนเชิงความหมายช่วยให้คุณเปลี่ยนค่าได้โดยไม่ต้องเปลี่ยนชื่อ ระบบสองระดับ: ชุดสีตามค่าจริง (blue-500) → นามแฝงเชิงความหมาย (primary)

{
  "color": {
    "palette": {
      "blue-500": { "value": "#2563eb" }
    },
    "brand": {
      "primary": { "value": "{color.palette.blue-500.value}" }
    }
  }
}

การทำธีมด้วยโทเคน

สร้างผลลัพธ์สำหรับหลายแพลตฟอร์มโดยใช้อินพุตต่างกันเพื่อรองรับธีม (สว่าง/มืด) — ใช้ชื่อเดียวกันแต่ค่าต่างกัน

// Light theme:
--color-bg: white;
--color-text: black;

// Dark theme:
--color-bg: #111;
--color-text: white;

หมวดหมู่ของโทเคน

หมวดหมู่ที่พบบ่อย: สี ระยะห่าง ตัวอักษร (font-family, size, line-height, weight) เส้นขอบ (radius, width) เงา การเปลี่ยนผ่าน (duration, easing) z-index และจุดแบ่งหน้าจอ

เครื่องมือจัดการคลังโทเคน

นอกจาก Style Dictionary ยังมี Tokens Studio (ปลั๊กอิน Figma), Specify และ Supernova เครื่องมือเหล่านี้ช่วยให้นักออกแบบจัดการโทเคนใน Figma และซิงค์กับโค้ดเบสโดยอัตโนมัติ

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ประโยชน์หลักของการใช้ design tokens ร่วมกับ Style Dictionary คืออะไร

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

สรุป: Design Tokens

โทเคนคือค่าพื้นฐานที่มีชื่อ (สี ระยะห่าง รูปแบบตัวอักษร) และเป็นแหล่งข้อมูลหลักของระบบออกแบบ จัดเก็บเป็น JSON Style Dictionary แปลงเป็นตัวแปร CSS, JS, iOS และ Android ใช้การตั้งชื่อเชิงความหมาย (primary) แทนชื่อที่ระบุค่าตรง ๆ (blue-500) ระบบสองระดับ: ชุดสี → นามแฝงเชิงความหมาย สร้างธีมผ่านการสร้างแยกกัน ซิงค์จาก Figma ผ่าน Tokens Studio

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

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

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

คอร์ส: 41
บทเรียน: 163

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

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

บทเรียน “โทเค็นการออกแบบด้วย Style Dictionary” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “โทเค็นการออกแบบด้วย Style Dictionary”

กำหนดโทเค็นสี ระยะห่าง และตัวอักษรใน JSON แล้วแปลงด้วย Style Dictionary เป็นตัวแปร CSS ค่าคงที่ JS หรือรูปแบบ iOS/Android คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

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

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

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

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

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

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