

บทเรียนที่ไม่มีชื่อ
Presentation
•
Computers
•
Vocational training
•
Practice Problem
•
Hard
Wuttipong Komapun
FREE Resource
12 Slides • 0 Questions
1
FIGMA
By Wuttipong Komapun
2
FIGMA คืออะไร?
Figma คือ เครื่องมือออกแบบและสร้างต้นแบบ (Design & Prototyping Tool) ที่ทำงานอยู่บนคลาวด์ (Cloud-based) เป็นหลัก จุดเด่นที่สุดคือ การทำงานร่วมกันแบบเรียลไทม์ (Real-time Collaboration) เปรียบเสมือน Google Docs สำหรับวงการออกแบบ
3
Figma ทำอะไรได้บ้าง?
Figma เป็นเครื่องมือสารพัดประโยชน์ในกระบวนการออกแบบดิจิทัล สามารถใช้ทำงานได้หลากหลายมาก:
ออกแบบ UI (User Interface Design): สร้างหน้าตาของเว็บไซต์และแอปพลิเคชันบนมือถือ ตั้งแต่การวางเลย์เอาต์, เลือกใช้สี, ฟอนต์, ไอคอน และองค์ประกอบต่างๆ
สร้างต้นแบบ (Interactive Prototyping): สามารถเชื่อมโยงหน้าดีไซน์ต่างๆ เข้าด้วยกันเพื่อสร้างเป็น "ต้นแบบ" ที่สามารถคลิกโต้ตอบได้จริง ทำให้เห็นภาพการทำงานของเว็บ/แอปก่อนจะนำไปเขียนโค้ด
4
สร้างระบบการออกแบบ (Design System): ออกแบบ "Component" ที่นำกลับมาใช้ซ้ำได้ เช่น ปุ่ม, แถบเมนู, การ์ดสินค้า เพื่อให้งานออกแบบทั้งหมดมีมาตรฐานและสอดคล้องกัน
Figma ทำอะไรได้บ้าง?
5
นี่คือจุดแข็งที่สุด ทุกคนในทีมสามารถเห็นการเปลี่ยนแปลงและเข้ามาแสดงความคิดเห็นได้ทันที ลดความซับซ้อนในการส่งไฟล์ไปมา
ทำงานร่วมกันแบบ Real-Time
เพราะทำงานบนเบราว์เซอร์เป็นหลัก จึงสามารถเปิดใช้งานได้จากคอมพิวเตอร์ทุกเครื่อง (Windows, Mac, Linux) โดยไม่ต้องติดตั้งโปรแกรมหนักๆ
เข้าถึงได้ทุกที่ ทุกอุปกรณ์
สำหรับบุคคลทั่วไป, นักเรียน, หรือทีมขนาดเล็ก แพ็กเกจฟรีของ Figma ก็มีฟังก์ชันที่เพียงพอต่อการใช้งานส่วนใหญ่แล้ว
แพ็กเกจฟรีที่ทรงพลังมาก
6
ไม่ต้องสลับไปใช้โปรแกรมอื่นเพื่อทำ Prototype สามารถออกแบบและสร้างต้นแบบที่โต้ตอบได้จบในที่เดียว
สร้างต้นแบบ (Prototype) ได้ในตัว
มี "Figma Community" ที่ผู้ใช้ทั่วโลกแบ่งปันไฟล์ดีไซน์, ปลั๊กอิน (Plugin) และเทมเพลตให้ใช้งานฟรีมากมาย ช่วยให้ทำงานได้เร็วขึ้น
คอมมูนิตี้ที่แข็งแกร่งและมีทรัพยากรเยอะ
ปัจจุบันบริษัทเทคโนโลยีและสตาร์ทอัพส่วนใหญ่เลือกใช้ Figma เป็นเครื่องมือหลักในการออกแบบผลิตภัณฑ์ดิจิทัล
เป็นเครื่องมือมาตรฐานของวงการ
7
-ต้องเชื่อมต่ออินเทอร์เน็ตเป็นหลัก
-อาจทำงานช้ากับไฟล์ขนาดใหญ่
-มี Learning Curve สำหรับฟีเจอร์ขั้นสูง
-ไม่เหมาะกับงานออกแบบสิ่งพิมพ์
ข้อเสียของ Figma
8
Figma มีประโยชน์อย่างยิ่งสำหรับ:
ใช้ในการดูสเปกดีไซน์, วัดระยะห่าง, ดูค่าสี และ Export รูปภาพ (Assets) เพื่อนำไปใช้ในการเขียนโค้ด
นักพัฒนาเว็บไซต์/แอปพลิเคชัน (Developers)
เป็นเครื่องมือหลักในการทำงานตั้งแต่ต้นจนจบกระบวนการออกแบบ
นักออกแบบ UI/UX (UI/UX Designers)
9
Figma มีประโยชน์อย่างยิ่งสำหรับ:
เป็นเครื่องมือที่ดีที่สุดในการเริ่มต้นเรียนรู้ เพราะเข้าถึงง่ายและมีแหล่งข้อมูลให้ศึกษาเยอะ
นักเรียนและผู้ที่สนใจเรียนด้านการออกแบบ
ใช้ในการดูภาพรวมของดีไซน์, แสดงความคิดเห็น และติดตามความคืบหน้าของงาน
ผู้จัดการผลิตภัณฑ์ (Product Managers)
10
ข้อจำกัดสำคัญที่ต้องรู้
Figma "ไม่ใช่" โปรแกรมสร้างเว็บไซต์: นี่คือข้อจำกัดที่สำคัญที่สุด ผลลัพธ์สุดท้ายจาก Figma คือ "ไฟล์ดีไซน์" หรือ "ต้นแบบที่คลิกได้" ไม่ใช่ เว็บไซต์ที่ออนไลน์ใช้งานได้จริง คุณไม่สามารถกด Publish แล้วได้เว็บไซต์
11
"Figma คือเครื่องมือทรงพลังสำหรับ กระบวนการออกแบบและวางแผน ก่อนการสร้างผลิตภัณฑ์ดิจิทัล เหมาะสำหรับทีมที่ต้องการทำงานร่วมกันอย่างมีประสิทธิภาพเพื่อสร้างสรรค์หน้าตาและประสบการณ์การใช้งานที่ดีที่สุด หากคุณต้องการ "ออกแบบ" เว็บไซต์ Figma คือคำตอบ"
12
จัดทำโดย
วุฒิพงษ์ โขมะพันธ์ ปวส.2/14 เลขที่ 2
สาขา เทคโนโลยีธุรกิจดิจิทัล
FIGMA
By Wuttipong Komapun
Show answer
Auto Play
Slide 1 / 12
SLIDE
Similar Resources on Wayground
10 questions
วิชาการสื่อสาร
Presentation
•
Professional Development
10 questions
รอบ Final : FAQ TrueMoneyWallet
Presentation
•
Professional Development
6 questions
AI กับอาชญากรรมออนไลน์
Presentation
•
KG - University
13 questions
การจัดการไฟล์และ folder
Presentation
•
KG
9 questions
ผลจากการปฏิบัติตนเป็นพลเมืองดี
Presentation
•
Professional Development
9 questions
Malaria
Presentation
•
Professional Development
10 questions
การบริหารการคลังของ อบจ.
Presentation
•
Professional Development
8 questions
จุลินทรีย์สังเคราะห์แสง
Presentation
•
Professional Development
Popular Resources on Wayground
11 questions
Hallway & Bathroom Expectations
Quiz
•
6th - 8th Grade
10 questions
HCS SCI 03 Summer School Assessment 2
Quiz
•
3rd Grade
11 questions
Home Scope
Quiz
•
7th - 8th Grade
12 questions
2026 TAP Technology in the Classroom
Presentation
•
Professional Development
15 questions
HCS SCI 05 Summer School Assessment 2 Review
Quiz
•
5th Grade
15 questions
HCS SCI 04 Summer School Review 2
Quiz
•
4th Grade
59 questions
Geometry Unit 3 Review
Quiz
•
9th - 12th Grade
14 questions
FAST ELA READING SMAPLE TEST MATERIALS
Passage
•
3rd Grade