รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง!

Plugin figma ฉบับ 2022 | รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง! ในยุคที่คนทำงานออกแบบ UX/UI เกือบทุกคนหันมาใช้เครื่องมือมาแรงแห่งยุคอย่าง Figma กันอย่างจริงจัง เนื่องจากหน้าโปรแกรมที่เข้าใจง่าย ส่งต่องานกับทีมได้อย่างไม่มีสะดุด ใช้งานแบบฟรีก็ทำได้ แถมมาพร้อมลูกเล่นมากมายที่ช่วยให้งานออกแบบในยุคนี้ทำได้ง่ายกว่าเมื่อก่อน มี Community ที่เปิดให้ทุกคนมาแชร์ widgets หรือ plugins ต่างๆ กันอย่างหลากหลาย

แน่นอนว่าใน Figma Community มี Plugin ที่มีประโยชน์มากมายนับไม่ถ้วน มีทั้งอันที่ใช้ได้บ้างใช้ไม่ได้บ้าง อันที่ทีมพัฒนาไม่พัฒนาต่อแล้วหรืออันที่ทีมยัง active กันสุดฤทธิ์ เราจึงคัดมาให้แล้วกับ 9 Plugin Figma ที่ใช้กับงานออกแบบ UX UI ได้จริงฉบับปี 2022!

ใครที่กำลังมองหาเครื่องมือช่วยให้ทำงานได้ไว ทำงานได้เร็ว หรือแม้แต่บางคนที่ยังไม่รู้ตัวว่า Figma มีเครื่องทุนแรงอยู่อีกมากมาย กดบันทึก กดแชร์บทความนี้ไว้ได้เลย!

Table of Contents

1. Content Reel
2. Icon8
3. Unsplash
4. Chart
5. Autoflow
6. Remove BG
7. LORE (for Lorem Ipsum)
8. Color Palettes
9. Better Font Pickler

1. Content Reel

Content Reel | รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง! ในงานออกแบบเว็บไซต์หรือแอปพลิเคชัน แน่นอนว่าทุกคนจำเป็นต้องทำ wireframe ทำ prototype หน้าเว็บหรือแอปไปทดสอบกับ user กันเป็นประจำอยู่แล้ว และเพื่อความสมจริงของงานเหล่านี้ จำเป็นต้องหารูป หา text เพื่อทำให้ mockup เหล่านั้นดูสมจริงมากยิ่งขึ้น

เมื่อก่อนคุณอาจจะต้องใช้เวลาหารูป ใช้เวลาคิด text ต่างๆ หรือไปสะกิดให้ฝ่าย business ช่วยคิด แต่บอกเลย Content Reel สามารถช่วยคุณคิดสิ่งเหล่านี้ภายในคลิกเดียว ไม่ว่าจะเป็น Text, Image, Icon บอกเลย plugin นี้ช่วยได้หมด!

2. Icon8

Icon8 | รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง! ความผูกพันธ์อันเนิ่นนานระหว่างงานออกแบบกับ Icon เป็นสิ่งที่ตัดกันไม่ขาดจริงๆ เกือบทุกงานออกแบบจำเป็นต้องใช้ Icon ไม่มากก็น้อย

และแน่นอนเว็บไซต์ชื่อดังอย่าง icon8 ได้ยกเว็บไซต์ตัวเองมาอยู่ใน Plugin Figma เรียบร้อยแล้ว บอกลาปัญหาสลับ tabs ไปมา เปิด Figma กดใช้ plugin icon8 ก็จะสามารถค้นหา icons, images, illustrations พร้อมใช้งานใน figma ได้ทันที!

3. Unsplash

Unsplash | รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง! หา Mock Up รูปภาพสวย ๆ มาใช้ออกแบบได้ง่าย เร็ว และสวยงาม ผ่าน Unsplash! Plugin นี้ จะช่วยเลือกรูปที่มีสไตล์เดียวกันใน Category เดียวกันได้เพียงไม่กี่คลิก โดยมีโหมดให้เลือกรูปถึง 14 หมวด

ซึ่ง Unsplash เหมาะมากสำหรับการออกแบบที่ต้อง Mockup รูปไวๆ เพื่อดู Look & Feel ของผลิตภัณฑ์ แต่ไม่เหมาะกับการใช้จริง เพราะรูปที่ Generate ออกมาจะเป็น Low-res ซึ่งประโยชน์คือช่วยโหลดงานตอนเรานำ Prototype ไป Present ไป Test กับ User ได้เร็วๆ

4. Chart

Chart | รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง! หมดปัญหากับการทำ UI หน้า Dashboard ที่จะต้องปั้นกราฟรูปแบบต่างๆ เพราะ Plugin Chart จะเข้ามาช่วยเราทำ Mock Up กราฟ หรือ Data Visualization ได้ฟินมากขึ้น โดยไม่จำเป็นต้องใช้ Visualization tools อื่นๆ ซึ่งความโหดของ Plugin นี้คือสามารถดึงข้อมูลจริง ๆ จาก Google Sheet, CSV หรือ JSON เข้ามาใช้งานได้โดยตรง

