Design tokens with Figma รุ่น 6
คลาสเรียนออนไลน์ เริ่มวันเสาร์ที่ 5 ก.ค. 68 เวลา 9:00น. - 13:00น.
สอนเนื้อหาและเทคโนโลยีด้าน Design tokens แบบเจาะลึก ตรงตามมาตรฐานของการใช้งาน พร้อมทั้งเทคนิคพิเศษในการทำงานบนโปรแกรม Figma ลงลึกเทคโนโลยีและวิธีการตั้งชื่อตั้งแต่คอนเซปต์ ปูพื้นฐานเทคโนโลยีในปัจจุบันพร้อมเครื่องมือและตัวช่วยในการเขียน Tokens ไปยัน Workshop
อาทิเช่น
- Design tokens คืออะไร
- ประโยชน์ของ Design tokens
- วิธีสร้าง Design tokens
- วิธีการตั้งชื่อ Design tokens
- ใช้งาน Design tokens บน Figma ได้อย่างไร
- วิธีใช้งาน Design tokens กับปลั๊กอินแบบต่างๆ เพื่อเชื่อมต่อกับ Github ให้ sync การแก้ไขได้แบบอัตโนมัติ
- วิธีการใช้ชุด Design tokens เดียวกับทุก platform เช่น Web, Mobile (iOS, Android) เพื่อให้จัดการงาน Design ได้ง่ายมากยิ่งขึ้น
เหมาะสำหรับ
- ผู้มีพื้นฐานด้าน Design system และด้าน Coding มาบ้าง
- ผู้ที่ทำงานในทีม Design system
- ผู้ทำงานด้าน UI Design, UX Design
- ผู้ทำงานด้าน Front end design
- ผู้ที่สนใจสร้าง Design system ในองค์กรให้รองรับการเติบโต
เป้าหมาย
- เพื่อนำ Design system ระบบที่ยืดหยุ่นรองรับการเติบโตไปใช้งานจริงในองค์กร
- เข้าใจเทคโนโลยีล่าสุดของการจัดการ Style แบบข้าม platforms (เช่น เว็บ, แอป) โดยการใช้ Design tokens
พิเศษ!!!
- ปรับเนื้อหาใหม่ เพิ่ม Workshop ให้ทำงานจริงจาก Design ต้นฉบับ
- สอนเทคโนโลยีใหม่ล่าสุดให้ใช้งานได้ทุกแพลตฟอร์ม
วันและเวลาเรียน
- เสาร์ 5 ก.ค.
- เสาร์ 12 ก.ค.
- เสาร์ 19 ก.ค.
เริ่มจำหน่ายแล้ว ราคา 6,990 บาท (ราคาเต็ม 7,990 บาท)
ราคาลด Early bird พิเศษ
<< ส่วนลดพิเศษ >>
1. สำหรับนักเรียนเก่าคอร์สอื่นของ Designil
สามารถสอบถามขอส่วนลดเพิ่มเติมได้ทางแฟนเพจ Designil
มีส่วนลดคอร์สเรียนใหม่ในราคา 500 บาท
ข้อมูลผู้สอน
เสือขาว
Senior UI Designer - Design System
@King Power Click
ประสบการณ์ทำงานมากกว่า 8 ปี
เนื้อหาในคลาสเรียน
วันที่ 1
Day 1 – เสาร์ 5 กรกฎาคม 2568
เวลา 9.00 น. – 13.00 น. (4 ชม.)
เรียนรู้การสร้าง Design tokens บน Token studios ผ่านโปรแกรม Figma
- Intro
- Overview Design Tokens
- Understanding the difference
- What is Design Tokens
- Type of tokens
- Native Figma tokens terminology
- Create tokens with Figma
- Import/Export between Figma style and tokens
- Create and organizing set of tokens
- Integrating into design process
- Tokens Studio plugin and Variables
- Q&A
เรียนพื้นฐาน Design tokens และเครื่องมือที่ใช้ในการทำงานบน Figma ไม่ว่าจะเป็นผ่านทูล Tokens Studio หรือ Figma Variables
วันที่ 2
Day 2 - เสาร์ 12 กรกฎาคม 2568
เวลา 9.00 น. – 13.00 น. (4 ชม.)
สอนวิธีตั้งชื่อและแบ่งกลุ่มของ Tokens
เวิร์คช็อปการเชื่อมต่อ Tokens บน Figma เข้ากับระบบโค้ดหรือ Github และการส่งมอบกับ Developer
- Recap from last week
- Naming tokens
- Scaling tokens
- Create scaling tokens
- ความแตกต่างระหว่าง Figma Tokens และ Variables
- การแบ่งประเภทของ Tokens
- การจัดการ Light Mode/Dark mode แบบละเอียด
เรียนเทคนิคขั้นสูงของการใช้งานปลั๊กอิน Token studio และตัวจัดการ Variables บน Figma
สอนการตั้งชื่อ, การแบ่งประเภทของ Tokens, การจัดการ Light Mode/Dark mode แบบละเอียด
วันที่ 3
Day 3 - เสาร์ 19 กรกฎาคม 2568
เวลา 9.00 น. – 13.00 น. (4 ชม.)
Workshop ทดลองใช้งาน Tokens กับการทำงานจริง พร้อมเวิร์คช็อปการตั้งชื่อแบบละเอียด
- Token Documentation
- Edit style
- Annotation
- Transfer to code
- Example token to code
- Translation tool สอนการ export tokens ไปใช้งานกับโค้ด
- Handoff
- Q&A
เรียนเทคนิคการส่งมอบงานให้กับ Developer และเครื่องมือที่ใช้ในการทำงานของฝั่ง Design system สมัยใหม่ เช่น Translation tool
ในวันที่ 3 จะได้เรียนถึงการเขียนโค้ดจริง เพื่อทำการแปลงค่า Design tokens ให้สามารถใช้งานได้ในทุกแพลตฟอร์ม ไม่ว่าจะเป็น Web, Andriod หรือ iOS หากมีการแก้ไข Design tokens ใน Figma เราสามารถเชื่อมต่อระบบ Automation ระหว่าง Figma ไปจนถึงโค้ดได้เลยในระบบการทำงานนี้
นอกจากนี้ในวันนี้นักเรียนจะได้ไฟล์ Design tokens สามารถนำไปใช้ทำงานกับ AI ตัวอื่นๆได้อีกมากมาย เช่น V0, Lovable, Bolt, Cursor และอื่นๆ
เนื้อหาในคอร์สนี้
ราคา Early bird !!
สมัครก่อนได้รับส่วนลดพิเศษทันที