ออกแบบเว็บไซต์ ไม่ต้องเขียนโค้ด
เรียนรู้การออกแบบหน้าเว็บด้วย Figma Sites แบบลากวาง — ทำตามภารกิจไปทีละขั้น
นี่คือหน้าเว็บที่น้องจะออกแบบได้เมื่อทำครบทุกภารกิจ — เลื่อนดูในกรอบได้ทั้งจอคอมและมือถือ
Figma Sites คือเครื่องมือใหม่ของ Figma ที่ให้เรา ออกแบบและเผยแพร่เว็บไซต์จริงได้ในที่เดียว โดยใช้การ ลากวาง แบบที่นักออกแบบมืออาชีพใช้ — ที่สำคัญคือ ไม่ต้องเขียนโค้ดเลย เปิดผ่านเบราว์เซอร์ได้ทันที ไม่ต้องติดตั้งโปรแกรม
💡 หมายเหตุ: Figma Sites เป็นฟีเจอร์ใหม่ (เปิดตัวงาน Config 2025, ยังเป็น Beta) — ทุกบัญชีรวมบัญชีฟรี สร้างและออกแบบ ได้ ส่วนการ เผยแพร่ขึ้นเน็ตจริง (Publish) ต้องใช้แพ็กเกจแบบเสียเงิน
| สิ่งที่เคยคิดว่ายาก | ด้วย Figma Sites |
|---|---|
| ต้องเขียน HTML / CSS เป็นก่อน | ลากวางกล่องและข้อความได้เลย เหมือนทำสไลด์ |
| ต้องติดตั้งโปรแกรมหนักๆ | เปิดในเบราว์เซอร์ผ่านอินเทอร์เน็ต |
| มือถือกับคอมต้องทำแยกกัน | มีมุมมอง Desktop และ Mobile ปรับพร้อมกัน |
• ลำดับสายตา: หัวข้อใหญ่สุด → คำรอง → ปุ่ม (ให้ตามองไล่ลงมาเป็นลำดับ)
• ใช้สีหลัก 2–3 สีพอ อย่าใช้เยอะจนลายตา
• มี "ที่ว่าง" รอบข้อความ ไม่อัดแน่นเกินไป
• ตัวอักษรต้องอ่านชัด ตัดกับพื้นหลัง — พื้นเข้มใช้ตัวอักษรสีอ่อน ลองหรี่ตามองถ้ายังเห็นชัดแปลว่าใช้ได้