สร้างโครง Design System ที่สามารถขยายได้ใน Webflow โดยเริ่มจากการกำหนด design tokens (Variables) สร้าง Components/Patterns วาง Utility classes ตั้งหน้า Style Guide + Docs/เวอร์ชัน และทำ Governance/Audit โดยใช้ JSON-LD/Accessibility/CWV เป็นเกณฑ์คุณภาพ และเชื่อม Git/Figma เป็นแหล่งข้อมูลเดียวกัน.

วิธีสร้าง “Scalable Design System” ใน Webflow (อัปเดต 2025)

สำหรับทีมเว็บ/มาร์เก็ตติ้ง/ดีไซน์ เป้าหมายคือสร้างประสบการณ์ที่เสถียรให้กับทุกเพจ โดยการควบคุมหน้าตาและพฤติกรรมผ่าน 6 ส่วนหลัก: Tokens → Components → Utilities → Style Guide → Docs/Versioning → Governance/Audit

สถาปัตยกรรม Design Tokens (Variables)

ใน Webflow ใช้ Variables เพื่อเก็บสี/ระยะ/ฟอนต์ และแมปเป็น CSS Custom Properties ในการ Publish เพื่อให้สไตล์สอดคล้องทั้งโปรเจกต์ (ดู: Webflow University — Variables, Components, Style Panel).

Components & Patterns

• Base → Compound → Template: เริ่มจากปุ่ม/ฟิลด์ (Base) → การ์ด/ฟอร์ม (Compound) → ฮีโร่/ฟุตเตอร์ (Template)
• ปรับด้วย Properties/Slots: เพิ่มคงรูป (constraints) เพื่อลดการใช้ combo classes เกินจำเป็น
• State: default/hover/pressed/disabled + focus-visible สำหรับการเข้าถึงด้วยคีย์บอร์ด

Utility classes (เมื่อจำเป็น)

เตรียมชุดสั้น ๆ ที่ควบคุมระยะ/เลย์เอาต์ เช่น u-stack-16, u-inline-8, u-container. หลีกเลี่ยงการเป็น “utility-only framework” เพื่อป้องกัน drift จากระบบหลัก

หน้า Style Guide ที่ต้องมี

ตัวอย่างโค้ด: Type Scale และปุ่มตาม Tokens

/* Type scale ด้วย clamp() */
:root {
  --font-size-1: clamp(14px, 1.6vw, 16px);
  --font-size-2: clamp(16px, 2vw, 18px);
  --font-size-3: clamp(20px, 3vw, 24px);
}

/* ปุ่มผูกกับ Semantic tokens */
:root {