ออกแบบ UI/UX ด้วย Figma สำหรับ Flutter

ภาพรวมหัวข้อการอบรม

• Section 1: การเตรียมเครื่องมือและความพร้อม
• Section 2: พื้นฐานการออกแบบ UX และ UI
• Section 3: ทำความรู้จักกับโปรแกรมออกแบบด้วย Figma
• Section 4: เครื่องมือต่างๆ บน Figma
• Section 5: เริ่มต้นออกแบบงานดีไซน์บน Figma
• Section 6: การทำงานกับภาพและข้อความใน Figma
• Section 7: การใช้งาน Auto Layout ใน Figma
• Section 8: แนะนำปลั๊กอินเสริมยอดนิยมใน Figma
• Section 9: สร้างโปรโตไทป์ใน Figma
• Section 10: Workshop ออกแบบ Mobile App ใน Figma
• Section 11: การส่งออกไฟล์ดีไซน์ใน Figma ไปเป็น Code ใน Flutter
• Section 12: การนำโค้ดที่ได้ไปใช้งานใน Flutter

รายละเอียดหลักสูตร

Section 1: การเตรียมเครื่องมือและความพร้อม

• การติดตั้ง Figma Desktop บน Windows และ MacOS
• วิธีการติดตั้งเครื่องมือและ flutter sdk บนระบบปฎิบัติการ MacOS
• การติดตั้ง Visual Studio Code พร้อมส่วนเสริมที่จำเป็น
• การใช้ flutter ตรวจเช็คความพร้อมของระบบ

Section 2: พื้นฐานการออกแบบ UX และ UI

• ความแตกต่างระหว่าง UX/UI
• ทำความรู้จักการออกแบบ UX ความสำคัญ เป้าหมาย และกระบวนการออกแบบ UX ที่ดี
• ทำความรู้จักการออกแบบ UI ความสำคัญ องค์ประกอบ กระบวนการออกแบบ UI ทีดี
• เครื่องมือสำหรับใช้ในการออกแบบ UX/UI

Section 3: ทำความรู้จักกับโปรแกรมออกแบบด้วย Figma

• แนะนำ Figma
• Interface และเครื่องมือต่างๆ ที่ใช้ออกแบบใน Figma
• แนวทางการออกแบบหน้าจอสำหรับ Mobile App
• จุดเด่น จุดด้อยของ Figma
• ช่องทางในการเข้าใช้งาน Figma
• รุ่นต่างๆ ของโปรแกรม Figma

Section 4: เครื่องมือต่างๆ บน Figma

• ส่วนประกอบของหน้าต่าง Figma
• แนะนำเครื่องมือที่ใช้งานบ่อยบน Figma
• ฝึกใช้งานเครื่องมือ Frame, Grid, Shape, Alignment, Resize, Image, Color Picker และ Gradients

Section 5: เริ่มต้นออกแบบงานดีไซน์บน Figma

• การทำงานกับ Frame บน Figma
• วาดรูปทรงพื้นฐานบน Figma เช่น เส้นตรง ลูกศร สี่เหลี่ยม วงกลม วงรี รูปหลายเหลี่ยม รูปดาว เป็นต้น
• การทำงานกับวัตถุหรือเลเยอร์บนดีไซน์
• การย้าย ย่อ หยาย หมุนวัตถุแบบต่างๆ

Section 6: การทำงานกับภาพและข้อความใน Figma

• การแทรกรูปภาพลงไปในงานดีไซน์
• การปรับแต่งภาพในดีไซน์ เช่น การย่อ ขยาย หมุนภาพ การซ้อนภาพ การทำ mask
• การแทนที่ภาพในงานดีไซน์
• การปรับแต่งข้อความ สี ขนาด รูปแบบฟอนต์
• การใส่เงา เส้นขอบ และอื่นๆ ที่น่าสนใจในข้อความ

Section 7: การใช้งาน Auto Layout ใน Figma

• รู้จักกับคุณสมบัติ Auto Layout
• Layout flow: ทิศทางและการจัดลำดับ
• Spacing: ระยะห่างแบบอัตโนมัติ
• Alignment: จัดตำแหน่งอัตโนมัติ
• Resizing: การปรับขนาดความสูง ความกว้างอัตโนมัติ

Section 8: แนะนำปลั๊กอินเสริมยอดนิยมใน Figma

• ทำความรู้จัก Plugin ใน Figma
• เรียกใช้งาน Plugin ได้จากที่ไหนบ้าง
• การค้นหาและรัน Plugin จาก Figma Community
• แนะนำ Plugin ยอดนิยมบน Figma

Section 9: สร้างโปรโตไทป์ใน Figma

• ทำความรู้จักกับโปรโตไทป์
• ขั้นตอนการสร้างโปรโตไทป์
• สร้างเส้นเชื่อมโยง
• กำหนดรายละเอียดการโต้ตอบ
• การกำหนดแอนิเมชั่นการเปลี่ยนหน้า
• ทดสอบการทำงานกับโปรโตไทป์

Section 10: Workshop ออกแบบ Mobile App ใน Figma

• เตรียมรูปภาพ ไอคอนและ asset ต่างๆ ที่จำเป็นต้องใช้
• ติดตั้ง Plugin ที่จำเป็นต้องใช้
• สร้างชิ้นงานใหม่เลือก Frame เป็น Mobile Application
• สร้างหน้า Welcome Screen
• สร้างหน้า Home Screen
• สร้างหน้า Detail Screen
• สร้างหน้า User Profile Screen
• เชื่อมโยงหน้าในโหมดโปรโตไทป์
• กำหนดรูปแบบการเปลี่ยนหน้า
• ทดสอบแสดงผลการทำงานในโปรโตไทป์

Section 11: การส่งออกไฟล์ดีไซน์ใน Figma ไปเป็น Code ใน Flutter

• ติดตั้ง Plugin สำหรับ export ไฟล์ figma ไปเป็น flutter dart code
• การเตรียมความพร้อมโปรเจ็กต์ figma ก่อนทำการ export
• ทดสอบ export เป็น dart code เบื้องต้น
• ปรับแต่งโค้ดที่ได้ก่อนนำไปใช้งานใน flutter app

Section 12: การนำโค้ดที่ได้ไปใช้งานใน Flutter

• สร้างโปรเจ็กต์ Flutter App
• นำโค้ดที่ได้จาก figma ไปใช้งานใน flutter app
• ปรับแต่งโค้ด แบ่ง screen ก่อนเริ่มใช้งาน
• ทดสอบรันแอพ flutter เพื่อดูผลลัพธ์ว่าถูกต้องหรือไม่

ตัวอย่าง Workshop ออกแบบ UI/UX ด้วย Figma สำหรับ Flutter