Design tokens with Figma รุ่น 5

คอร์สสอน Tokens แบบขั้นสูงให้ทำงานร่วมกันในองค์กรได้อย่างราบรื่น

สอนเนื้อหาและเทคโนโลยีด้าน 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 ต้นฉบับ
  • สอนเทคโนโลยีใหม่ล่าสุดให้ใช้งานได้ทุกแพลตฟอร์ม

วันและเวลาเรียน

  • เสาร์ 7 ก.ย.
  • เสาร์ 14 ก.ย.
  • เสาร์ 21 ก.ย.

เริ่มจำหน่ายแล้ว ราคา 6,990 บาท (ราคาเต็ม 7,990 บาท)
ราคาลด Early bird พิเศษ

<< ส่วนลดพิเศษ >>
1. สำหรับนักเรียนเก่าคอร์สอื่นของ Designil
สามารถสอบถามขอส่วนลดเพิ่มเติมได้ทางแฟนเพจ Designil
มีส่วนลดคอร์สเรียนใหม่ในราคา 500 บาท

2. สำหรับนักเรียนเก่าคอร์ส Design tokens รุ่น 1 - 4
สมัครเรียนเพื่ออัปเดตเนื้อหาอีกรอบได้ใน ราคา 1,990 บาท
ได้ทางแฟนเพจ Designil


ข้อมูลผู้สอน


Nathanon Inplub
Nathanon Inplub

เสือขาว
Senior UI Designer - Design System
@King Power Click
ประสบการณ์ทำงานมากกว่า 6 ปี


เนื้อหาในคลาสเรียน

วันที่ 1
Day 1 – เสาร์ 7 กันยายน 2567
เวลา 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 - เสาร์ 14 กันยายน 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
Day 3 - เสาร์ 21 กันยายน 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

เนื้อหาในคอร์สนี้


  เนื้อหาการเรียน
Available in days
days after you enroll
  วิดีโอจากคลาสเรียน
Available in days
days after you enroll

ราคา Early bird !!
สมัครก่อนได้รับส่วนลดพิเศษทันที

สมัครเรียนเพื่อล็อกราคานี้ !