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
เลื่อนคลาสเรียน
ปูพื้นฐานเรื่อง 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
เลื่อนคลาสเรียน

สอนวิธีตั้งชื่อและแบ่งกลุ่มของ 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
เลื่อนคลาสเรียน

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

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

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