เฟสสุดท้าย — สิ่งที่ทำให้ Premium ต่างจากแพ็กเกจอื่น. ไม่ใช่แค่ส่งไฟล์ แต่ส่ง ระบบที่ทีม EduFlow เดินต่อเองได้: เอกสาร · กติกา governance · token→code handoff · Figma library · แผน adoption → ตอบ KPI “ทีมใช้ครบใน 1 เดือน”
เว็บเอกสารที่ทีมเปิดดูได้ตลอด — ทุก component มีหน้า doc ของตัวเอง (anatomy · variants · usage · code)
| variant | token | ใช้เมื่อ |
|---|---|---|
primary | color.primary | การกระทำหลัก 1/จอ |
secondary | color.accent | การกระทำรอง |
ghost | surface + border | ยกเลิก/รอง |
danger | color.danger | ลบ/ทำลาย |
กติกาที่กัน UI กลับไป “แตก” อีก — ใครเพิ่ม/แก้ component ได้ ผ่านขั้นตอนไหน (นี่คือสิ่งที่ audit เฟส 1 พิสูจน์ว่าจำเป็น)
ทีมเสนอ component/แก้ไข พร้อมเหตุผล
DS owner + peer ตรวจตาม principles/token
ออกเวอร์ชัน (semver) + changelog
อัปเดต Figma library + code พร้อมกัน
ใครเสนอได้ (ทุกคน) · ใคร review/อนุมัติ (DS owner) — กันคนแก้มั่ว
semver (major/minor/patch) · ทุกการเปลี่ยนมีบันทึก ทีมตามทันว่าอะไรเปลี่ยน
review gate + lint token — ของใหม่ต้องผ่านระบบ ห้าม hardcode สีนอก token
ส่งให้ทีม dev (6 คน) ใช้ตรง — token แหล่งเดียว export พร้อมกันทั้ง Web (React) และ Mobile (React Native)
--color-primary--space-4--radius-mdtheme.color.primarytheme.space[4]theme.radius.mdtokens.colorPrimarytokens.space4tokens.radiusMdtoken แหล่งเดียว → build อัตโนมัติเป็น CSS/JS/RN — แก้ที่เดียว ออกครบทุก platform
component live + props/variant ครบ — dev เห็นของจริงและ copy โค้ดได้
ชื่อ component/prop ตรงกัน Figma ↔ Code — ลดสับสนดีไซน์↔dev
แผนทำให้ทีม 3 designer / 6 dev เปลี่ยนมาใช้จริง — ตอบ KPI “ใช้ครบใน 1 เดือนหลังส่งมอบ”
เวิร์กชอป 2 ชม. · เปิด Figma library · ทีมลองหยิบ component
เลือก 2–3 จอ migrate ด้วย DS · จับคู่ designer-dev
เก็บปัญหาจริง · เติม component ที่ขาด · ปรับ doc
ทุกจอใหม่ใช้ DS · วัด adoption = ✓ บรรลุ KPI
3 เป้าที่ตั้งไว้ตั้งแต่เฟส 0 — design system ทั้งหมดออกแบบมาเพื่อขยับ 3 ตัวเลขนี้
จากระบบที่ “แตก” สู่ Single Source of Truth ที่ทีมเดินต่อเองได้
EduFlow ได้รับ: token (light+dark) · 12+ components · 20+ screens (3 platform) · docs + Figma library · governance + handoff code — พร้อมสเกลไป 3 ประเทศ
ตลอดงานนี้ — 5 ลูกค้าจำลอง (โดย Meth) · 4 ระดับแพ็กเกจ · งานจริงทุกชิ้น
จองช่างซ่อมบ้าน · 5 จอ hi-fi + flow ใน 8 ชม.
Farm-to-Table · 2 personas + journey + wireframe
คลังสินค้า SaaS · 10 จอ + prototype (2 เฟส)
EdTech · ระบบครบ 6 เฟส · ทีมใช้ต่อได้
จาก Express (ด่วน 8 ชม.) ถึง Premium (Design System 6 เฟส) — พอร์ตโฟลิโอสาธิตบริการ UX/UI ครบวงจร. ทุกชิ้นเป็นงานจริง ลูกค้าจำลองโดย Meth · ออกแบบ & ส่งมอบโดย AICE Team · นำเสนอเข้าธีมเว็บเดิมทุกไฟล์
เชิญคุณวิชญ์ (และ ICE) ตรวจรับงานปิดโปรเจกต์ — ขอบคุณที่ร่วมเดินทางครบทั้ง 4 ระดับครับ 🙏