สร้างแผนผังด้วย Figma ฉบับง่ายๆ สไตล์คนทำงาน

สวัสดีครับ วันนี้ผมขอมาแบ่งปันการทำแผนผัง ด้วย Figma กันครับ ที่ให้ใช้งานแบบฟรีๆ และดีไม่แพ้ illustrator เลย ผมจึงลองมาประยุกต์ใช้ด้านแผนที่ Geographic Information System (GIS) กันนะครับ นักภูมิศาสตร์ได้ใช้งานแน่ๆ

บางคนอาจจะเคยได้ยินแล้วว่า แผนผังคืออะไร คลับคล้ายคลับคลากับแผนที่หรือเปล่านะ หรือว่าเหมือนกับแผนผังอาคารต่างๆ หรือเปล่านะ แต่ก่อนอื่นเทียบราคาให้ดูคร่าวๆ นะ แต่เราใช้ตัว Starter ก็เพียงพอแล้ว ใช้งานได้

เนื้อหามีอะไรบ้าง (table of contents)

1. แผนผังคืออะไร
2. แล้วแผนผัง แตกต่าง จากแผนที่อย่างไร ?
3. หลักการออกแบบเบื้องต้น
4. ขั้นตอนการทำ
5. องค์ประกอบที่ควรมี
6. สร้าง QR Code อย่างไร
7. วิธีบันทึก (Save)
8. ผลงานที่เคยทำ
9. ศึกษาเพิ่มเติม

แผนผังคืออะไร

เล่าให้ฟังง่ายๆ อย่างนี้ ในความคิดผม ความหมายของแผนผัง ก็คือ สิ่งที่เราเขียน หรือออกแบบมา แล้วย่อหรือขยาย จากสถานที่นั้นๆ เช่น อาคารสถานที่ ห้องนอน ตำแหน่งที่สนใจ

โดยปรับมุมมองจากภาพที่มองจากด้านบน(Birds Eye View) เพื่อทำให้เข้าใจง่าย มองเห็นบริเวณที่สนใจรวมทั้งบริเวณโดยรอบ

สามารถออกแบบไดทั้ง 2 มิติ หรือ 3 มิติ ก็ได้ (ผมแนะนำเป็น 2 มิติ เพื่อให้สื่อความหมายและมองง่ายกว่า)

แล้วแผนผัง แตกต่าง จากแผนที่อย่างไร ?

แผนที่ ก็ย่อ หรือ ขยาย สิ่งต่างๆ เช่นเดียวกันกับแผนผัง แต่สิ่งที่แตกต่างกันก็คือ แผนที่ต้องมีความถูกต้องเชิงพื้นที่ เช่น พิกัด มาตรส่วน ทิศทาง ตำแหน่ง

ส่วนแผนผังไม่ต้องมีความถูกต้องเชิงพื้นที่ขนาดนั้นก็ได้ ขอเพียงแค่บอกสถานที่ต่างๆ แบบคร่าวๆ แค่สื่อความหมายว่าอยู่บริเวณตรงนี้ มีจุดสังเกตใกล้เคียงกับอะไรบ้าง

หลักการออกแบบเบื้องต้น

เน้นข้อความ สัญลักษณ์ต่างๆ ให้เข้าใจง่าย ไม่ทำชิดขอบกระดาษจนเกินไป ให้เผื่อระยะขอบไว้ด้วย

ใช้หลักการ จุดตัด 9 ช่อง เพื่อให้จุดที่เราต้องการสื่อความหมายอยู่ในจุดที่สนใจใน 4 จุดดังภาพด้านล่าง

สีของ Font, Icon, Object ให้ไปในทิศทางเดียวกัน โทนเดียว เช่น ใช้ Font เดียวทั้งหมด icon ก็โทนเดียวกัน จะเน้นขอบ สี มีเงาแบบไหนก็เลือกให้ทิศทางนั้นนะครับ

