5 Figma Plugins ที่ช่วยพัฒนาสกิล UX/UI ของเราให้ดียิ่งขึ้น !
สวัสดีครับทุกคน วันนี้ผมจะมาแนะนำ Plugin ที่ผมใช้ในการออกแบบ UXUI อยู่เป็นประจำ ควรค่าต่อการโหลดติดไว้ เพื่อไม่ให้เสียเวลาเรามาเริ่มกันเล๊ยยยยย 😆
1. Remove BG
เราจะมาเริ่มที่ตัวแรกนะครับ ผมขอแนะนำเป็น Remove BG เป็นเครื่องมือที่เอาไว้ลบพื้นหลัง ทำให้เราสามารถทำงานได้สะดวกรวดเร็วยิ่งขึ้น เพียงแค่ติดตั้ง Plugin Remove BG ลง Figma ของเรา ก็สามารถลบพื้นหลังรูปภาพที่เราต้องการให้หายไปได้เพียงแค่คลิกเดียวเท่านั้น (ปล.ต้องสมัครบัญชีก่อนเข้าใช้งานด้วยนะจ๊ะ^^)
ตอนนี้ Plugin Remove BG สามารถติดตั้งใช้งานได้ฟรี 50 ครั้งต่อการสมัคร 1 Email ใหม่ ความละเอียดของภาพที่ผ่านการลบพื้นหลังออกมานั้น สามารถใช้งานได้ในระดับทั่วไป แต่ถ้าเราอยากได้ความละเอียดระดับสูงที่ใช้ในงานระดับมือโปร เราอาจจะต้องสมัครใช้งานบัญชีและ Subscription ชำระเงินรายเดือนตาม Package ที่เราเลือกเพื่อให้ได้ความละเอียดของภาพที่สูงยิ่งขึ้นหลังจากผ่านการลบพื้นหลังแล้วนั้นเอง
ขั้นตอนของการใช้ Plugin Remove BG นั้นง่ายนิดเดียว เรามาเริ่มกันเลยครับ
- เริ่มจากการ Download ตามลิงค์นี้ได้เลยครับ https://www.figma.com/community/plugin/738992712906748191/Remove-BG
- หลังจากที่เราติดตั้ง Plugin แล้ว เราจะมา Set API Key กัน โดยการ Set API Key นั้นสามารถทำได้ตามนี้เลยครับ
จากภาพนะครับ จะมีให้กรอก API Key ซึ่ง API Key จะได้มากจาก Link นี้เลยครับ https://www.remove.bg/api#remove-background เมื่อกด Get API เราจะต้องทำการสมัคร สมาชิก เมื่อสมัครสมาชิกสำเร็จแล้ว เราจะได้ตัว API key มา ซึ่งนำมากรอกที่ input ในภาพด้านบนได้เลยครับ
3. หลังจากติดตั้งทุกอย่างเรียบร้อย การใช้งานเพียงแค่เรา เลือกรูปภาพ แล้วกดเลือก Plugin > Remove BG > Run เราก็จะได้รูปภาพที่เราต้องการ
Plugin นี้จึงเป็นตัวช่วยสำคัญทำให้เราไม่ต้อง สลับไปมาเพื่อหาไป Program อื่นที่จะใช้ลบ Background เราสามารถทำได้เลยใน Figma เลยเพียงแค่เรามี Plugin ตัวนี้ครับ
2. Unsplash
ต่อมาจะเป็น Plugin ตัวที่สองที่เราแนะนำนะครับ ตัวนี้คือ Unsplash จัดได้ว่าเป็น Plugin ที่ดีอีกตัวนึง เราจะสามารถค้นหาและเพิ่มรูปภาพ ให้กับงานออกแบบของเราได้เลย ซึ่ง Plugin ตัวนี้จะช่วยให้เราสามารถดาวน์โหลดรูปฟรีมาแปะบน Mockups หรือ UI เพื่อสร้างสรรค์ผลงานได้อย่างรวดเร็ว เหมาะสำหรับเวลาที่เราต้องการค้นหารูปภาพต่างๆ มาใช้งานโดยที่เราไม่จำเป็นต้องไปค้นหารูปภาพจากใน Google เพียงแค่มี Plugin นี้ทุกอย่างจะง่ายขึ้น Plugin นี้จะมีตัวแยกรูปภาพให้เป็นแต่ละหมวดหมู่ ทำให้เราทำงานได้สะดวกและง่ายมากยิ่งขึ้น ที่สำคัญรูปภาพต่างๆที่อยู่ใน Plugin นี้สามารถนำมาใช้ได้โดยไม่ติดลิขสิทธิ์
ขั้นตอนของการใช้ Plugin Unsplash
- เลือก Plugin Unsplash สามารถดาวน์โหลดได้จากลิ้งนี้ครับ https://www.figma.com/community/plugin/738454987945972471/Unsplash
- เลือกเลเยอร์ (เฟรมหรือรูปร่าง) ที่เราต้องการเพิ่มรูปภาพเข้าไป
- เลือกรูปภาพหรือค้นหาในหมวดหมู่ที่คุณต้องการและเลือกรูปภาพใส่ได้เลย
3. Clay Mockups 3D
หลังจาก Plugins ตัวที่สองที่เป็น Plugins เกี่ยวกับการหารูปภาพ มาถึงตัวนี้ ตัวที่สาม เราจะนำรูปภาพมาทำเป็น Mockups 3D ด้วย Plugins ที่ชื่อว่า Clay Mockups 3D เมื่อเราออกแบบ UI เสร็จ หรือ ออกแบบกราฟิกรูปภาพต่างๆ เรียบร้อยแล้ว Clay Mockups 3D จะเป็นเครื่องมือที่ช่วยให้เรานำเสนอผลงานเป็น Mockup ได้อย่างสะดวกและง่ายดาย ที่สำคัญสามารถทำให้ลูกค้าเห็นภาพและแสดงถึงความเป็นมือโปรได้อย่างดี
ขั้นตอนการใช้งาน Plugin Clay Mockups 3D
- เริ่มต้นเราสามารถดาว์นโหลด Plugin ได้ตาม link download นี้เลยครับ : https://www.figma.com/community/plugin/819335598581469537/Clay-Mockups-3D
- เริ่มต้นใช้งาน Plugin เมื่อกดใช้งาน จะปรากฎหน้าตา Plugin ตามภาพตัวอย่าง โดย Device Model มีให้เลือกหลากหลายไม่ว่าจะเป็น Iphone 11 , Macbook Pro หรือแม้แต่ Browser เราสามารถเลือกองศาการแสดงผลของ Mockup ได้แบบอิสระ หรือ จะเป็นมุมตัวอย่างที่ทาง Plugin มีให้ 3 รูปแบบ รวมถึง สามารถเปลียนสีของ Device ที่เลือกได้ตามใจ เพื่อให้ผลงานของเราออกมาได้สวยงามและตรงต่อความต้องการของตัวเราที่สุด
- หลังจากปรับแต่งแล้ว ให้กดที่ปุ่ม Create Empty Frame ตัว Plugin จะ สร้าง Frame ที่มีขนาดท่ากับ Mockup ที่เราปรับเลือกไว้
- นำภาพที่ต้องการ หรือ UI ที่ต้องการแสดงผลบน Mockup ใส่ไว้ใน Frame ตามที่ Plugin สร้างขึ้นมาให้ แล้วกด ใช้เรียกใช้ Plugin อีกครั้ง เพียงเท่านี้เราก็จะได้ ภาพ หรือ UI แสดงผลบน Mockup ที่เราต้องการ
- สุดท้าย กด Save as Image เพื่อนำ Mockup มาใช้งาน โดย Mockup ที่ได้มาจะอยู่ในรูปแบบของ .png
หลังจากทำตามขั้นตอนง่ายๆ เพื่อนๆ ก็สามารถสร้าง Mockup 3D ได้ภายใน Figma โดยไม่จำเป็นต้องสลับไปใช้งานโปรแกรมอื่นเพื่อช่วยในการสร้าง Mockup อีก Plugin นี้จึงเป็น 1 ในตัวเลือกที่ช่วยเพิ่มความน่าสนในของผลงานเราได้เป็นอย่างดี
4. Content Reel
ตัวที่ 4 นี้เป็น Plugin ที่จะช่วยลดเวลาการทำงานของเรา เหนื่อยไหมครับ ที่แต่ล่ะครั้งเราต้องมาคอยนั่ง Mock ข้อมูลต่างๆ ไม่ว่าจะเป็น Full Name , Address หรือ อื่นๆ ถ้าเพื่อนๆ เหนื่อยกับการต้องมานั่ง Mock ข้อมูลเอง วันนี้ผมขอแนะนำเป็น Plugin Content Reel ซึ่งเป็น Plugin สารพัดประโยชน์ในการเพิ่มตัวอย่างข้อมูล ที่เราต้องได้ใช้งานบ่อยครั้งเมื่อทำงานออกแบบ ใน Plugin นี้มีทั้งรูปภาพ ตัวอย่างข้อมูล ประเภทต่างๆให้เราสามารถนำไปใช้งานได้ ทำให้งานออกแบบของเราดูสมจริงในด้านข้อมูล ลดระยะเวลาในการหาตัวอย่างข้อมูลไปได้เยอะมาก เป็น Plugin ที่แนะนำให้มีติดเครื่องเลย
ขั้นตอนการใช้งาน Plugin Content Reel
- สามารถโหลด Plugin ได้จาก link download : https://www.figma.com/community/plugin/731627216655469013/Content-Reel
- หลังจากที่เราติดตั้ง Plugin แล้ว เมื่อเราเริ่มต้นใช้งาน เราจะพบว่ามีหมวดหมู่ให้ใช้งาน ที่หลากหลาย ไม่ว่าจะเป็น Text , Image , Icon และ อื่นๆ ที่ล้วนแต่เป็นตัวช่วยชั้นดีที่ทำให้เราสามารถทำงานได้อย่างรวดเร็ว ไม่เสียเวลามานั่ง Mock ข้อมูลเองแล้ว สะดวกและประหยัดเวลาได้ดีมากจริงๆครับ สำหรับ Plugin ตัวนี้
5. Beautiful shadow
มาถึง Plugin ตัวสุดท้าย เป็น Plugin อีกตัวหนึ่งที่ผมชอบใช้อยู่บ่อยๆ เอาไว้สร้างเงาให้กับ Element ที่เราต้องการ วิธีก็ง่ายแสนง่ายแค่ลาก “จุดกำเนิดแสง” ไปทิศทางที่เราต้องการเลย จะแสดงเงาบน Element ที่เราเลือก จึงเป็น Plugin อีกตัวหนึ่งที่ควรค่าต่อการโหลดติดไว้ในเครื่องเช่นกันครับ
ขั้นตอนของการใช้ Beautiful Shadows Plugin
- ไปดาวน์โหลด plugin ตามลิงค์นี้เลยครับhttps://www.figma.com/community/plugin/1068595505353552645/Beautiful-Shadows
- ติดตั้งเสร็จเรียบร้อยแล้ว เริ่มใช้งาน plugin → Beautiful shadows ได้เลย
- เปิดการใช้งาน Beautiful shadows มาแล้ว เริ่มต้นใช้งานปรับแสงเงาตามใจชอบได้เลยครับ
จบไปแล้วนะครับกับ Plugin 5 ตัวที่ทางทีมของผมใช้งานอยู่ และ ผมเห็นว่าเป็นประโยชน์กับการพัฒนาสกิลการใช้งาน Figma ให้ดีขึ้นไม่ว่าจะเป็นส่วนของ UI หรือ UX ที่ช่วยให้ลูกค้าได้รับประสบการณ์ที่ดีขึ้นจากงานของเรา หรือจะเป็นการทำงานที่สะดวกรวดเร็วขึ้น ถ้าเพื่อนๆ คนไหนมี Plugins ที่น่าสนใจสามารถมาแลกเปลี่ยนกันได้นะครับ ส่วนทางทีมของเราถ้ามี Plugins ไหนที่น่าสนใจอีกเราจะมาอัพเดตกันใหม่ใน Part ต่อไปนะครับ ขอบคุณทุกคนที่อ่านมาจนถึงตรงนี้นะครับ หากผิดพลาดประการใดต้องขออภัยมา ณ ที่นี้ด้วยครับ มือใหม่หัดเขียนครับบบ :))
📢 มาร่วมเป็นส่วนหนึ่งในการทำให้วงการ E-Commerce ขับเคลื่อนไปข้างหน้า ส่งประวัติการทำงานพร้อมตำแหน่งงานที่คุณสนใจมาได้เลยที่อีเมล hr@sellsuki.com หรือเข้าชมเว็บไซต์ของเราที่ https://lnkd.in/gUqNHSEW 🐶