ซึ่ง Chart แบบ Free Version จะสามารถใช้ได้สอง Chart เท่านั้น (Line Chart กับ Area Chart) ถ้าใครอยากใช้ทั้งหมดต้องจ่ายค่าบริการเพียง $10 ต่อปี สำหรับคนที่อยากใช้เป็น Free Version การใช้ Line chart แบบเรียบๆ ก็ทำให้งานออกแบบของเราดูดีได้ไม่ยาก

5. Autoflow

Autoflow | รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง! อยากลากลูกศรเพื่อทำ Wireframe ภาพรวม แต่ไม่ได้อยาก Link Prototype แนะนำให้ใช้ Autoflow! เพียงคลิกสอง Object แล้วเปิด Autoflow ก็จะมีลูกศรโผล่ขึ้นมาแบบ Auto เลย

Autoflow ค่อนข้างเหมาะกับการทำ Prototype แบบเร็วๆ หรือเหมาะกับช่วง Ideate มาก ๆ เพราะจะช่วยทำให้ทีมเห็นภาพรวมของทั้ง Flow โดยไม่ต้องคลิกดู Prototype ทีละหน้า

6. Remove BG

Remove BG | รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง! เว็บไซต์ลบ Background ที่เกิดมา disrupt วงการไดคัทอย่างแท้จริง ที่สามารถลบ bg ได้ทั้งรูปภาพและวิดีโอได้อย่างเป้ะปัง โดยวิธีการใช้ก็แค่ลากไปวางบนเว็บ กดลบพื้นหลังปุ้บ เสร็จปั้บ แถมใช้งานได้ฟรี!

แน่นอน Remove BG ยังคงตามมาช่วยเหลือเราบน Figma ด้วยการปล่อย plugin สุดเทพนี้มาส่วนวิธีการใช้ก็ยังง่ายเหมือนเดิม อยากลบพื้นหลังรูปไหน ก็แค่กดที่รูปนั้น กดลบปุ้บ หายปั้บเหมือนตอนใช้งานบนเว็บ

7. LORE (for Lorem Ipsum)

LORE | รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง! ภาษาประจำตัวของนักออกแบบอย่าง Lorem Ipsum ยังตามมาหลอกหลอนกันต่อใน Figma แต่ง่ายกว่าเดิม! กดใช้ plugin เลือก Text ที่อยากให้เป็น Lorem พร้อมกำหนดความสั้นยาว Plugin ก็จะช่วย generate ออกมาทันที!

ซึ่งในงานออกแบบปัจจุบันอาจจะไม่ได้ใช้งาน Lorem Ipsum กันเท่าไหร่นักเพราะทุกคนจะหันมาใช้ content ที่สอดคล้องกับ context นั้นๆ ให้มากที่สุด LORE จึงอาจจะไม่ได้จำเป็นนัก แต่คิดว่าคงมีคนที่คิดถึง Lorem Ipsum กันไม่มากก็น้อย

8. Color Palettes

Color palettes | รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง! แม้ว่า Figma จะดูดสี จิ้มสีง่ายดายเพียงไหน แต่ Figma ยังไม่สามารถช่วยเราคุมโทน คิดโทนให้งานออกแบบเราออกมาสวยเนี้ยบ Plugin Palettes สีจึงเป็นสิ่งที่ใครๆ หลายคนมองหา

Color Palettes เป็น 1 ใน plugin ที่ช่วย generate จานสีที่มีคนโหลดไปใช้แล้วกว่าแสนคน วิธีใช้งานก็เหมือนเว็บไซต์หาจานสีโดยทั่วไป โดยเราแค่พิมพ์ชื่อสี หรือ code สีลงไปก็จะได้ตัว palettes ที่สวยงามออกมาพร้อมใช้ทันที

9. Better Font Pickler

Better Font Pickler | รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง! การเลือกใช้ font ในงานทำเว็บไซต์หรือแอปพลิเคชันเป็นสิ่งสำคัญมากๆ และใน Figma มี google font ให้ใช้มากมาย แต่สิ่งที่ขาดคือ preview font ไม่มีให้เราดูเหมือนใน word หรือ excel ที่เราใช้กันมาในอดีต

การจะ preview font เราจึงต้องกดเปลี่ยนเป็น font นั้นๆ เพื่อดูความเปลี่ยนแปลง แต่ Better Font Pickler จะมาใช้เรา preview font เหมือนโปรแกรมในวันวานของพวกเรา

นี่เป็นเพียงเสี้ยวเล็กๆ ของ Plugin ใน Community ของ Figma เท่านั้น และ Plugin ใหม่ๆ มีออกมาให้เราใช้กันทุกวัน ที่พร้อมจะช่วยให้งานออกแบบ UX UI ของเราเป็นไปได้อย่างราบรื่นและง่ายมากยิ่งขึ้น ที่สำคัญยังช่วยทำให้ดูเท่อีกด้วย! สุดท้ายนี้ขอขายของนิดนึง สำหรับใครที่อยากเรียนรู้วิธีใช้ Figma แบบเข้าใจง่าย และใช้ประโยชน์ของเครื่องมือนี้ได้เต็มที่ มาเจอกันได้ในคอร์สออนไลน์สุดเข้มข้น UI Design with Figma พร้อมลงมือทำผ่านโปรเจกต์จริง โดยในคอร์สนี้คุณจะได้เรียนตั้งแต่