Autoplay
Autocomplete
กลับไปตอนก่อนหน้า
ดูตอนถัดไป
Design system with Figma 101 รุ่น2
ปูพื้นฐาน Figma
ก่อนเริ่มเรียน มาอ่านที่นี่ก่อนนะคะ
แนะนำเครื่องมือการใช้งานของ Figma (8:51)
คำศัพท์ Figma ที่ต้องรู้เพื่อ Design system (10:08)
Library & Assets (13:34)
สร้าง Component ด้วย Auto-layout (Basic) (17:20)
ความแตกต่างระหว่าง Figma แบบฟรีและเสียเงิน (4:28)
วิธีสร้าง Breakpoints และกำหนด Grid styles (10:55)
สร้าง Button และจัดการ Color styles (17:37)
สร้าง Text field - อธิบาย State ของ UI (34:05)
ข้อผิดพลาดของการสร้าง Component ด้วย Auto-layout (3:53)
วิธีสร้าง Variants และกำหนด Properties ใน Button (17:24)
วิธีสร้าง Text property ใน Button (4:10)
วิธีสร้าง Boolean, Instance swap properties ใน Button (13:27)
10 ข้อผิดพลาดของมือใหม่จากการทำ Design system ด้วย Figma (15:57)
Design system with Figma 101 รุ่นที่ 1
Slide ทั้งหมด
วิดีโอวันที่ 1 - Visual style, UI, Component (186:55)
ตัวอย่างการตั้งค่า Text style สำหรับ Responsive
Slide ทั้งหมด
วิดีโอวันที่ 2 - Design tokens, Plugins, Accessibility (186:02)
Q&A - สอนเพิ่มเรื่อง Design tokens, Figma tokens ปลั๊กอิน (161:33)
Design system with Figma 101 รุ่นที่ 2
Slide ทั้งหมด
01 Introduction to design system (15:04)
02 Design tokens concept & Naming (35:44)
03 การจัดการ Colour styles (28:33)
04 การจัดการ Text styles (4:18)
05 การจัดการ Styles อื่นๆ เช่น Shadow, Spacing (19:01)
06 การสร้าง Components ประกอบร่าง UI (35:03)
วิดีโอวันที่ 1 - Design system + design tokens (256:35)
วิดีโอวันที่ 2 - Design tokens advanced, Tokens studio plugin (245:08)
วิดีโอวันที 3 - Q&A ตัวอย่างการบ้าน, ตอบคำถาม (148:57)
ส่งการบ้าน Final รุ่น 2
ไฟล์ตัวอย่าง Design system
ไฟล์ตัวอย่างสำหรับเรียนรู้เรื่อง Tokens studio
06 การสร้าง Components ประกอบร่าง UI
Lesson content locked
If you're already enrolled,
you'll need to login
.
กรุณาลงทะเบียนเรียนเพื่อดูเนื้อหานี้