

บทเรียนที่ไม่มีชื่อ
Presentation
•
Computers
•
Vocational training
•
Practice Problem
•
Hard
Wuttipong Komapun
FREE Resource
12 Slides • 0 Questions
1
By Wuttipong Komapun
2
Figma คือ เครื่องมือออกแบบและสร้างต้นแบบ (Design & Prototyping Tool) ที่ทำงานอยู่บนคลาวด์ (Cloud-based) เป็นหลัก จุดเด่นที่สุดคือ การทำงานร่วมกันแบบเรียลไทม์ (Real-time Collaboration) เปรียบเสมือน Google Docs สำหรับวงการออกแบบ
3
Figma เป็นเครื่องมือสารพัดประโยชน์ในกระบวนการออกแบบดิจิทัล สามารถใช้ทำงานได้หลากหลายมาก:
ออกแบบ UI (User Interface Design): สร้างหน้าตาของเว็บไซต์และแอปพลิเคชันบนมือถือ ตั้งแต่การวางเลย์เอาต์, เลือกใช้สี, ฟอนต์, ไอคอน และองค์ประกอบต่างๆ
สร้างต้นแบบ (Interactive Prototyping): สามารถเชื่อมโยงหน้าดีไซน์ต่างๆ เข้าด้วยกันเพื่อสร้างเป็น "ต้นแบบ" ที่สามารถคลิกโต้ตอบได้จริง ทำให้เห็นภาพการทำงานของเว็บ/แอปก่อนจะนำไปเขียนโค้ด
4
สร้างระบบการออกแบบ (Design System): ออกแบบ "Component" ที่นำกลับมาใช้ซ้ำได้ เช่น ปุ่ม, แถบเมนู, การ์ดสินค้า เพื่อให้งานออกแบบทั้งหมดมีมาตรฐานและสอดคล้องกัน
5
นี่คือจุดแข็งที่สุด ทุกคนในทีมสามารถเห็นการเปลี่ยนแปลงและเข้ามาแสดงความคิดเห็นได้ทันที ลดความซับซ้อนในการส่งไฟล์ไปมา
ทำงานร่วมกันแบบ Real-Time
เพราะทำงานบนเบราว์เซอร์เป็นหลัก จึงสามารถเปิดใช้งานได้จากคอมพิวเตอร์ทุกเครื่อง (Windows, Mac, Linux) โดยไม่ต้องติดตั้งโปรแกรมหนักๆ
เข้าถึงได้ทุกที่ ทุกอุปกรณ์
สำหรับบุคคลทั่วไป, นักเรียน, หรือทีมขนาดเล็ก แพ็กเกจฟรีของ Figma ก็มีฟังก์ชันที่เพียงพอต่อการใช้งานส่วนใหญ่แล้ว
แพ็กเกจฟรีที่ทรงพลังมาก
6
ไม่ต้องสลับไปใช้โปรแกรมอื่นเพื่อทำ Prototype สามารถออกแบบและสร้างต้นแบบที่โต้ตอบได้จบในที่เดียว
สร้างต้นแบบ (Prototype) ได้ในตัว
มี "Figma Community" ที่ผู้ใช้ทั่วโลกแบ่งปันไฟล์ดีไซน์, ปลั๊กอิน (Plugin) และเทมเพลตให้ใช้งานฟรีมากมาย ช่วยให้ทำงานได้เร็วขึ้น
คอมมูนิตี้ที่แข็งแกร่งและมีทรัพยากรเยอะ
ปัจจุบันบริษัทเทคโนโลยีและสตาร์ทอัพส่วนใหญ่เลือกใช้ Figma เป็นเครื่องมือหลักในการออกแบบผลิตภัณฑ์ดิจิทัล
เป็นเครื่องมือมาตรฐานของวงการ
7
-ต้องเชื่อมต่ออินเทอร์เน็ตเป็นหลัก
-อาจทำงานช้ากับไฟล์ขนาดใหญ่
-มี Learning Curve สำหรับฟีเจอร์ขั้นสูง
-ไม่เหมาะกับงานออกแบบสิ่งพิมพ์
ข้อเสียของ Figma
8
ใช้ในการดูสเปกดีไซน์, วัดระยะห่าง, ดูค่าสี และ Export รูปภาพ (Assets) เพื่อนำไปใช้ในการเขียนโค้ด
นักพัฒนาเว็บไซต์/แอปพลิเคชัน (Developers)
เป็นเครื่องมือหลักในการทำงานตั้งแต่ต้นจนจบกระบวนการออกแบบ
นักออกแบบ UI/UX (UI/UX Designers)
9
เป็นเครื่องมือที่ดีที่สุดในการเริ่มต้นเรียนรู้ เพราะเข้าถึงง่ายและมีแหล่งข้อมูลให้ศึกษาเยอะ
นักเรียนและผู้ที่สนใจเรียนด้านการออกแบบ
ใช้ในการดูภาพรวมของดีไซน์, แสดงความคิดเห็น และติดตามความคืบหน้าของงาน
ผู้จัดการผลิตภัณฑ์ (Product Managers)
10
ข้อจำกัดสำคัญที่ต้องรู้
Figma "ไม่ใช่" โปรแกรมสร้างเว็บไซต์: นี่คือข้อจำกัดที่สำคัญที่สุด ผลลัพธ์สุดท้ายจาก Figma คือ "ไฟล์ดีไซน์" หรือ "ต้นแบบที่คลิกได้" ไม่ใช่ เว็บไซต์ที่ออนไลน์ใช้งานได้จริง คุณไม่สามารถกด Publish แล้วได้เว็บไซต์
11
12
วุฒิพงษ์ โขมะพันธ์ ปวส.2/14 เลขที่ 2
สาขา เทคโนโลยีธุรกิจดิจิทัล
By Wuttipong Komapun
Show answer
Auto Play
Slide 1 / 12
SLIDE
Similar Resources on Wayground
5 questions
คำถามกวน ๆ ฮา ๆ บั่นทอนสติปัญญา
Presentation
•
KG
4 questions
แบบเรียนที่ 1
Presentation
•
Professional Development
10 questions
การบริการอาหารและเครื่องดื่ม10ข้อ
Presentation
•
KG - University
10 questions
บทเรียนออนไลน์จังหวัดเชียงใหม่
Presentation
•
KG - University
11 questions
ธาตุและ สารประกอบ
Presentation
•
7th Grade
11 questions
สร้างทีมวิทยากร
Presentation
•
Professional Development
11 questions
การตัดสินใจเชิงจริยธรรม
Presentation
•
Professional Development
13 questions
ปัญหาทางพฤติกรรมหรืออารมณ์
Presentation
•
KG
Popular Resources on Wayground
10 questions
Safety Day 2026 – Student Review
Quiz
•
9th Grade
21 questions
Continents and Oceans
Quiz
•
6th Grade
20 questions
Parts of Speech
Quiz
•
5th Grade
16 questions
Subject & Predicate
Quiz
•
5th Grade
25 questions
Multiplication Facts
Quiz
•
5th Grade
12 questions
Map Skills
Quiz
•
3rd Grade
22 questions
Continents and Oceans
Quiz
•
5th Grade
15 questions
Rounding Decimals
Quiz
•
5th Grade