การใช้งาน Figma เบื้องต้น

Graphic design ความรู้สำหรับ การออกแบบ ออกแบบเว็บ Phothoshop ตัดต่อวีดีโอ

Moderator: mindphp, ผู้ดูแลกระดาน

pataponnew
PHP Hero Member
PHP Hero Member
โพสต์: 152
ลงทะเบียนเมื่อ: 03/05/2021 10:18 am

การใช้งาน Figma เบื้องต้น

โพสต์ที่ยังไม่ได้อ่าน โดย pataponnew »

Figma เป็นโปรเเกรมสร้างตัว Prototype สำหรับออกเเบบหน้าUI/UX นั่นก็คือในส่วนของหน้าเเสดงผลของเว็ปไซต์/เเอปพลิเคชั่น ที่ใช้งานง่าย สะดวก สามารถใช้งานได้ผ่านทางตัว Web Browser ได้เลยนะครับ
โดยในกระทู้นี้ผมจะมาเเนะนำวิธีการใช้ตัว Figma กันนะครับ
อันดับเเรก เข้าเว็ปไซต์ www.figma.com
หน้าโฮมเพจ Figma
หน้าโฮมเพจ Figma
Figma-home-1500x900.png (96.42 KiB) Viewed 1186 times
จากนั้นคลิกที่ SIGNUP หรือ Try up for free ได้เลยครับ
เริ่มต้นสมัครสมาชิก
เริ่มต้นสมัครสมาชิก
bandicam 2021-05-25 09-50-30-202.jpg (8.33 KiB) Viewed 1186 times
การเริ่มต้นใช้งาน Figma
การเริ่มต้นใช้งาน Figma
bandicam 2021-05-25 09-50-48-133.jpg (41.03 KiB) Viewed 1186 times
จากนั้นจะมีหน้าต่างเด้งขึ้นมาดังรูปครับ
เริ่มต้นสมัครสมาชิก
เริ่มต้นสมัครสมาชิก
bandicam 2021-05-25 10-26-07-269.jpg (52.73 KiB) Viewed 1186 times
โดยถ้าเรามี Account ของ ตัว Google อยู่เเล้ว จะสามารถใช้ตัว Google Account ของเราในการล็อคอินได้เลยครับ เเต่ถ้าไม่มีหรือไม่ต้องการใช้ Google Account ก็สามารถใช้ E-mail ในการสมัครสมาชิกได้ครับ
เมื่อทำการล็อคอินตัว Figma เข้ามาเเล้วก็จะเข้ามาหน้านี้ครับ
หน้า Page การใช้งาน Figma
หน้า Page การใช้งาน Figma
bandicam 2021-05-25 10-33-02-135.jpg (52.64 KiB) Viewed 1186 times
โดยจะทำการเเสดงบอร์ด Draft งานของเราที่ทำการสร้างหรือทีมที่เราอยู่ เเละยังมีตัวอย่าง template ของ prototyping เเละ wire framing อีกด้วย

เราจะทำการสร้างโปรเจ็คใหม่โดยการคลิกที่ปุ่ม New ดังรูป
การเริ่มต้นสร้างงานใหม่
การเริ่มต้นสร้างงานใหม่
bandicam 2021-05-25 10-45-18-603.jpg (16.16 KiB) Viewed 1186 times
โดยจะมีปุ่มต่างๆ Design file คือ การสร้างไฟล์ดีไซน์ใหม่ของเรา FigJam file จะเป็นการสร้างไวท์บอร์ดให้ผู้พัฒนาใช้ระดมความคิดเห็นต่างๆ Import เราจะสามารถนำไฟล์งานที่มีอยู่เเล้วนำมาใส่ใน Figma ของเราได้ เเละ Browse template จะมี template ต่างๆให้เลือกสร้างได้เลย
โดยเริ่มต้นผมจะคลิกที่ Design file ครับ จะได้หน้าต่างดังรูป
การเริ่มต้นสร้างงานใหม่
การเริ่มต้นสร้างงานใหม่
bandicam 2021-05-25 10-54-28-051.jpg (16.92 KiB) Viewed 1186 times
ตรงเเถบเมนูข้างบนจะมีเมนูต่างๆให้เลือกใช้ดังนี้
เมนูต่างๆของ Figma
เมนูต่างๆของ Figma
bandicam 2021-05-25 10-59-52-085.jpg (9.14 KiB) Viewed 1186 times
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/
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 53