Design tokens with Figma รุ่น 5
คอร์สสอน Tokens แบบขั้นสูงให้ทำงานร่วมกันในองค์กรได้อย่างราบรื่น
Enroll in Course
สอนเนื้อหาและเทคโนโลยีด้าน 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 ต้นฉบับ
- สอนเทคโนโลยีใหม่ล่าสุดให้ใช้งานได้ทุกแพลตฟอร์ม
วันและเวลาเรียน
- เสาร์ 11 พฤษภาคม
- เสาร์ 18 พฤษภาคม
- เสาร์ 25 พฤษภาคม
เริ่มจำหน่ายแล้ว ราคา 6,992 บาท (ราคาเต็ม 7,992 บาท)
ราคาลด Early bird พิเศษ
สำหรับนักเรียนเก่า
สามารถสอบถามขอส่วนลดเพิ่มเติมได้ทางแฟนเพจ Designil เลยครับ
ข้อมูลผู้สอน
เสือขาว
Senior UI Designer - Design System
@King Power Click
ประสบการณ์ทำงานมากกว่า 6 ปี
เนื้อหาในคลาสเรียนนี้
วันที่ 1
เสาร์ 11 พฤษภาคม 2567 - เวลา 9.00 น. – 13.00 น. (4 ชม.)
ปูพื้นฐานเรื่อง Design tokens พร้อมเวิร์คช็อปวิธีการสร้าง Tokens บน 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
เสาร์ 18 พฤษภาคม 2567 - เวลา 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
เสาร์ 25 พฤษภาคม 2567 - เวลา 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
เนื้อหาในคอร์สนี้
ราคา Early bird !!
สมัครก่อนได้รับส่วนลดพิเศษทันที