อย่างตัวอย่างภาพด้านล่าง Font ก็เป็น Font เดียวกัน ใช้ขนาดในการแบ่งหัวข้อหลัก หัวข้อรอง หัวข้อย่อย ตามลำดับ และ Icon สังเกตว่ารูปโลก กับ ตำแหน่งสีแดง จะคนละโทนเลย จึงแนะนำด้านล่าง จะดูง่ายกว่า

ขั้นตอนการทำ

1. เลือกสถานที่ต้องการทำ ในที่นี่ขอพาทำที่มหาวิทยาลัยเกษตรศาสตร์(บางเขน)

2. หาแบบจากแผนที่ต่างๆ เช่น Google Map, Google Earth จากนั้น Capture ตำแหน่งนั้นมา (ใช้เป็นโครงในการร่างแบบ) แนะนำ Google Earth on web เข้าใช้ใช้งาน คลิก จะได้ภาพที่มีความละเอียด สามารถปิด-เปิดรายละเอียดที่ไม่จำเป็นได้

3. Log in เข้าใช้งาน Figma จากนั้นนำภาพจากขั้นตอนที่ 2. เข้ามา

4. ทำการสร้าง Object ต่างๆ ประกอบด้วย เช่น ถนน, สถานที่สนใจ, จุดสังเกตต่างๆ, อาคาร, ปั้มน้ำมัน, ทางแยก, สถานทีรถไฟฟ้า เป็นต้น

5. จากนั้น ร่างตำแหน่ง วางองค์ประกอบต่างๆ ให้ดูเข้าใจง่าย เรียบง่าย ลองขยับตรงนั้นทีตรงนี้หน่อย เพื่อหาแบบที่เหมาะสม

6. สร้างตำแหน่ง(Point, Line, Polygon) สัญลักษณ์ ชื่อ เพื่อให้สื่อความหมายได้เข้าใจ เช่น ชื่อถนน แยก จุดสังเกต รวมทั้งเพิ่มรายละเอียดวัตถุ เช่น เงา เพื่อให้มีมิติมากขึ้น

องค์ประกอบที่ควรมี

• ชื่อแผนผัง
• เข็มทิศ
• ผู้จัดทำ
• สัญลักษณ์
• รายละเอียดเพิ่มเติม เช่น ที่อยู่ เบอร์ติดต่อ ในที่นี้ผมใส่ QR Code

หมายเหตุ แต่ก็ขึ้นกับวัตถุประสงค์แผนผังนั้นๆ ด้วย

สร้าง QR Code อย่างไร

ผมสร้างจากเว็บนี้ คลิก qrickit โดยใช้พิกัด Latitude (ละติจูด) , Longitude (ลองจิจูด) เนื่องจากใช้งานง่าย สามารถปรับแต่ง สี ความละเอียด เลือกประเภทไฟล์ QR Code ได้ด้วย

วิธีบันทึก (Save)

1. ไปที่ แถบ Design

2. เลือก Export ชื่อเฟรม ในที่นี้คือ Export Kasetsart และ เลือก Export

เป็นอันเสร็จเรียบร้อย ได้ไฟล์นามสกุล PNG ขนาด 3508×2480 px และใน Figma เราสามารถแชร์เป็น Link ให้ดูหรือสามารถแก้ไขได้อีกด้วย อาจจะเป็นงานกลุ่ม หรือ เพื่อนร่วมงานที่ดูแลโครงการนี้ด้วยกัน

สามารถดูจาก Figma ได้ที่นี่ คลิก ไปฝึกลองทำกันดูนะครับ

ผลงานที่เคยทำ

ยำปากแตก

SUKU SUKU Premium Japanese

ศึกษาเพิ่มเติม

https://www.youtube.com/@Figma

ขอบคุณที่อ่านนะ 😉 ใครลองเล่นแล้วมาแชร์กันได้นะค้าบบบบ ✌️👍