การใช้งานเบื้องต้นของโปรแกรมออกแบบหน้าจอ Figma
Figma ออกแบบมาเพื่อช่วยงาน Design ตั้งแต่ก่อนเริ่มต้นลงมือออกแบบรวมถึงขั้นตอนทดสอบ พูดง่ายๆก็คือใช้งานได้ตั้งแต่วาด
wireframe ไปจน
prototype และ test กับ user ได้เลยโดยแบ่ง Feature การทำงานเป็น 4 ด้านดังนี้
- Collaboration Features
- Design Features
- Prototyping Features
- Design systems features
เรามาดูกันว่าโปรแกรม Figma ใช้งานยังไง
1. ไปที่
https://www.figma.com/downloads/
- หน้าแรกของเว็บไซต์กรณีที่ยังไม่ล็อกอิน
- F1.JPG (74.9 KiB) Viewed 167 times
นี่คือหน้าตาของ Figma ในรูปแบบของเว็บนะคะ
2. ทำการสมัครใช้งาน
- สมัครใช้งาน
- F2.png (79.63 KiB) Viewed 167 times
- กรณีที่เรายังไม่มี Account ต้องกดไปที่ Sing up ก่อน
- กรอกอีเมลและหรัสผ่าน
- ระบบจะส่งข้อความไปยังอีเมลของเราที่นำมากรอก ให้ไปกดยืนยัน
- ขั้นตอนการยืนยัน
- F3.JPG (67.55 KiB) Viewed 167 times
- ใส่ชื่อ และ ระบุว่าเราทำงานแบบไหน
- ติ๊กตรงช่องสี่เหลี่ยม แล้วกลับไปล็อกอินที่หน้าแรก
3. หลังจาก Login แล้วหน้าตาของโปรแกรมก็จะเป็นปนะมาณนี้นะคะ
- หน้าแรกของเว็บไซต์กรณีที่ล็อกอิน
- F4.JPG (61.98 KiB) Viewed 167 times
- ชิ้นงานจะบันทึกบน Clound
- แนะนำฟังก์ชันบันทึกข้อมูล
- F5.png (97.65 KiB) Viewed 167 times
- ตรงที่วงกลมสีเขียวด้านบน คือ การที่เราจะเพิ่มหน้าใหม่
- วิธีแสดงผล
- F6.png (76.28 KiB) Viewed 167 times
- ปุ่มที่วงกลมสีเขียว คือปุ่มแสดงผล
- การแสดงผลบนอุปกรณ์จำลอง
- F7.JPG (74.66 KiB) Viewed 167 times
- การแสดงผลของ Figma เป็นการแสดงผลแบบจำลองโปรแกรม
Figma เป็นโปรแกรมออกแบบ
เว็บไซต์และ
แอปพลิเคชันเราสามารถออกแบบรูปทรง, ใส่แบบข้อความ, ใส่สีใส่พื้นหลังได้ UX/
UI Design ทำได้ตั้งแต่ก่อนเริ่มต้นออกแบบไปจนถึงทำ prototype เลยเมื่อออกแบบเสร็จเราสามารถที่จำลองบนรูปแบบของเว็บไซต์หรือแอปพลิเคชันนั้นได้แต่ไม่สามารถที่จะรันโปรแกรมได้จริงๆ
Log in with LINE
