วิธีการสร้าง Grid Bootstarp ใน Figma

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

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

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

วิธีการสร้าง Grid Bootstarp ใน Figma

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

วิธีการสร้าง Grid Bootstarp ใน Figma
Grid Bootstarp ในโปรแกรม Figma สิ่งคำคัญในการสร้างเส้น Grid ต้องมี 3 อย่างคือ 1. contents 2. Grid Column 3. Gutter
contents คือขนาดความกว้างของหน้าจอ
Grid Column ประกอบประด้วย12ส่วน เรียกว่า Gutter
Gutter จะประกอบไปด้วย 2 ส่วน คือด้านซ้าย กับด้านขวา
วิธีการสร้าง
สร้างเฟรม
สร้างเฟรม
สร้างเฟรม
bootst6.png (6.52 KiB) Viewed 2008 times
- สร้างเฟรมให้มีขนาด 1536x864
กำหนดขนาด 1536x864
กำหนดขนาด 1536x864
bootst7.png (7.92 KiB) Viewed 2008 times
- สร้างกรอบให้มีขนาด 1320x316
สร้างกรอบ
สร้างกรอบ
bootst8.png (19.4 KiB) Viewed 2008 times
- คลิกตรงเฟรม จากนั้นไปคลิกที่เครื่องหมายบากตรงคำว่า Layout Grid
กำหนด Layout Grid
กำหนด Layout Grid
bootst9.png (46.7 KiB) Viewed 2008 times
- เลือกตรง Grid เป็น columns
กำหนดค่า Grid เป็น columns
กำหนดค่า Grid เป็น columns
bootst10.png (42.58 KiB) Viewed 2008 times
- ให้ count = 12
- ให้ type เป็น Center
- ให้ Gutter = 24
กำหนดค่า columns
กำหนดค่า columns
bootst11.png (50.33 KiB) Viewed 2008 times
- คลิกไปปุ่มที่วงกลมสีแดง จากนั้น ให้ width = 88
กำหนดค่า width
กำหนดค่า width
bootst12.png (20.78 KiB) Viewed 2008 times
- คลิกไปที่ปุ่มสไตล์
เพิ่มเฟรม
เพิ่มเฟรม
bootst13.png (48.48 KiB) Viewed 2008 times
- กดเพิ่มตรงเครื่องหมายบวก
- ตั้งชื่อ
ผลการเพิ่มเฟรม
ผลการเพิ่มเฟรม
- จากนั้นสร้างเฟรมใฟม่แล้วทำแบบนี้ไปเรื่อยๆ
การสร้างเส้น Grid เป็นการสร้างเพื่อไปออกแบบ Responsive website หรือเป็นการกำหนดเส้นให้เท่ากับเฟรม เพื่อไม่ให้เกิดการแสดงผลของข้อมูลผิดพลาดนั่นเอง
โดยเราสามารถไปดูขนาดเส้น Grid ที่ https://blog.getbootstrap.com/2020/06/1 ... p-5-alpha/
Duanghathai Termtem
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 849
ลงทะเบียนเมื่อ: 30/11/2020 10:24 am

Re: วิธีการสร้าง Grid Bootstarp ใน Figma

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

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

Re: วิธีการสร้าง Grid Bootstarp สำหรับสร้าง Responsive web sites ในโปรแกรม Figma

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

วิธีการสร้าง Grid Bootstarp สำหรับสร้าง Responsive web sites ในโปรแกรม Figma
Grid Bootstarp ในโปรแกรม Figma สิ่งคำคัญในการสร้างเส้น Grid ต้องมี 3 อย่างคือ 1. contents 2. Grid Column 3. Gutter
contents คือขนาดความกว้างของหน้าจอ
Grid Column ประกอบประด้วย12ส่วน เรียกว่า Gutter
Gutter จะประกอบไปด้วย 2 ส่วน คือด้านซ้าย กับด้านขวา
วิธีการสร้าง
สร้างเฟรม
สร้างเฟรม
สร้างเฟรม
bootst6.png (6.52 KiB) Viewed 1979 times
- สร้างเฟรมให้มีขนาด 1536x864
กำหนดขนาด 1536x864
กำหนดขนาด 1536x864
bootst7.png (7.92 KiB) Viewed 1979 times
- สร้างกรอบให้มีขนาด 1320x316
สร้างกรอบ
สร้างกรอบ
bootst8.png (19.39 KiB) Viewed 1979 times
- คลิกตรงเฟรม จากนั้นไปคลิกที่เครื่องหมายบากตรงคำว่า Layout Grid
กำหนด Layout Grid
กำหนด Layout Grid
bootst9.png (46.7 KiB) Viewed 1979 times
- เลือกตรง Grid เป็น columns
กำหนดค่า Grid เป็น columns
กำหนดค่า Grid เป็น columns
bootst10.png (42.58 KiB) Viewed 1979 times
- ให้ count = 12
- ให้ type เป็น Center
- ให้ Gutter = 24
กำหนดค่า columns
กำหนดค่า columns
bootst11.png (51.44 KiB) Viewed 1979 times
- คลิกไปปุ่มที่วงกลมสีแดง จากนั้น ให้ width = 88
กำหนดค่า width
กำหนดค่า width
bootst12.png (21.24 KiB) Viewed 1979 times
- คลิกไปที่ปุ่มสไตล์
เพิ่มเฟรม
เพิ่มเฟรม
bootst13.png (48.93 KiB) Viewed 1979 times
- กดเพิ่มตรงเครื่องหมายบวก
- ตั้งชื่อ
ผลการเพิ่มเฟรม
ผลการเพิ่มเฟรม
bootst14.png (6.84 KiB) Viewed 1979 times
- จากนั้นสร้างเฟรมใฟม่แล้วทำแบบนี้ไปเรื่อยๆ
การสร้างเส้น Grid เป็นการสร้างเพื่อไป ออกแบบ ให้เป็น Responsive website หรือเป็นการกำหนดเส้นให้เท่ากับเฟรม เพื่อไม่ให้เกิดการแสดงผลของข้อมูลผิดพลาดนั่นเอง
โดยเราสามารถไปดูขนาดเส้น Grid ที่ https://blog.getbootstrap.com/2020/06/1 ... p-5-alpha/
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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