Section 1: พื้นฐานการออกแบบ UX และ UI
- ความแตกต่างระหว่าง UX/UI
- ทำความรู้จักการออกแบบ UX ความสำคัญ เป้าหมาย และกระบวนการออกแบบ UX ที่ดี
- ทำความรู้จักการออกแบบ UI ความสำคัญ องค์ประกอบ กระบวนการออกแบบ UI ทีดี
- เครื่องมือสำหรับใช้ในการออกแบบ UX/UI
Section 2: ทำความรู้จักกับโปรแกรมออกแบบด้วย Figma
- แนะนำ Figma
- Interface และเครื่องมือต่างๆ ที่ใช้ออกแบบใน Figma
- แนวทางการออกแบบหน้าจอสำหรับ Mobile App
- จุดเด่น จุดด้อยของ Figma
- ช่องทางในการเข้าใช้งาน Figma
- รุ่นต่างๆ ของโปรแกรม Figma
Section 3: เครื่องมือต่างๆ บน Figma
- ส่วนประกอบของหน้าต่าง Figma
- แนะนำเครื่องมือที่ใช้งานบ่อยบน Figma
- ฝึกใช้งานเครื่องมือ Frame, Grid, Shape, Alignment, Resize, Image, Color Picker และ Gradients
Section 4: เริ่มต้นออกแบบงานดีไซน์บน Figma
- การทำงานกับ Frame บน Figma
- วาดรูปทรงพื้นฐานบน Figma เช่น เส้นตรง ลูกศร สี่เหลี่ยม วงกลม วงรี รูปหลายเหลี่ยม รูปดาว เป็นต้น
- การทำงานกับวัตถุหรือเลเยอร์บนดีไซน์
- การย้าย ย่อ ขยาย หมุนวัตถุแบบต่างๆ
Section 5: การทำงานกับภาพและข้อความใน Figma
- การแทรกรูปภาพลงไปในงานดีไซน์
- การปรับแต่งภาพในดีไซน์ เช่น การย่อ ขยาย หมุนภาพ การซ้อนภาพ การทำ mask
- การแทนที่ภาพในงานดีไซน์
- การปรับแต่งข้อความ สี ขนาด รูปแบบฟอนต์
- การใส่เงา เส้นขอบ และอื่นๆ ที่น่าสนใจในข้อความ
Section 6: การใช้งาน Auto Layout ใน Figma
- รู้จักกับคุณสมบัติ Auto Layout
- Layout flow: ทิศทางและการจัดลำดับ
- Spacing: ระยะห่างแบบอัตโนมัติ
- Alignment: จัดตำแหน่งอัตโนมัติ
- Resizing: การปรับขนาดความสูง ความกว้างอัตโนมัติ
Section 7: แนะนำปลั๊กอินเสริมยอดนิยมใน Figma
- ทำความรู้จัก Plugin ใน Figma
- เรียกใช้งาน Plugin ได้จากที่ไหนบ้าง
- การค้นหาและรัน Plugin จาก Figma Community
- แนะนำ Plugin ยอดนิยมบน Figma
Section 8: การสร้าง Prototypes ใน Figma
- ทำความรู้จักกับ Prototypes
- ขั้นตอนการสร้าง Prototypes
- สร้างเส้นเชื่อมโยง
- กำหนดรายละเอียดการโต้ตอบ
- การกำหนดแอนิเมชั่นการเปลี่ยนหน้า
- ทดสอบการทำงานกับ Prototypes
Section 9: Workshop ออกแบบเว็บไซต์ด้วย Figma
- เริ่มต้นสร้างโปรเจ็กต์ใน Figma พร้อมการตั้งค่าพื้นฐานที่เหมาะสม
- ทำความเข้าใจการวาง layout แบบต่างๆ ใน Figma
- การสร้างรูปทรง เส้น ข้อความ และภาพเวคเตอร์ใน Figma
- การใส่สีพื้นฐาน การไล่สีแบบ gradients และเทคนิคอื่นๆ ที่น่าสนใจ
- การนำภาพจากภายนอกเข้ามาทำงานใน Figma
- การสร้าง Component และ Style ใน Figma เพื่อนำไปใช้ซ้ำ
- สร้างการเชื่อมโยงระหว่างหน้าใน Figma ด้วย Prototypes
- การ Export ไฟล์แบบต่างๆ ใน Figma ออกไปใช้งานจริง