การทำ Responsiive ใน Figma การทำ Responsiive จากหน้าจอใหญ่จากหน้าจอที่เล็กจาก Layout ตัวเดียวกัน
ต้องสร้างเฟรมและกำหนดค่าให้ถูกต้อง ไม่งั้นจะไม่สามารถเป็นResponsiiveได้
- ไปคลิกเครื่องหมายบวกที่แถบ Layout Grid เลือก Columns
- ให้ Count = 13
- ให้ Margin = 120
- ให้ Gutter = 24
- จากกำหนดค่าให้เฟรมแล้วจะเห็นได้ว่า ตรงขอบเฟรมจะได้ 1200x216
- สร้างกรอบเพื่อใส่รูปภาพ
- ทำการใส่รูปที่กรอบ
- จากการแสดงผลให้เลื่อนดูว่ารูปแบบยังอยู่ที่กรอบที่เราดีไซน์หรือไม่
ใน Figma นั้น ตัว Layout ที่เหมือนกันไม่สามารถตัดลงมาหรือเลื่อนไปจากการที่เราดีไซน์ได้ ถ้าจะทำแบบนั้นเราต้องสร้างอีกรูปแบบเอง
การทำ Responsiive ใน Figma
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
-
- PHP Super Hero Member
- โพสต์: 849
- ลงทะเบียนเมื่อ: 30/11/2020 10:24 am
Re: การทำ Responsiive ใน Figma
ชื่อบทความไม่สื่อถึงประโยชน์
การใช้ลิงค์เชื่อมซ้ำกัน
ข้อความต้องไม่ต่ำกว่า 1200 ตัวอักษร
การใช้ลิงค์เชื่อมซ้ำกัน
ข้อความต้องไม่ต่ำกว่า 1200 ตัวอักษร
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
Re: การทำ Responsive เพื่อให้แสดงผลเต็มหน้าจอและสวยงาม ในโปรแกรม Figma
Responsive จะใช้การกำหนดขนาดของเว็บไซต์ด้วย HTML, CSS และ JavaScript ซึ่งจะสามารถปรับขนาดของเว็บไซต์ได้อัตโนมัติตามขนาดของอุปกรณ์ที่ใช้งานอยู่ เมื่อเปิดเว็บไซต์ด้วยหน้าจอคอมพิวเตอร์ โน้ตบุ๊ค หรือจอโทรทัศน์ที่มีขนาดจอกว้าง เว็บไซต์ แบบ Responsive Web Design นี้ก็จะแสดงผลได้อย่างเต็มจอสวยงาม และเมื่อเปิดด้วยแท็บเล็ตที่มีหน้าจอขนาดเล็กลงมา เว็บไซต์ก็ยังสามารถปรับขนาดตามได้อย่างพอดี หากเปิดเว็บไซต์ด้วยโทรศัพท์มือถือ ขนาดของเว็บไซต์ก็จะหดแคบลงพอดีกับความกว้างของจอ ทำให้ไม่จำเป็นต้องคอยเลื่อนซ้ายขวาให้วุ่นวาย เพียงแค่เลื่อนลงมาดูส่วนที่เหลือเป็นแนวตั้งเท่านั้น อีกทั้งขนาดของตัวหนังสือก็สามารถปรับให้ตัวใหญ่ขึ้นได้อีกด้วยเพื่อให้สะดวกเวลาดูกับอุปกรณ์ที่มีหน้าจอเล็กๆ แต่การทำ Responsive ในโปรแกรม Figma นี้จะเป็นการกำหนดค่า Grid Bootstarp โดยไม่ต้องใช้โค้ดอะไรเลย การทำ Responsive ใน Figma การทำ Responsive จากหน้าจอใหญ่จากหน้าจอที่เล็กจาก Layout ตัวเดียวกันต้องสร้างเฟรมและกำหนดค่าให้ถูกต้อง ไม่งั้นจะไม่สามารถเป็นResponsiiveได้
- ไปคลิกเครื่องหมายบวกที่แถบ Layout Grid เลือก Columns
- ให้ Count = 13
- ให้ Margin = 120
- ให้ Gutter = 24 - จากกำหนดค่าให้เฟรมแล้วจะเห็นได้ว่า ตรงขอบเฟรมจะได้ 1200x216 - สร้างกรอบเพื่อใส่รูปภาพ - ทำการใส่รูปที่กรอบ - จากการแสดงผลให้เลื่อนดูว่ารูปแบบยังอยู่ที่กรอบที่เราดีไซน์หรือไม่
ใน Figma นั้น ตัว Layout ที่เหมือนกันไม่สามารถตัดลงมาหรือเลื่อนไปจากการที่เราดีไซน์ได้ ถ้าจะทำแบบนั้นเราต้องสร้างอีกรูปแบบเอง
- ให้ Margin = 120
- ให้ Gutter = 24 - จากกำหนดค่าให้เฟรมแล้วจะเห็นได้ว่า ตรงขอบเฟรมจะได้ 1200x216 - สร้างกรอบเพื่อใส่รูปภาพ - ทำการใส่รูปที่กรอบ - จากการแสดงผลให้เลื่อนดูว่ารูปแบบยังอยู่ที่กรอบที่เราดีไซน์หรือไม่
ใน Figma นั้น ตัว Layout ที่เหมือนกันไม่สามารถตัดลงมาหรือเลื่อนไปจากการที่เราดีไซน์ได้ ถ้าจะทำแบบนั้นเราต้องสร้างอีกรูปแบบเอง
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
Re: การทำ Responsiive ใน Figma
แก้ไขแล้วค่ะDuanghathai Termtem เขียน: ↑23/12/2020 1:09 pm ชื่อบทความไม่สื่อถึงประโยชน์
การใช้ลิงค์เชื่อมซ้ำกัน
ข้อความต้องไม่ต่ำกว่า 1200 ตัวอักษร
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
- 3 ตอบกลับ
- 2074 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 5:41 pm
-
- 3 ตอบกลับ
- 2871 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 5:08 pm
-
- 0 ตอบกลับ
- 817 แสดง
-
โพสต์ล่าสุด โดย pataponnew
25/05/2021 10:09 am
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: Google [Bot] และบุคลทั่วไป 70