Shape หมายความว่า รูปร่าง รูปทรงต่างๆ ซึ่งใน Figma เราจะใช้ฟังก์ชั่น Shape ในการสร้าง Object หรือวัตถุต่างๆบนหน้าต่างของเรา ในการดีไซน์หน้าเว็ปไซต์หรือเเอพพลิเคชั่นจำเป็นจะต้องมีตัว Object ต่างๆที่ทำให้เกิด Action กับตัวผู้ใช้งานเเละตัวเว็ปไซต์/เเอพพลิเคชั่นของเราหรือเรียกอีกอย่างคือ UX/UI เช่น ปุ่มต่างๆ รูปภาพ สไลด์ เป็นต้น โดยตัวฟังก์ชั่น Shape บน Figma จะมีเเยกย่อยออกมาตามรูปดังนี้
Rectangle คือการสร้าง รูปสี่เหลี่ยม
Line คือการสร้าง เส้น
Arrow คือการสร้าง ลูกศร
Ellipse คือการสร้าง วงกลม
Polygon คือการสร้าง รูปสามเหลี่ยม
Star คือการสร้าง รูปดาว
Place image คือการใส่รูปนะครับ
เราจะมาทดลองสร้างทุกรูปแบบ โดยการคลิกที่ฟังก์ชั่นต่างๆ
จะได้ดังรูป
โดย Object ต่างๆจะสามารถปรับขนาดได้โดยการลากขยายตามมุมหรือจะใช้ เมนูดังรูป
Potrait คือ การปรับ Frame ของเราให้เป็นเเนวตั้ง
Landscape คือ การปรับ Frame ของเราให้เป็นเเนวนอน
X คือ ตำเเหน่งของ Object อ้างอิงจาก เเกน X(เเนวนอน)
Y คือ ตำเเหน่งของ Object อ้างอิงจากเเกน Y(เเนวตั้ง)
W คือ Width การกำหนดความกว้างของ Object
H คือ Height การกำหนดความสูงของ Object
Rotation คือ การหมุนของ Object โดยจะหมุนตาม องศาที่ระบุ
Corner Radius คือ การปรับมุมของ Object ทุกมุมให้มีความโค้งมนตามที่ระบุ
Independent cornors คือ การปรับมุมของ Object ให้มีความโค้งมนตามที่ระบุ โดยสามารถกำหนดเฉพาะมุมเเต่ละมุมได้
เราจะสามารถเปลี่ยนสีตัว Object ของเราได้ ตรงเมนู Fill เเล้วเปลี่ยนสีตามเเต่ต้องการ
โดยเมนู Fill จะมีฟังก์ชั่นการเพิ่มสีรูปเเบบต่างๆให้กับตัว Object ของเรานะครับ
โดยการคลิกปุ่ม + บนเมนู fill ดังรูป
จะเห็นได้ว่า Object ของเรามีการเปลี่ยนเเปลงนะครับ โดยจะมีรูปเเบบต่างๆในการจัดการกับสีบนตัว Object ของเราดังนี้ครับ
เมนู Stroke คือการสร้างกรอบให้กับ Object ของเราครับ
โดยจะสามารถเลือกสีของกรอบ ขนาดของกรอบ สร้างกรอบด้านในหรือด้านนอก เป็นต้นครับ
ใน Figma การสร้างตัว Shape หรือรูปทรงต่างๆ นับเป็นพื้นฐานการสร้าง UX/UI บนเว็ปไซต์ ที่เราจะต้องออกเเบบเว็ปไซต์ให้เเสดงผลตรงตามความต้องการ เช่นการสร้าง ปุ่ม หรือ การ์ด เพื่อให้การทำงานของเว็ปไซต์มีประสิทธิภาพเเละสามารถทำงานได้ตรงตามเป้าหมายครับ
อ้างอิง
https://help.figma.com/hc/en-us/articles/360040450133-Using-Shape-Tools
https://spidyhero.wordpress.com/2018/12/07/figma-basic/
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
การใช้ฟังก์ชั่น Shape ในการสร้าง Object ต่างๆ บน Figma
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP Hero Member
- โพสต์: 152
- ลงทะเบียนเมื่อ: 03/05/2021 10:18 am
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ สอบถาม บน Canva สามารถไล่สี พวก Shape ได้ไหมครับ
โดย Thanavat_n » 26/08/2022 5:44 pm » ใน Graphic design - 2 ตอบกลับ
- 1233 แสดง
-
โพสต์ล่าสุด โดย Thanavat_n
29/08/2022 9:19 am
-
-
-
โพสต์ใหม่ การสร้างภาพเคลื่อนไหวแบบ Create Shape Tween (ครีเอท เฌพ ทวิน)
โดย natnicha001 » 30/08/2017 5:40 pm » ใน Graphic design - 0 ตอบกลับ
- 1569 แสดง
-
โพสต์ล่าสุด โดย natnicha001
30/08/2017 5:40 pm
-
-
- 3 ตอบกลับ
- 2105 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 5:41 pm
-
- 0 ตอบกลับ
- 854 แสดง
-
โพสต์ล่าสุด โดย pataponnew
25/05/2021 10:09 am
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 61