Figma for beginners

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 ออกไปใช้งานจริง