หลักสูตร Figma for Beginners เป็นการอบรมพื้นฐาน UX/UI และการออกแบบหน้าจอเว็บไซต์และ Mobile App ด้วย Figma ตั้งแต่ Wireframe, Styles, Auto Layout และ Components จนถึง Prototype ที่คลิกได้ เหมาะกับผู้เริ่มต้น UX/UI Designer มือใหม่ นักพัฒนา และนักศึกษา จบแล้วออกแบบ Mobile App พร้อม Prototype ได้เอง
Figma กลายเป็นเครื่องมือหลักของทีมออกแบบเว็บไซต์และแอปพลิเคชัน เพราะทำงานบนเบราว์เซอร์หรือแอปเดสก์ท็อปได้ทันที หลายคนแก้ไฟล์เดียวกันพร้อมกันได้ และส่งต่องานให้นักพัฒนาได้จากไฟล์เดียว แต่ผู้เริ่มต้นจำนวนมากใช้ Figma เหมือนโปรแกรมวาดภาพทั่วไป วางวัตถุทีละชิ้นโดยไม่ใช้ Auto Layout, Components หรือ Styles พอต้องแก้งานหรือทำหน้าจอเพิ่มก็ต้องไล่แก้ทีละจุดและงานไม่สม่ำเสมอ
หลักสูตรนี้ปูพื้นฐาน UX/UI และพาใช้ Figma Design อย่างเป็นระบบ ตั้งแต่ Wireframe, Frame, Shape และ Pen Tool การจัดข้อความภาษาไทย สี และภาพด้วย Styles การวาง Layout Grid และ Constraints ไปจนถึง Auto Layout แบบ Wrap และ Grid จากนั้นสร้าง Components พร้อม Variants และ Component Properties ใช้ Variables ทำโหมด Light/Dark สร้าง Prototype ที่คลิกได้เหมือนแอปจริง ใช้ Plugin และ Figma AI อย่างรู้ขอบเขต แล้วปิดท้ายด้วย Workshop ออกแบบ Mobile App ตั้งแต่ Wireframe ถึง Prototype พร้อมแชร์ให้ผู้อื่นทดสอบ (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Beginner)
รายละเอียดหลักสูตร
หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Figma for beginners อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ทุก Section ระดับ Beginner เนื้อหาเขียนใหม่ตามหน้าจอ Figma Design ปัจจุบัน และเพิ่ม Auto Layout แบบ Wrap และ Grid, Component Properties, Variables กับโหมด Light/Dark, Prototype แบบ Overlay และ Smart Animate
และเครื่องมือ Figma AI ผู้เรียนใช้บัญชี Figma ของตนเอง แผน Starter แบบฟรีพอสำหรับ Lab ส่วนใหญ่ ส่วน Dev Mode ไลบรารีของทีม และ AI บางส่วนต้องใช้แผนแบบเสียค่าใช้จ่าย จึงสาธิตให้เห็นภาพรวม ผู้เรียนจะได้เอกสารประกอบการอบรม ไฟล์ตัวอย่าง UI Kit และไฟล์ Mobile App ที่ทำใน Workshop กลับไปใช้งานต่อ
Section 1: พื้นฐาน UX/UI และกระบวนการออกแบบ
Section 2: Lab: เริ่มต้น Figma Design
Section 3: Lab: Shape, Pen Tool, Boolean และ Mask
Section 4: Lab: ข้อความ สี ภาพ และ Styles
Section 5: Lab: Layout Grid และ Constraints
Section 6: Lab: Auto Layout ตั้งแต่พื้นฐานถึง Grid
Section 7: Lab: Components และ Variants
Section 8: Lab: Variables และโหมด Light/Dark
Section 9: Lab: Prototype และ Interaction
Section 10: Plugin, Community และ Figma AI
Section 11: Lab: ทำงานร่วมกันและส่งต่องาน
Section 12: Workshop: ออกแบบ Mobile App ตั้งแต่ Wireframe ถึง Prototype
ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770
UX (User Experience) คือการออกแบบประสบการณ์โดยรวมของผู้ใช้ ตั้งแต่เข้าใจปัญหาและเป้าหมายของผู้ใช้ วางลำดับขั้นตอนการใช้งาน ไปจนถึงทดสอบว่าใช้ง่ายจริงหรือไม่ ส่วน UI (User Interface) คือการออกแบบหน้าตาที่ผู้ใช้เห็นและโต้ตอบ เช่น เลย์เอาต์ สี ตัวอักษร ปุ่ม และไอคอน ทั้งสองต้องทำงานร่วมกัน หลักสูตรนี้จึงเริ่มจาก User Flow และ Wireframe ก่อนลงมือออกแบบหน้าจอจริงใน Figma
Auto Layout ทำให้ Frame จัดเรียงสิ่งที่อยู่ข้างในเองตามทิศทาง ระยะห่าง และ Padding ที่กำหนด เมื่อแก้ข้อความหรือเพิ่มรายการ ขนาดและตำแหน่งจะปรับตามอัตโนมัติ วิธีใช้คือเลือกออบเจกต์แล้วกด Shift+A จากนั้นตั้งทิศทาง ระยะห่าง การจัดแนว และการปรับขนาดแบบ Hug, Fill หรือ Fixed นอกจากแนวนอนและแนวตั้งแล้ว ยังเลือกแบบ Wrap ให้รายการขึ้นบรรทัดใหม่ และแบบ Grid สำหรับเลย์เอาต์สองมิติได้ด้วย
เริ่มจากออกแบบหน้าจอแต่ละหน้าเป็น Frame แล้วเปิดแท็บ Prototype เลือกปุ่มหรือออบเจกต์ที่ต้องการ แล้วลากเส้นเชื่อมไปยัง Frame ปลายทาง กำหนด Trigger เช่น On click และ Action เช่น Navigate to หรือ Open overlay พร้อมเลือกแอนิเมชันอย่าง Smart Animate จากนั้นกด Present เพื่อทดลองใช้งาน แชร์ลิงก์ให้ผู้อื่นทดสอบ หรือเปิดดูบนมือถือผ่านแอป Figma
Components คือชิ้นส่วนหน้าจอที่ใช้ซ้ำได้ เช่น ปุ่ม การ์ด หรือช่องกรอกข้อมูล แก้ที่ Main Component แล้วทุก Instance เปลี่ยนตาม และใช้ Variants เก็บสถานะต่าง ๆ ไว้ในชุดเดียว ส่วน Variables คือค่าที่เก็บไว้ใช้ซ้ำ เช่น สี ระยะห่าง หรือข้อความ และมี Modes ให้สลับชุดค่าได้ เช่น ธีม Light และ Dark ทั้งสองอย่างช่วยให้ไฟล์สม่ำเสมอและแก้ไขได้ในจุดเดียว
เหมาะกับผู้เริ่มต้นที่อยากออกแบบหน้าจอเว็บไซต์หรือ Mobile App, UX/UI Designer มือใหม่ นักพัฒนา Product Owner นักการตลาด และนักศึกษา ไม่จำเป็นต้องมีพื้นฐานการออกแบบมาก่อน ขอเพียงใช้คอมพิวเตอร์และเว็บเบราว์เซอร์ได้คล่อง และมีบัญชี Figma ซึ่งเริ่มต้นได้ด้วยแผน Starter แบบฟรี
ผู้เรียนจะวาง User Flow และ Wireframe ได้ ใช้ Styles, Auto Layout, Components และ Variables วางไฟล์ให้เป็นระบบ ทำหน้าจอที่ยืดหดตามเนื้อหาและสลับโหมด Light/Dark ได้ สร้าง Prototype ที่คลิกได้เหมือนแอปจริงและแชร์ให้ผู้อื่นทดสอบ และได้ไฟล์ Mobile App ที่ออกแบบตั้งแต่ Wireframe ถึง Prototype จาก Workshop เป็นผลงานของตนเอง
เว็บ PHP จำนวนมากเริ่มจากโค้ดแบบ Procedural ที่เขียนเร็วและเข้าใจง่าย แต่เมื่อระบบโตขึ้น ฟังก์ชันกระจายอยู่ทุกไฟล์ SQL ปนกับ HTML และการแก้จุดหนึ่งไปกระทบอีกหลายจุดจนไม่มีใครกล้าแตะ การคิดแบบ Object Oriented ช่วยแบ่งระบบเป็นชิ้นที่มีหน้าที่ชัดเจน…
นักพัฒนาหลายคนสร้างหน้าเว็บที่ทำงานได้ครบ แต่หน้าตายังดูรก อ่านยาก หรือไม่น่าเชื่อถือ และไม่รู้ว่าควรแก้ตรงไหน แนวทาง Refactoring UI ช่วยปิดช่องว่างนี้ด้วยเทคนิคเชิงปฏิบัติจากมุมมองของนักพัฒนา เช่น สร้างลำดับความสำคัญด้วยน้ำหนักและสีแทนการขยายขนาด…
ผู้ที่เขียน Java ได้แล้วจำนวนมากยังเขียนโปรแกรมแบบรวมทุกอย่างไว้ใน Class ใหญ่ไม่กี่ตัว พอระบบโตขึ้นก็แก้ยาก ทดสอบยาก และนำโค้ดกลับมาใช้ซ้ำไม่ได้ การคิดแบบ Object Oriented ที่ถูกต้องช่วยแบ่งความรับผิดชอบของโค้ดให้ชัด และ Java…
