Live course + video

Design system with Figma 101

คอร์สเรียนปูพื้นฐานด้าน Design system ด้วย Figma แบบเริ่มต้น สำหรับผู้ที่ไม่มีประสบการณ์มาก่อน

สอนโดย นัท เกษสุรางค์ – UI Specialist at Commbank, Australia

design system with figma 02

Design system สิ่งที่ต้องรู้สำหรับสาย UI Designer

การทำงานออกแบบ Product ในองค์กร มักจะมีปัญหามากมาย ไม่ว่าจะเป็นเรื่องของการจัดการดีไซน์ที่ไม่ตรงกันหรือการทำงานที่ไม่ส่วนที่เชื่อมต่อกันระหว่างดีไซน์กับโค้ด และอื่นๆ อีกมากมาย เราจึงได้มีตัว Design system เข้ามาใช้ในการจัดการงานออกแบบในองค์กรเพื่อให้ทำงานได้เป็นระเบียบแบบแผนและง่ายต่อการจัดการในอนาคต

แต่พอเทคโนโลยีของการจัดงานด้านนี้เข้ามา ก็เริ่มมีคำถามจากดีไซน์เนอร์ที่เพิ่งเริ่มต้นเข้ามาอีกมากมาย ไม่ว่าจะเป็น

  • Design system คือแค่นี้หรือเปล่าคะ
  • อันนี้เรียก Design system ได้หรือยัง
  • จะจัดการงาน Design system อย่างไรในระยะยาว
  • องค์กรต้องมีการทำ Design system ระดับไหน
  • เราจะต้องสร้าง component บน Figma
    แบบไหน แบบไหนที่เรียกว่าถูกต้อง
  • ที่อื่นทำ Design system ใน Figma ยังไง

แอดนัทเองจึงเกิดที่มาว่าอยากจะพาดีไซน์เนอร์และผู้ที่สนใจด้านดีไซน์หลายๆ ท่านมาปูพื้นฐานเรื่องคอนเซปต์ของ Design system จาก 0 เพื่อให้ทุกคนสามารถทำ Design system ด้วย Figma จากพื้นฐานแนวคิดการใช้งาน UI ให้ถูกหลักตั้งแต่เริ่มต้น หลังจากนั้นจะพาไปหัดใช้งาน Figma และชมตัวอย่างจาก Design system ใน Industry แบบไม่ต้องไปนั่งอ่านเอง พร้อมศึกษาต่อเองได้ในอนาคต


คอร์สที่เปิดสอนเดือนนี้

1. Design system with Figma 101 [รุ่นที่ 1]
สอน UI และวิธีการใช้งาน Figma เหมาะสำหรับผู้เริ่มต้น

ราคา 3,900 บาท

จุดเด่นของการเรียน

  • เรียนออนไลน์ 100%
  • มีวิดีโอย้อนหลัง
  • มีการบ้านให้ทำ
  • มีห้อง Discord ให้ส่งการบ้านและส่งงานหลังเรียนจบ

  • 6 hours of live class & on-demand video
  • รับชมวิดีโอได้ตลอด 1 ปี
  • มีผลงาน UI หลังเรียนจบ
  • ใบ Certificate รับรองจาก Designil

คอร์ส Design system with Figma 101 รุ่นที่ 1

ถ้าใครยังติดปัญหาไม่ว่าจะเป็น

  • ไม่เข้าใจว่า Design system ทำอย่างไร
  • จะใช้งาน Figma มาจัดการกับ Component ยังไงเพื่อให้ใช้งานง่าย เช็กอย่างไร
  • ออกแบบยังไงให้ดูมีความสม่ำเสมอ (Consistency) และดูน่าใช้งานเหมือนกับแอปฯ และเว็บไซต์ที่ใช้งานจริงในตลาด
  • จะแบ่งกลุ่ม UI Component อย่างไร เพื่อให้ง่ายต่อการจัดการในอนาคต
  • ไม่เข้าใจเรื่องของ Atomic design แบบไหนที่ต้องจัดให้อยู่ในกลุ่มเดียวกัน
  • การจัดการ Variants, UI, State แบบต่างๆ เพื่อให้องค์กรใช้งานได้ตรงกัน

แอดนัทจะพาทุกท่านไปส่องเบื้องลึกเบื้องหลังของงาน UI เพื่อนำไปปรับใช้งานกับองค์กรหรือโปรเจกต์ของทุกท่านเอง ตั้งแต่เริ่มต้นในสไตล์การเรียนแบบภาษาไทยย่อยง่าย ได้ทดลองทำงานจริง เพราะเราจะเรียนกันถึง 2 วัน ให้เวลาทุกท่านได้กลับบ้านไปทำโปรเจกต์หลังเรียนจบ และได้ซึมซับเนื้อหาการเรียนระหว่างสัปดาห์

