การใช้ฟังก์ชั่น Shape ในการสร้าง Object ต่างๆ บน Figma

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

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

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

การใช้ฟังก์ชั่น Shape ในการสร้าง Object ต่างๆ บน Figma

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

Shape หมายความว่า รูปร่าง รูปทรงต่างๆ ซึ่งใน Figma เราจะใช้ฟังก์ชั่น Shape ในการสร้าง Object หรือวัตถุต่างๆบนหน้าต่างของเรา ในการดีไซน์หน้าเว็ปไซต์หรือเเอพพลิเคชั่นจำเป็นจะต้องมีตัว Object ต่างๆที่ทำให้เกิด Action กับตัวผู้ใช้งานเเละตัวเว็ปไซต์/เเอพพลิเคชั่นของเราหรือเรียกอีกอย่างคือ UX/UI เช่น ปุ่มต่างๆ รูปภาพ สไลด์ เป็นต้น โดยตัวฟังก์ชั่น Shape บน Figma จะมีเเยกย่อยออกมาตามรูปดังนี้
bandicam 2021-05-27 17-48-54-329.jpg
bandicam 2021-05-27 17-48-54-329.jpg (20.58 KiB) Viewed 1981 times
Rectangle คือการสร้าง รูปสี่เหลี่ยม
Line คือการสร้าง เส้น
Arrow คือการสร้าง ลูกศร
Ellipse คือการสร้าง วงกลม
Polygon คือการสร้าง รูปสามเหลี่ยม
Star คือการสร้าง รูปดาว
Place image คือการใส่รูปนะครับ
เราจะมาทดลองสร้างทุกรูปแบบ โดยการคลิกที่ฟังก์ชั่นต่างๆ
จะได้ดังรูป
bandicam 2021-05-27 17-56-19-462.jpg
โดย Object ต่างๆจะสามารถปรับขนาดได้โดยการลากขยายตามมุมหรือจะใช้ เมนูดังรูป
bandicam 2021-05-27 17-58-53-797.jpg
bandicam 2021-05-27 17-58-53-797.jpg (4.12 KiB) Viewed 1981 times
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 เเล้วเปลี่ยนสีตามเเต่ต้องการ
bandicam 2021-05-27 18-01-44-198.jpg
bandicam 2021-05-27 18-01-44-198.jpg (25.39 KiB) Viewed 1981 times
โดยเมนู Fill จะมีฟังก์ชั่นการเพิ่มสีรูปเเบบต่างๆให้กับตัว Object ของเรานะครับ
โดยการคลิกปุ่ม + บนเมนู fill ดังรูป
bandicam 2021-05-27 18-05-48-264.jpg
จะเห็นได้ว่า Object ของเรามีการเปลี่ยนเเปลงนะครับ โดยจะมีรูปเเบบต่างๆในการจัดการกับสีบนตัว Object ของเราดังนี้ครับ
bandicam 2021-05-27 18-08-09-061.jpg
bandicam 2021-05-27 18-08-09-061.jpg (35.41 KiB) Viewed 1981 times
เมนู Stroke คือการสร้างกรอบให้กับ Object ของเราครับ
bandicam 2021-05-27 18-10-54-539.jpg
bandicam 2021-05-27 18-10-54-539.jpg (4.84 KiB) Viewed 1981 times
โดยจะสามารถเลือกสีของกรอบ ขนาดของกรอบ สร้างกรอบด้านในหรือด้านนอก เป็นต้นครับ
bandicam 2021-05-27 18-12-34-420.jpg
bandicam 2021-05-27 18-12-34-420.jpg (30.08 KiB) Viewed 1981 times
ใน 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
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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