Figma เป็นโปรเเกรมสร้างตัว Prototype สำหรับออกเเบบหน้าUI/UX นั่นก็คือในส่วนของหน้าเเสดงผลของเว็ปไซต์/เเอปพลิเคชั่น ที่ใช้งานง่าย สะดวก สามารถใช้งานได้ผ่านทางตัว Web Browser ได้เลยนะครับ
โดยในกระทู้นี้ผมจะมาเเนะนำวิธีการใช้ตัว Figma กันนะครับ
อันดับเเรก เข้าเว็ปไซต์ www.figma.com
จากนั้นคลิกที่ SIGNUP หรือ Try up for free ได้เลยครับ
จากนั้นจะมีหน้าต่างเด้งขึ้นมาดังรูปครับ
โดยถ้าเรามี Account ของ ตัว Google อยู่เเล้ว จะสามารถใช้ตัว Google Account ของเราในการล็อคอินได้เลยครับ เเต่ถ้าไม่มีหรือไม่ต้องการใช้ Google Account ก็สามารถใช้ E-mail ในการสมัครสมาชิกได้ครับ
เมื่อทำการล็อคอินตัว Figma เข้ามาเเล้วก็จะเข้ามาหน้านี้ครับ
โดยจะทำการเเสดงบอร์ด Draft งานของเราที่ทำการสร้างหรือทีมที่เราอยู่ เเละยังมีตัวอย่าง template ของ prototyping เเละ wire framing อีกด้วย
เราจะทำการสร้างโปรเจ็คใหม่โดยการคลิกที่ปุ่ม New ดังรูป
โดยจะมีปุ่มต่างๆ Design file คือ การสร้างไฟล์ดีไซน์ใหม่ของเรา FigJam file จะเป็นการสร้างไวท์บอร์ดให้ผู้พัฒนาใช้ระดมความคิดเห็นต่างๆ Import เราจะสามารถนำไฟล์งานที่มีอยู่เเล้วนำมาใส่ใน Figma ของเราได้ เเละ Browse template จะมี template ต่างๆให้เลือกสร้างได้เลย
โดยเริ่มต้นผมจะคลิกที่ Design file ครับ จะได้หน้าต่างดังรูป
ตรงเเถบเมนูข้างบนจะมีเมนูต่างๆให้เลือกใช้ดังนี้
1.Main Menu ไว้ใช้จัดการกับตัว Figma ไฟล์ต่างๆ
2.Move ใช้เลือกหรือลากคลุมชิ้นส่วนต่างๆ
3.Frame สร้างพื้นที่สำหรับออกเเบบขนาดของเว็ปไซต์
4.Ractangle สร้างรูปร่างต่างๆ
5.Pen ใช้วาดเส้นต่างๆ
6.Text ใส่ตัวอักษร
7.Hand Tool ขยับมุมมอง
8.Add Comment ใส่คอมเม้นให้กับชิ้นงาน
เเถบเมนูตรงนี้เราจะใช้ในการสร้างตัวหน้าจอออกเเบบตัว UX/UI ครับ จะเห็นได้ว่า มี Tool หลายอย่างให้ได้ใช้เเละยังมีหลาย Tool ที่ยังมีตัว Tool เเยกย่อยออกมาอีก ช่วยอำนวนความสะดวกในการเขียนเว็ปไซต์ด้วย PHP หรือ ภาษาอื่นๆครับ
อ้างอิง
https://terrynut.medium.com/ep-38-%E0%B9%81%E0%B8%99%E0%B8%B0%E0%B8%99%E0%B8%B3%E0%B9%83%E0%B8%8A%E0%B9%89-figma-%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B9%82%E0%B8%87%E0%B9%88%E0%B9%86-%E0%B8%89%E0%B8%9A%E0%B8%B1%E0%B8%9A%E0%B8%84%E0%B8%99%E0%B8%87%E0%B8%A1%E0%B9%80%E0%B8%AD%E0%B8%87-1cfe64ded5ff
https://inbound.cipher.co.th/2020/02/22/%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B9%80%E0%B8%AB%E0%B8%A1%E0%B8%B2%E0%B8%B0%E0%B8%AA%E0%B8%B3%E0%B8%AB%E0%B8%A3%E0%B8%B1%E0%B8%9Auxui-designer/
การใช้งาน Figma เบื้องต้น
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP Hero Member
- โพสต์: 152
- ลงทะเบียนเมื่อ: 03/05/2021 10:18 am
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
- 3 ตอบกลับ
- 2074 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 5:41 pm
-
- 0 ตอบกลับ
- 817 แสดง
-
โพสต์ล่าสุด โดย pataponnew
25/05/2021 10:09 am
-
- 3 ตอบกลับ
- 2870 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 5:08 pm
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 53