ข้อดีของคอร์สนี้คือ ถ้าเราเข้าใจพื้นฐานของการทำงานของ UI แล้ว เราก็จะสามารถต่อยอดไปที่การจัดการของ Design system ได้อย่างเข้าใจภาพรวมขององค์ประกอบทั้งหมดได้มากขึ้น และสามารถค้นคว้าหาความรู้เพิ่มเติมได้ด้วยตนเองหลังเรียนจบด้วยคำศัพท์ UI ใน Design Industry ที่ใช้งานตรงกันทั่วโลก

คอร์สนี้เหมาะสำหรับ

  • มือใหม่ ประสบการณ์เป็น 0 ก็เรียนได้
  • ผู้ที่มีพื้นฐานอยู่แล้ว แต่อยากเรียนเพิ่มเรื่อง Figma
  • ท่านที่อยากเรียนรู้เรื่อง UI
  • ท่านที่อยากทราบวิธีการใช้งาน Figma กับการวาง Design system

เนื้อหาการเรียน

2 days • 28 lectures • 6h total length

  • ปูพื้นฐานเรื่องของ Design system
  • สอนพื้นฐาน UI แต่ละตัวใช้งานอย่างไร เพื่ออะไร
  • Spacing / Alignment / Sizing / Consistency / Grid
  • Typography
  • Colour
  • Responsive Website
  • ทดลองสร้าง Web UI ของตนเอง ในรูปแบบต่างๆ
  • [Workshop] สอนการใช้ Figma ในการสร้างและจัดการ Component ตั้งแต่เริ่มต้น
  • [การบ้าน] ให้กลับไปทำ Component ของตัวเองเพื่อเอามาประกอบร่างกันในคลาสถัดไป
  • การทำงาน Design system และคอนเซปต์ Design tokens
  • Accessibility
  • iOS, Android
  • ทดลองสร้าง Mobile UI ของตนเอง ในรูปแบบต่างๆ
  • ความแตกต่างละหว่าง Platformและเทคโนโลยีที่ต้องรู้ (แบบไม่ต้องเขียนโค้ด)
  • การจัดการ Component พร้อมยกตัวอย่างสิ่งที่จะเกิดขึ้นจริงในองค์กร
  • [Workshop] ประกอบร่าง Components ของตัวเองเข้ามาเป็น System
  • [Workshop] สอนใช้งาน Plugin เพื่อจัดการ component เตรียมตัวก่อนเข้าสู่คลาสถัดไป
  • ได้ทดลองทำงานจริง พร้อมกับการบ้านให้ฝึกฝนฝีมือ
  • มี TA ช่วยตรวจการบ้าน
  • มีวิดีโอให้ดูย้อนหลัง
  • จะเพิ่มวิดีโอตอบคำถาม + สอนเทคนิคเพิ่มให้ หากมีคำถามเข้ามาหลังเรียนที่เหมือนๆ กันค่ะ
  • พูดคุยส่งงานได้ผ่าน Discord
  • สามารถทำ Design system ด้วยตนเองบน Figma ได้
  • เข้าใจพื้นฐานของ Design system เบื้องลึกเบื้องหลังของ UI
  • เข้าใจเทคโนโลยีของแต่ละ Platform เช่น iOS, Android, Responsive website
  • สามารถไปศึกษาต่อเพิ่มเติมเองได้ โดยทุกท่านจะได้เรียนเทคโนโลยีและรู้คำศัพท์ในวงการที่ใช้ตรงกันทั่วโลก

Figma (สมัครใช้งานได้ฟรี)

วิดีโอสอนทำ Design system ด้วย Figma แบบพื้นฐานไปจนถึงลึกซึ้ง
มาติดตามวิดีโอเก่าๆ ของแอดนัทได้ก่อนทาง Youtube แล้วไปเจอกันในคอร์สนะคะ

เรียนแบบออนไลน์ ผ่านวิดีโอ

3,900 บาท

ปูพื้นฐานการทำงานด้าน Design system

ราคา 3,900 บาท


ติดตามเนื้อหาคอร์สที่ 2 แบบละเอียดได้เร็วๆ นี้

Scaling design system – สอนทักษะการจัดการงานแบบสเกลขนาดใหญ่สำหรับดีไซน์เนอร์ในองค์กร ที่มีดีไซน์เนอร์หรือผู้ใช้งาน Design system ของเราในระดับหลายสิบคนไปจนถึงร้อยคน แชร์ประสบการทำงานพร้อมวิธีการทำงานที่จะทำให้ทุกคนหันมาใช้ระบบเดียวกันได้โดยไม่หยุมหัวกัน

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active

Save