การกำหนดตัว Frame ใน Figma เพื่อกำหนดขนาดของหน้าจอ สำหรับการออกแบบ UI

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

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

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

การกำหนดตัว Frame ใน Figma เพื่อกำหนดขนาดของหน้าจอ สำหรับการออกแบบ UI

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

ใน Figma การจะออกเเบบหน้าต่างของตัวหน้าเว็ปไซต์หรือเเอปพลิเคชั่นเราจะมีการสร้าง UX/UI จะต้องกำหนดรูปแบบของหน้าต่าง เพราะเเต่ละ Device ที่ใช้เเสดงผลนั้นมีขนาดไม่เท่ากัน หรือต้องการจะกำหนดหน้าต่างการเเสดงผลต่างตามใจเรา เราก็จะใช้ตัวฟังก์ชั่น Frame ในการสร้างหน้าต่างเหล่านั้น
การใช้ Frame จะเหมือนกับการสร้างกรอบขึ้นมา แล้วเอาวัตถุใส่ลงไปในนั้น ซึ่งตัวกรอบนั้นจะมีคุณสมบัติต่างๆสามารถปรับเเต่งได้เหมือน Object ทั่วไปเลย

ก่อนอื่นมาลองเริ่มต้นใช้งานตัว Frame กันครับ

1.สร้าง Frame
ก่อนอื่น คลิกที่ เเถบเมนูข้างบน ตามรูปครับ
เริ่มต้นสร้าง Frame
เริ่มต้นสร้าง Frame
bandicam 2021-05-27 12-25-24-114.jpg (9.49 KiB) Viewed 3126 times
เราจะสามารถ เลือกตัว Template ที่ Figma กำหนดมาให้เข้ากับ Device ต่างๆอยู่เเล้วตรงเมนูด้านขวามือตามรูป
Template ต่างๆที่ Figma กำหนดมาให้เข้ากับ Device
Template ต่างๆที่ Figma กำหนดมาให้เข้ากับ Device
bandicam 2021-05-25 11-56-18-188.jpg (26.55 KiB) Viewed 3150 times
หรือเราจะ Custom ขนาดของ Frame ได้เลยโดยการ ลากบน Canvas (Canvas คือ ผืนผ้าใบ ทั้งวลีนี้จึงหมายถึง พื้นที่ ที่ใช้เพื่อนำ Object ต่างๆไปใส่ไว้ในแผ่นๆเดียว ซึ่งจะบรรจุตัว Frame ต่างๆ รวมถึง หน้าต่าง UX/UI ที่เราสร้างขึ้น)
โดยผมจะทำการสร้างตัว Frame ขึ้นมาดังรูปครับ
การสร้างตัว Frame
การสร้างตัว Frame
bandicam 2021-05-27 12-35-18-376.jpg (34.27 KiB) Viewed 3150 times
2.การปรับเเต่ง Frame
โดยจะมีเมนูในการปรับเเต่ง Frame ครับ ตรงเมนูฝั่งขวา
เมนูในการปรับเเต่ง Frame
เมนูในการปรับเเต่ง Frame
bandicam 2021-05-27 12-42-09-974.jpg (8.07 KiB) Viewed 3150 times
ผมจะอธิบายตัวเมนูต่างๆที่อยู่ใน เมนู Frame นะครับ
Potrait คือ การปรับ Frame ของเราให้เป็นเเนวตั้ง
Landscape คือ การปรับ Frame ของเราให้เป็นเเนวนอน
X คือ ตำเเหน่งของ Object อ้างอิงจาก เเกน X(เเนวนอน)
Y คือ ตำเเหน่งของ Object อ้างอิงจากเเกน Y(เเนวตั้ง)
W คือ Width การกำหนดความกว้างของ Object
H คือ Height การกำหนดความสูงของ Object
Rotation คือ การหมุนของ Object โดยจะหมุนตาม องศาที่ระบุ
Corner Radius คือ การปรับมุมของ Object ทุกมุมให้มีความโค้งมนตามที่ระบุ
Independent cornors คือ การปรับมุมของ Object ให้มีความโค้งมนตามที่ระบุ โดยสามารถกำหนดเฉพาะมุมเเต่ละมุมได้
Resize to fit คือ การปรับขนาดของ Frame ให้พอดีกับ Object ที่อยู่ข้างใน
Clip content คือ การปรับการโชว์ของ Object ที่อยู่ข้างนอก Frame ว่าจะให้เเสดงผลหรือไม่

เเละจะมีเมนูที่ชื่อ Layout Grid นะครับ ซึ่งใช้ในการจัดวางตัว Layout ได้อย่างถูกต้อง ซึ่งในการเขียนเว็ปไซต์เราจะใช้ ตัว Grid เนี่ยละครับในอ้างอิงการกำหนดตำเเหน่งบนหน้าเว็ปไซต์ จะช่วยในการกำหนดตำเเหน่งของตัว Object ง่ายขึ้นครับ
เมนู Layout Grid
เมนู Layout Grid
bandicam 2021-05-27 15-44-49-914.jpg (5.45 KiB) Viewed 3141 times
เมื่อกดที่ปุ่ม + เเล้วได้ดังรูปครับ
Layout Grid
Layout Grid
bandicam 2021-05-27 15-46-19-661.jpg (256.9 KiB) Viewed 3141 times
เราจะสามารถปรับเเต่งตัว Grid ได้ตามรูปครับ
เมนูปรับเเต่งตัว Grid
เมนูปรับเเต่งตัว Grid
bandicam 2021-05-27 15-47-48-733.jpg (22.79 KiB) Viewed 3141 times
โดยเราจะปรับขนาดของ Grid ,ปรับให้เเสดงเป็น เเถว หรือ คอลัมน์ หรือจะเปลี่ยนสีก็ได้ครับ

จากตัว Tool ต่างๆเหล่านี้เราจะสามรถนำปรับเเต่งตัว Frame เพื่อใช้ประยุกต์ให้เหมาะสมเข้ากับงานต่างๆได้ครับ ในการสร้างเวปไซต์หรือเเอพพลิเคชั่น Frame คือสิ่งจำเป็นที่จะต้องกำหนดให้ถูกต้องเพื่อการเเสดงผลที่มีประสิทธิภาพของ UX/UI
ที่จะเเสดงผลบนหน้าเว็ปไซต์ให้เข้ากับ Device ของผู้ใช้งานต่างๆซึ่งมีหลากหลายรูปแบบ ถ้าเราจัดการตัว Frame อย่างถูกต้องจะทำให้การเเสดงผลของตัวงานของเรามีประสิทธิภาพตรงตามความต้องการครับ


อ้างอิง
https://docs.merkulov.design/frames-in-figma/
https://blog.uxacademy.in.th/group-vs-frame-%E0%B9%80%E0%B8%A5%E0%B8%B7%E0%B8%AD%E0%B8%81%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B9%84%E0%B8%94%E0%B9%89%E0%B8%94%E0%B8%B5%E0%B8%81%E0%B9%87%E0%B8%97%E0%B8%B3%E0%B8%87%E0%B8%B2%E0%B8%99%E0%B8%87%E0%B9%88%E0%B8%B2%E0%B8%A2%E0%B8%82%E0%B8%B6%E0%B9%89%E0%B8%99-figma-f7354be0999d
https://help.figma.com/hc/en-us/articles/360041539473-Frames-in-Figma
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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