การทำ Responsiive ใน Figma

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

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

Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
โพสต์: 166
ลงทะเบียนเมื่อ: 07/12/2020 9:33 am

การทำ Responsiive ใน Figma

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

การทำ Responsiive ใน Figma การทำ Responsiive จากหน้าจอใหญ่จากหน้าจอที่เล็กจาก Layout ตัวเดียวกัน
ต้องสร้างเฟรมและกำหนดค่าให้ถูกต้อง ไม่งั้นจะไม่สามารถเป็นResponsiiveได้
ใส่รูปภาพที่วัตถุ
ใส่รูปภาพที่วัตถุ
respon1.png (7.19 KiB) Viewed 1504 times
- ไปคลิกเครื่องหมายบวกที่แถบ Layout Grid เลือก Columns
สร้าง Layout Grid
สร้าง Layout Grid
respon2.png (39.93 KiB) Viewed 1504 times
- ให้ Count = 13
- ให้ Margin = 120
- ให้ Gutter = 24
กำหนด Layout Grid
กำหนด Layout Grid
respon3.png (44.35 KiB) Viewed 1504 times
- จากกำหนดค่าให้เฟรมแล้วจะเห็นได้ว่า ตรงขอบเฟรมจะได้ 1200x216
แสดงผลการกำหนดค่า
แสดงผลการกำหนดค่า
respon4.png (9.04 KiB) Viewed 1504 times
- สร้างกรอบเพื่อใส่รูปภาพ
สร้างกรอบเพื่อใส่รูปภาพ
สร้างกรอบเพื่อใส่รูปภาพ
respon6.png (156.41 KiB) Viewed 1504 times
- ทำการใส่รูปที่กรอบ
แสดงผล
แสดงผล
respon7.png (170.24 KiB) Viewed 1504 times
- จากการแสดงผลให้เลื่อนดูว่ารูปแบบยังอยู่ที่กรอบที่เราดีไซน์หรือไม่

ใน Figma นั้น ตัว Layout ที่เหมือนกันไม่สามารถตัดลงมาหรือเลื่อนไปจากการที่เราดีไซน์ได้ ถ้าจะทำแบบนั้นเราต้องสร้างอีกรูปแบบเอง
Duanghathai Termtem
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 849
ลงทะเบียนเมื่อ: 30/11/2020 10:24 am

Re: การทำ Responsiive ใน Figma

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

ชื่อบทความไม่สื่อถึงประโยชน์
การใช้ลิงค์เชื่อมซ้ำกัน
ข้อความต้องไม่ต่ำกว่า 1200 ตัวอักษร
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
โพสต์: 166
ลงทะเบียนเมื่อ: 07/12/2020 9:33 am

Re: การทำ Responsive เพื่อให้แสดงผลเต็มหน้าจอและสวยงาม ในโปรแกรม Figma

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

Responsive จะใช้การกำหนดขนาดของเว็บไซต์ด้วย HTML, CSS และ JavaScript ซึ่งจะสามารถปรับขนาดของเว็บไซต์ได้อัตโนมัติตามขนาดของอุปกรณ์ที่ใช้งานอยู่ เมื่อเปิดเว็บไซต์ด้วยหน้าจอคอมพิวเตอร์ โน้ตบุ๊ค หรือจอโทรทัศน์ที่มีขนาดจอกว้าง เว็บไซต์ แบบ Responsive Web Design นี้ก็จะแสดงผลได้อย่างเต็มจอสวยงาม และเมื่อเปิดด้วยแท็บเล็ตที่มีหน้าจอขนาดเล็กลงมา เว็บไซต์ก็ยังสามารถปรับขนาดตามได้อย่างพอดี หากเปิดเว็บไซต์ด้วยโทรศัพท์มือถือ ขนาดของเว็บไซต์ก็จะหดแคบลงพอดีกับความกว้างของจอ ทำให้ไม่จำเป็นต้องคอยเลื่อนซ้ายขวาให้วุ่นวาย เพียงแค่เลื่อนลงมาดูส่วนที่เหลือเป็นแนวตั้งเท่านั้น อีกทั้งขนาดของตัวหนังสือก็สามารถปรับให้ตัวใหญ่ขึ้นได้อีกด้วยเพื่อให้สะดวกเวลาดูกับอุปกรณ์ที่มีหน้าจอเล็กๆ แต่การทำ Responsive ในโปรแกรม Figma นี้จะเป็นการกำหนดค่า Grid Bootstarp โดยไม่ต้องใช้โค้ดอะไรเลย การทำ Responsive ใน Figma การทำ Responsive จากหน้าจอใหญ่จากหน้าจอที่เล็กจาก Layout ตัวเดียวกันต้องสร้างเฟรมและกำหนดค่าให้ถูกต้อง ไม่งั้นจะไม่สามารถเป็นResponsiiveได้
ใส่รูปภาพที่วัตถุ
ใส่รูปภาพที่วัตถุ
respon1.png (7.19 KiB) Viewed 1462 times
- ไปคลิกเครื่องหมายบวกที่แถบ Layout Grid เลือก Columns
สร้าง Layout Grid
สร้าง Layout Grid
respon2.png (39.93 KiB) Viewed 1462 times
- ให้ Count = 13
- ให้ Margin = 120
- ให้ Gutter = 24
กำหนด Layout Grid
กำหนด Layout Grid
respon3.png (44.35 KiB) Viewed 1462 times
- จากกำหนดค่าให้เฟรมแล้วจะเห็นได้ว่า ตรงขอบเฟรมจะได้ 1200x216
แสดงผลการกำหนดค่า
แสดงผลการกำหนดค่า
respon4.png (9.04 KiB) Viewed 1462 times
- สร้างกรอบเพื่อใส่รูปภาพ
สร้างกรอบเพื่อใส่รูปภาพ
สร้างกรอบเพื่อใส่รูปภาพ
respon6.png (156.41 KiB) Viewed 1462 times
- ทำการใส่รูปที่กรอบ
แสดงผล
แสดงผล
respon7.png (170.24 KiB) Viewed 1462 times
- จากการแสดงผลให้เลื่อนดูว่ารูปแบบยังอยู่ที่กรอบที่เราดีไซน์หรือไม่

ใน Figma นั้น ตัว Layout ที่เหมือนกันไม่สามารถตัดลงมาหรือเลื่อนไปจากการที่เราดีไซน์ได้ ถ้าจะทำแบบนั้นเราต้องสร้างอีกรูปแบบเอง
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
โพสต์: 166
ลงทะเบียนเมื่อ: 07/12/2020 9:33 am

Re: การทำ Responsiive ใน Figma

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

Duanghathai Termtem เขียน: 23/12/2020 1:09 pm ชื่อบทความไม่สื่อถึงประโยชน์
การใช้ลิงค์เชื่อมซ้ำกัน
ข้อความต้องไม่ต่ำกว่า 1200 ตัวอักษร
แก้ไขแล้วค่ะ
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

สมาชิกกำลังดูบอร์ดนี้: Google [Bot] และบุคลทั่วไป 70