Search Header Logo
บทเรียนที่ไม่มีชื่อ

บทเรียนที่ไม่มีชื่อ

Assessment

Presentation

Computers

Vocational training

Practice Problem

Hard

Created by

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 สำหรับวงการออกแบบ

media

3

Figma ทำอะไรได้บ้าง?

Figma เป็นเครื่องมือสารพัดประโยชน์ในกระบวนการออกแบบดิจิทัล สามารถใช้ทำงานได้หลากหลายมาก:

  • ออกแบบ UI (User Interface Design): สร้างหน้าตาของเว็บไซต์และแอปพลิเคชันบนมือถือ ตั้งแต่การวางเลย์เอาต์, เลือกใช้สี, ฟอนต์, ไอคอน และองค์ประกอบต่างๆ

  • สร้างต้นแบบ (Interactive Prototyping): สามารถเชื่อมโยงหน้าดีไซน์ต่างๆ เข้าด้วยกันเพื่อสร้างเป็น "ต้นแบบ" ที่สามารถคลิกโต้ตอบได้จริง ทำให้เห็นภาพการทำงานของเว็บ/แอปก่อนจะนำไปเขียนโค้ด

4

สร้างระบบการออกแบบ (Design System): ออกแบบ "Component" ที่นำกลับมาใช้ซ้ำได้ เช่น ปุ่ม, แถบเมนู, การ์ดสินค้า เพื่อให้งานออกแบบทั้งหมดมีมาตรฐานและสอดคล้องกัน

Figma ทำอะไรได้บ้าง?

media

5

media
media
media

นี่คือจุดแข็งที่สุด ทุกคนในทีมสามารถเห็นการเปลี่ยนแปลงและเข้ามาแสดงความคิดเห็นได้ทันที ลดความซับซ้อนในการส่งไฟล์ไปมา

ทำงานร่วมกันแบบ Real-Time

เพราะทำงานบนเบราว์เซอร์เป็นหลัก จึงสามารถเปิดใช้งานได้จากคอมพิวเตอร์ทุกเครื่อง (Windows, Mac, Linux) โดยไม่ต้องติดตั้งโปรแกรมหนักๆ

เข้าถึงได้ทุกที่ ทุกอุปกรณ์

สำหรับบุคคลทั่วไป, นักเรียน, หรือทีมขนาดเล็ก แพ็กเกจฟรีของ Figma ก็มีฟังก์ชันที่เพียงพอต่อการใช้งานส่วนใหญ่แล้ว

แพ็กเกจฟรีที่ทรงพลังมาก

6

media
media
media

ไม่ต้องสลับไปใช้โปรแกรมอื่นเพื่อทำ Prototype สามารถออกแบบและสร้างต้นแบบที่โต้ตอบได้จบในที่เดียว

สร้างต้นแบบ (Prototype) ได้ในตัว

​มี "Figma Community" ที่ผู้ใช้ทั่วโลกแบ่งปันไฟล์ดีไซน์, ปลั๊กอิน (Plugin) และเทมเพลตให้ใช้งานฟรีมากมาย ช่วยให้ทำงานได้เร็วขึ้น

คอมมูนิตี้ที่แข็งแกร่งและมีทรัพยากรเยอะ

​ปัจจุบันบริษัทเทคโนโลยีและสตาร์ทอัพส่วนใหญ่เลือกใช้ Figma เป็นเครื่องมือหลักในการออกแบบผลิตภัณฑ์ดิจิทัล

เป็นเครื่องมือมาตรฐานของวงการ

7

media

-ต้องเชื่อมต่ออินเทอร์เน็ตเป็นหลัก
-อาจทำงานช้ากับไฟล์ขนาดใหญ่
-มี Learning Curve สำหรับฟีเจอร์ขั้นสูง
-ไม่เหมาะกับงานออกแบบสิ่งพิมพ์

ข้อเสียของ Figma

8

media

Figma มีประโยชน์อย่างยิ่งสำหรับ:

ใช้ในการดูสเปกดีไซน์, วัดระยะห่าง, ดูค่าสี และ Export รูปภาพ (Assets) เพื่อนำไปใช้ในการเขียนโค้ด

นักพัฒนาเว็บไซต์/แอปพลิเคชัน (Developers)

เป็นเครื่องมือหลักในการทำงานตั้งแต่ต้นจนจบกระบวนการออกแบบ

นักออกแบบ UI/UX (UI/UX Designers)

9

Figma มีประโยชน์อย่างยิ่งสำหรับ:

เป็นเครื่องมือที่ดีที่สุดในการเริ่มต้นเรียนรู้ เพราะเข้าถึงง่ายและมีแหล่งข้อมูลให้ศึกษาเยอะ

นักเรียนและผู้ที่สนใจเรียนด้านการออกแบบ

ใช้ในการดูภาพรวมของดีไซน์, แสดงความคิดเห็น และติดตามความคืบหน้าของงาน

ผู้จัดการผลิตภัณฑ์ (Product Managers)

10

ข้อจำกัดสำคัญที่ต้องรู้

Figma "ไม่ใช่" โปรแกรมสร้างเว็บไซต์: นี่คือข้อจำกัดที่สำคัญที่สุด ผลลัพธ์สุดท้ายจาก Figma คือ "ไฟล์ดีไซน์" หรือ "ต้นแบบที่คลิกได้" ไม่ใช่ เว็บไซต์ที่ออนไลน์ใช้งานได้จริง คุณไม่สามารถกด Publish แล้วได้เว็บไซต์

media

11

"Figma คือเครื่องมือทรงพลังสำหรับ กระบวนการออกแบบและวางแผน ก่อนการสร้างผลิตภัณฑ์ดิจิทัล เหมาะสำหรับทีมที่ต้องการทำงานร่วมกันอย่างมีประสิทธิภาพเพื่อสร้างสรรค์หน้าตาและประสบการณ์การใช้งานที่ดีที่สุด หากคุณต้องการ "ออกแบบ" เว็บไซต์ Figma คือคำตอบ"

12

จัดทำโดย

media

วุฒิพงษ์ โขมะพันธ์ ปวส.2/14 เลขที่ 2
สาขา เทคโนโลยีธุรกิจดิจิทัล

FIGMA

By Wuttipong Komapun

Show answer

Auto Play

Slide 1 / 12

SLIDE