Design

รวม 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 มีเครื่องทุนแรงอยู่อีกมากมาย กดบันทึก กดแชร์บทความนี้ไว้ได้เลย!

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

  • ใช้งานคำสั่งพื้นฐาน และเทคนิคในการใช้งาน Figma
  • วิธีปรับแต่งรูป และสร้าง Icon ด้วย Figma
  • ออกแบบ UI ของ Web และ App ให้รองรับความ Responsive ในแต่ละ Devices
  • การทำ Prototype อย่างง่ายไปจนถึงการใส่ Transition และ Animation ต่างๆ
  • อัพเดตเนื้อหาใหม่ล่าสุด 2022!

ดูรายละเอียดเพิ่มเติมได้ที่นี่

Patchara Boonmathanaruk
Business Development Associate | Skooldio

    You may also like

    Business

    ทำความรู้จัก Voxel Art งานกราฟิก 3D ยอดฮิตที่สร้างได้ตั้งแต่ Item, Character ยันเมือง

    หลายๆ คนอาจจะคุ้นหน้าคุ้นตากับงานภาพสไตล์ Pixel Art หรืองานภาพ Computer Graphic แบบ 8bit ที่ทำให้เรานึกถึงอดีตกันมาบ้างแล้ว (ถ้าใครนึกไม่ออกก็ลองคิดถึงภาพ Arcade Game อย่าง Pac-Man ...
    Design

    Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดในวงการ Design!

    Figma คืออะไร ??? ทำไมจึงเป็นเครื่องมือออกแบบอันดับ 1 ที่ UXUI Designer ทั่วโลกเลือกใช้  Figma คือเครื่องมือออกแบบที่ขึ้นแท่นอันดับ 1 ในปี 2022 โดยสามารถใช้ออกแบบได้ตั้งแต่เว็บไซต์, ...

    More in:Design

    UX Writing คืออะไร Design

    ไขข้อข้องใจ! UX Writing คืออะไร ทำไมสำคัญกับ Product พร้อมตัวอย่างน่าสนใจ

    UX Writing คืออะไร? ทำไมต้องรู้จักคำนี้ด้วยนะ? คุณอาจจะเคยผ่านการใช้งาน Application มากหน้าหลายตาในแต่ละวัน ซึ่งแอปฯ บางตัวก็ทำให้คุณรู้สึกดีตลอดการใช้งาน เข้าแล้วไม่อยากออก เข้าแล้วอยากเข้ามาใช้บ่อยๆ ทุกวัน แต่กลับกันกับแอปฯ บางตัวที่ทำให้คุณหงุดหงิดใจตลอดการใช้งาน อยากออกแทบตาย ...
    Web Design Font Pairing Design

    เทคนิคการจับคู่ฟอนต์ไม่ให้เละ ฉบับ Web Designer มือโปร

    หนึ่งในปัญหาใหญ่ของคนเริ่มต้นออกแบบเว็บ คือเรื่องของการเลือกใช้ฟอนต์ที่ดูเหมือนง่ายแต่ยาก ยิ่งเป็นเรื่องของการจับคู่ฟอนต์ที่ต่างกันให้มาอยู่ด้วยกันอย่างลงตัวสวยงามยิ่งยากเข้าไปใหญ่ วันนี้เราเลยนำรวมเทคนิคดีๆ ในการจับคู่ฟอนต์ฉบับ Web Designer มือโปรมาเล่าสู่กันฟัง 1.ใช้ฟอนต์ที่ให้ระดับอารมณ์แตกต่างกัน หน้าตาของฟอนต์มีผลต่ออารมณ์ความรู้สึกของคนอ่าน การลองจับคู่ฟอนต์ที่ให้อารมณ์แตกต่างกันจะช่วยให้หน้าเว็บดูมีลูกเล่น น่าสนใจ ไม่ราบเรียบจนเกินไป ก่อนที่จะเลือกจับคู่ฟอนต์ ต้องพิจารณาก่อนว่าบุคลิกเว็บที่เรากำลังออกแบบเป็นอย่างไร ...
    ui-design-Cover Design

    ถอดองค์ประกอบการออกแบบ UI ที่ดี ด้วยหลัก ‘Component-based Design’

    สิ่งหนึ่งที่สำคัญมากในการออกแบบ UI ที่นักออกแบบทุกคนควรรู้ นั่นคือเรื่องของ ‘Component-based Design’ คือการมองแยกส่วนประกอบต่างๆ ที่ร่วมกันเป็นหน้าเว็บไซต์หรือแอปฯ ที่เราออกแบบว่ามีส่วนประกอบมาจากอะไรบ้าง หากใครผ่านการเรียนการออกแบบมาก่อน อาจจะคุ้นเคยกับหลักองค์ประกอบการวาดรูปที่เริ่มตั้งแต่จุด จุดต่อกันกลายเป็นเส้น จากเส้นต่อกันเป็นระนาบ และระนาบประกบกันเป็นรูปทรง เช่นเดียวกันกับการออกแบบ ...
    psychology ux ui blog cover Design

    หลักจิตวิทยากับการช่วยออกแบบ UX UI ให้ชีวิต User ง่ายขึ้น

    ใครที่กำลังทำงานหรือศึกษาเรื่อง UX UI น่าจะเคยผ่านตาเรื่องของหลักจิตวิทยาการออกแบบที่นำมาใช้กับ UX UI กันบ้างแล้ว แต่เอาเข้าจริงแล้วในฐานะคนที่เป็นหรืออยากเป็น UX/UI Designer ควรมีความรู้พื้นฐานด้านจิตวิทยามากน้อยแค่ไหน โดยหลักการแล้วหลักจิตวิทยาจะช่วยให้ User ใช้งานเว็บหรือแอปฯ ที่เราออกแบบได้อย่างมีประสบการณ์ที่ดีได้อย่างไร ...

    Comments are closed.