Figma ออกแบบเว็บไซต์ สำหรับ Front-End Designers
1. สมัครใช้งานโปรแกรม Figma
เข้าไปที่ https://www.figma.com/ สมัครเข้าใช้งาน
2. เริ่มต้นใช้งานโปรแกรม Figma เลือกขนาดหน้าจอของอุปกรณ์ที่ใช้
เลือก New Design File
เมื่อเข้าหน้างาน ให้เลือก Frame เพื่อทำการเลือกขนาดหน้าจอว่าจะใช้กับ Devices ไหน
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-12.45.25-1024x534.png)
ในที่นี้เลือกใช้ Desktop 1440 x 1024 –> Desktop – 1
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-12.46.48-1024x533.png)
3. เริ่มทำหน้า Website Page 1 ใส่รูป ปรับขนาด และสีของพื้นหลัง
เคล็ดลับวิธีการ Zoom ใช้กดปุ่ม Control ค้าง และ Scroll Mouse กลาง ทำการ Zoom In/Out
ใส่รูป Background ที่ต้องการ สามารถค้นรูปทาง https://www.pexels.com/
รูปที่ใช้ในการทดลอง https://drive.google.com/drive/folders/1yEnuBL7Wm_OZ23705f3TONl9bG41dtVQ?usp=sharing
นำรูปลากมาใส่ในพื้นที่ของงาน ถ้ารูปมีขนาดใหญ่เกินไป สามารถปรับขนาดไปที่มุมแล้วทำการปรับ Size ให้พอดีกับหน้าจอของ Device
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-12.57.08-1024x532.png)
ไปที่ Fill –> ปรับ Image 60% จะทำให้ภาพโปร่งแสงขึ้น
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-13.04.14-1024x534.png)
Save เก็บ Style ไว้ใช้ ไปที่จุดสี่จุด ของ Fill –> กด icon รูป + ตั้งชื่อ Style ว่า dark60 –> กด Create style
การสร้าง Color Style เอาไว้สำหรับช่วยในการปรับสีต่าง ๆ ที่สร้างขึ้นมาเป็นชุด ๆ ไว้ใช้งาน
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-13.08.04-1024x533.png)
ผลลัพธ์ได้ดังนี้
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-13.14.56-1024x532.png)
4. แบ่งส่วนสำหรับจัดวาง Layout
เลือกที่ Desktop – 1 –> ไปที่ Layout grid –> กดจุด 9 ช่อง –> เปลี่ยน Grid เป็น Columns
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-13.16.11-1024x532.png)
ปรับ Column เป็น 6 หลัก และ Gutter เป็นความหนาของเส้น 5 จะขึ้นเส้น Layout Grid ตามรูป ช่วยให้การวางตำแหน่งงานในการออกแบบได้ถูกต้องแม่นยำมากขึ้น
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-13.19.02-1024x533.png)
ผลลัพธ์ที่ได้
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-13.56.27-1024x533.png)
5. สร้างเมนู Navigation Bar ด้านบน
เลือกรูปสี่เหลี่ยม –> Retangle
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-13.58.01-1024x533.png)
ลากเป็นกรอบสี่เหลี่ยม ไว้ตรงด้านบนที่จะเป็น Nav Bar ปรับความสูงเป็น 150 และเปลี่ยนชื่อ Rectangle 1 เป็น Navigation Bar
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-14.02.20-1024x533.png)
ใส่ชื่อเมนู Text ทำการสร้างชื่อเมนู ในที่นี้เป็นชื่อเว็บ GlurGeek ตัวหน้า Bold เลือกชื่อ ชนิด ขนาดเป็น 48 และสี ของ Font จัดวางตำแหน่งให้เหมาะสม
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-14.07.08-1024x532.png)
จัดวางตำแหน่งให้เลือก Text (GlurGeek) และ Navigation Bar ให้กด Control (WIN) หรือ Command (MAC) ค้างแล้วเลือก แล้วไปที่ Alignment ด้านขวาบน ทำการจัดตำแหน่งเมนูให้เหมาะสม
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-14.13.30-1024x533.png)
ทำการปิดตา ของ Navigation Bar
วิธีการดูขอบระยะห่าง เพื่อจะนำไปใช้กำหนด Stylesheet ของ CSS ทำการ Zoom In กดปุ่ม Alt (WIN) หรือ Option (MAC) ค้างไว้ แล้วเอา Mouse ไปชี้ที่ขอบ จะแสดงตัวเลขของระหว่างห่างของแต่ละด้านปรากฏขึ้น
![](https://www.glurgeek.com/wp-content/uploads/2022/03/3-1024x533.jpg)
ใช้ Text สร้างเพิ่มอีก 3 เมนู ได้แก่ About Docs Login ให้สร้างและพิมพ์ทีละ Text
ทำการเลือกทั้ง 3 เมนู กด Control (WIN) ค้าง หรือ กด Shift (MAC) ค้าง เลือกทั้ง 3 เมนู
ทำการปรับสี
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-14.38.44-1024x534.png)
ไปที่ Fill กดจุด 4 จุด –> กด + –> Create Style ชื่อ light เก็บไว้ใช้
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-14.40.06-1024x534.png)
เลือกทั้ง 3 เมนูด้านขวา จัดตำแหน่ง ปรับขนาดใหม่เป็น 36 และกด Control (WIN) หรือ Command (MAC) ตรงชื่อเมนูด้านซ้ายทั้ง Login, Docs, About, Navigation Bar เลือก Alignment ตรงขวาบน ให้อยู่ตรงกลางระหว่างกัน
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-14.46.28-1024x533.png)
สร้าง Rectangle เปลี่ยนสีและไปวางบนเมนู Login
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-14.54.39-1024x532.png)
ด้านซ้ายลาก Login มาไว้บน Rectangle 1 จะเห็นคำว่า Login
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-15.35.02-1024x616.jpg)
ทำการ Group กลุ่มของเมนู แล้ว Right Click –> Group Selection
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-15.38.14-1024x616.jpg)
ตั้งชื่อ Navigator Bar
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-15.40.14-1024x606.jpg)
ทำการ Lock ไว้ไม่ให้แก้ไข
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-15.41.46.png)
6. ใส่รายละเอียดหน้าเว็บไซต์
ใส่ Text เพิ่มเติมรายละเอียดของเว็บไซต์
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-15.52.35-1024x534.jpg)
ใส่ Icon เพิ่มเติมรายละเอียดของเว็บไซต์
ดาวน์โหลด Icon https://www.svgrepo.com/
Icon ที่ใช้ในการทดลอง https://drive.google.com/drive/folders/1yEnuBL7Wm_OZ23705f3TONl9bG41dtVQ?usp=sharing
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-23.20.39-1024x534.jpg)
ทำการ Group รวมกลุ่ม เลือกส่วนของ Icon ที่สร้างขึ้น Right Click –> Group Selection –> ตั้งชื่อ Contact
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-23.24.55-1024x533.jpg)
7. สร้าง Footer กรอบล่าง
ไปที่กรอบสี่เหลี่ยม เลือก Rectangle –> ลากตีกรอบ และแต่งสี ซ้ายล่าง
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-20-at-23.33.48-1024x534.jpg)
ใส่รายละเอียดข้อมูลของ Footer แล้วทำการ Group Selection
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-21-at-06.15.47-1024x533.jpg)
สามารถเปลี่ยนชื่อต่าง ๆ ได้ ผลลัพธ์ที่ได้
![](https://www.glurgeek.com/wp-content/uploads/2022/03/Screen-Shot-2565-03-21-at-06.19.28-1024x532.jpg)
บทเรียนก่อนหน้านี้
1. เรียน NodeJS Back-End Developers (เริ่มสร้าง Back-End Development)
https://www.glurgeek.com/education/startnodejs
คุณอยู่บทเรียนนี้
2. Figma ออกแบบเว็บไซต์ สำหรับ Front-End Designers (เตรียม Front-End Design)
https://www.glurgeek.com/education/figmawebdesigner
บทเรียนถัดไป
3. Figma ออกแบบเว็บไซต์ สำหรับ Front-End Designers (เตรียม Front-End Development)
https://whttps://www.glurgeek.com/education/htmlcssdesigntodev
4. เรียน NodeJS Back-End เชื่อมต่อ EJS HTML CSS Front-End Developments (เขียนให้ Back-End เชื่อมต่อ Front-End Developments)
https://www.glurgeek.com/education/startnodejsandfrontend/