ใน Figma การจะออกเเบบหน้าต่างของตัวหน้าเว็ปไซต์หรือเเอปพลิเคชั่นเราจะมีการสร้าง UX/UI จะต้องกำหนดรูปแบบของหน้าต่าง เพราะเเต่ละ Device ที่ใช้เเสดงผลนั้นมีขนาดไม่เท่ากัน หรือต้องการจะกำหนดหน้าต่างการเเสดงผลต่างตามใจเรา เราก็จะใช้ตัวฟังก์ชั่น Frame ในการสร้างหน้าต่างเหล่านั้น
การใช้ Frame จะเหมือนกับการสร้างกรอบขึ้นมา แล้วเอาวัตถุใส่ลงไปในนั้น ซึ่งตัวกรอบนั้นจะมีคุณสมบัติต่างๆสามารถปรับเเต่งได้เหมือน Object ทั่วไปเลย
ก่อนอื่นมาลองเริ่มต้นใช้งานตัว Frame กันครับ
1.สร้าง Frame
ก่อนอื่น คลิกที่ เเถบเมนูข้างบน ตามรูปครับ
เราจะสามารถ เลือกตัว Template ที่ Figma กำหนดมาให้เข้ากับ Device ต่างๆอยู่เเล้วตรงเมนูด้านขวามือตามรูป
หรือเราจะ Custom ขนาดของ Frame ได้เลยโดยการ ลากบน Canvas (Canvas คือ ผืนผ้าใบ ทั้งวลีนี้จึงหมายถึง พื้นที่ ที่ใช้เพื่อนำ Object ต่างๆไปใส่ไว้ในแผ่นๆเดียว ซึ่งจะบรรจุตัว Frame ต่างๆ รวมถึง หน้าต่าง UX/UI ที่เราสร้างขึ้น)
โดยผมจะทำการสร้างตัว Frame ขึ้นมาดังรูปครับ
2.การปรับเเต่ง Frame
โดยจะมีเมนูในการปรับเเต่ง Frame ครับ ตรงเมนูฝั่งขวา
ผมจะอธิบายตัวเมนูต่างๆที่อยู่ใน เมนู 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 ง่ายขึ้นครับ
เมื่อกดที่ปุ่ม + เเล้วได้ดังรูปครับ
เราจะสามารถปรับเเต่งตัว Grid ได้ตามรูปครับ
โดยเราจะปรับขนาดของ 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
การกำหนดตัว Frame ใน Figma เพื่อกำหนดขนาดของหน้าจอ สำหรับการออกแบบ UI
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP Hero Member
- โพสต์: 152
- ลงทะเบียนเมื่อ: 03/05/2021 10:18 am
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ การเคลื่อนไหวแบบ frame by frame (เฟรม บาย เฟรม)
โดย natnicha001 » 04/09/2017 11:35 am » ใน Graphic design - 0 ตอบกลับ
- 2046 แสดง
-
โพสต์ล่าสุด โดย natnicha001
04/09/2017 11:35 am
-
-
- 0 ตอบกลับ
- 848 แสดง
-
โพสต์ล่าสุด โดย Wallapa
18/12/2017 6:59 pm
-
-
โพสต์ใหม่ การใช้งาน Session ในการทำหน้า Login ใน Flask Frame
โดย ewqolf » 25/11/2022 1:38 pm » ใน Python Knowledge - 0 ตอบกลับ
- 769 แสดง
-
โพสต์ล่าสุด โดย ewqolf
25/11/2022 1:38 pm
-
-
-
โพสต์ใหม่ การใช้งาน Python GUI (Tkinter) : Tkinter Frame (วิตเจ็ตเฟรม)
โดย Jom07 » 09/03/2018 5:07 pm » ใน Python Knowledge - 0 ตอบกลับ
- 4136 แสดง
-
โพสต์ล่าสุด โดย Jom07
09/03/2018 5:07 pm
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 3