7 plugin | Skooldio Blog - ทำงานไวและว้าวกว่าเดิม! ด้วย 7 Plugins ใน Figma
Design

ทำงานไวและว้าวกว่าเดิม! ด้วย 7 Plugins ใน Figma

7 plugin | Skooldio Blog - ทำงานไวและว้าวกว่าเดิม! ด้วย 7 Plugins ใน Figma

Figma เป็นหนึ่งใน Design Tool ที่มาแรงที่สุดในปีนี้ ด้วยความเรียบง่าย แต่ลูกเล่นเยอะ ทำให้ Figma ไม่ใช่แค่โปรแกรมที่ดีไซเนอร์ชอบใช้ แต่ฝ่ายอื่นๆ ที่ทำงานร่วมกับดีไซเนอร์ เช่น โปรแกรมเมอร์และนักการตลาด ก็ถูกใจด้วยเช่นกัน 

ด้วยความฮิตของ Figma นี้เอง ทำให้มีคนสร้าง Plugin ขึ้นมาอีกมากมาย ที่เป็นเหมือนส่วนต่อเติมของโปรแกรม ซึ่งจะช่วยทำให้ Figma ทำงานได้หลากหลายยิ่งขึ้น

วันนี้เราเลยจะมาแนะนำ 7 Plugins ใน Figma ที่จะเพิ่มความไว ความงาม และความว้าว! บทความนี้จะช่วยให้ดีไซเนอร์หลาย ๆ คนที่กำลังมองหา Plugin ช่วยเสริมประสิทธิภาพในการออกแบบผ่าน Figma แข็งแกร่งขึ้นไปอีก! 💪🦾

1. Google Sheet Sync 

Google sheet sync | Skooldio Blog - ทำงานไวและว้าวกว่าเดิม! ด้วย 7 Plugins ใน Figma
Google Sheet Sync

ดึง Data จริง จากตาราง Google Sheet มาใช้ในงานออกแบบ UI ได้อย่างสะดวก รวดเร็ว โดยสามารถตั้งค่าให้ดึงแบบเจาะจงหรือ Random ข้อมูลจาก Google Sheet ได้ด้วย อีกทั้งยัง Support การดึง Image URL Link เข้ามาใส่ใน Shape ได้อีก เหมาะมากสำหรับ Designer สาย Perfectionist ที่ไม่อยากใช้ Lorem Ipsum บอกเลยว่า Google Sheet Sync เป็น Plugin ที่ช่วยได้ทั้งการออกแบบ UI และงานออกแบบทั่วๆ ไป


2. LottieFiles

Design with Lottie | Skooldio Blog - ทำงานไวและว้าวกว่าเดิม! ด้วย 7 Plugins ใน Figma
LottieFiles

LottieFiles จะช่วยทำให้งานออกแบบของเหล่าดีไซเนอร์ที่ฝันอยากจะเอา Motion Graphic ไปใช้กับงาน UI ให้เป็นจริง เพราะ Plugin นี้ใช้สำหรับการนำ Animation จาก After Effect เข้ามา Preview ใช้ใน Figma ได้

รวมถึง File ที่ Export จาก Bodymovin (Plugin ฝั่ง After Effect) ยังสามารถนำไปใช้บน Production จริง ได้อีกด้วย


3. Unsplash

Unsplash | Skooldio Blog - ทำงานไวและว้าวกว่าเดิม! ด้วย 7 Plugins ใน Figma
Unsplash

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


4. Charts

Charts | Skooldio Blog - ทำงานไวและว้าวกว่าเดิม! ด้วย 7 Plugins ใน Figma
Charts

หมดปัญหากับการทำ 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

Autoflows | Skooldio Blog - ทำงานไวและว้าวกว่าเดิม! ด้วย 7 Plugins ใน Figma
Autoflow

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

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


6. Angle Mockups

Angle mockup | Skooldio Blog - ทำงานไวและว้าวกว่าเดิม! ด้วย 7 Plugins ใน Figma
Angle Mockups

Plugin ช่วยทำ Mockup Presentaion แบบเร็วทันใจ โดย Angle มี Vector และ 3D Mockup ให้เลือกถึง 1,900 กว่าแบบ ตั้งแต่มือถือ iOS, Android จนไปถึง Desktop

เรียกว่าครบทุกเครื่อง ทุกมุม ซึ่ง Plugin นี้ Free สำหรับการใช้แบบส่วนตัว แต่ถ้าใครอยากใช้เชิงพาณิชย์ก็สามารถจ่ายเพียงครั้งเดียวในราคา $79 หรือประมาณ 2,500 บาท นับว่าเหมาะมากสำหรับ Software House หรือ Digital Agency


7. Iconify

iconify | Skooldio Blog - ทำงานไวและว้าวกว่าเดิม! ด้วย 7 Plugins ใน Figma
Iconify

ดึงไอคอนต่าง ๆ จาก Google Material Icon, FontAwesome หรือ Twitter Emoji และอื่น ๆ อีกกว่า 50,000 ชิ้น ได้ผ่าน Figma โดยตรง ซึ่งสิ่งที่ดีงามคือ Search Bar และ Tags ใน Plugin ที่ช่วยค้นหา Icon ได้ง่ายและรวดเร็วขึ้น และยังแนะนำ Slyte ของ Icon ที่คล้าย ๆ กัน ทำให้ Design Process ลื่นไหลขึ้นไปอีก!


งานออกแบบ UI หรือการทำ Prototype ในปัจจุบันนี้ง่ายขึ้นมาก ๆ ยิ่งถ้ามี Plugins เหล่านี้ติดไว้ใน Figma ยิ่งทำให้งานของเราดูโปรมากขึ้นอีกด้วย 

หรือถ้าใครกำลังมองหาตัวช่วยสำหรับงานออกแบบ ก่อนจะลงมือทำงานในโปรแกรม Figma แนะนำเป็น 5 Chrome Extensions เพิ่ม Productivity ให้กับเหล่า UI Designer 


ส่วนคนที่อยากใช้ Design Tools หรือใช้เครื่องมืออื่นๆ อยู่ แล้วอยากเปลี่ยนมาใช้ Figma แต่ไม่รู้จะเริ่มต้นเรียนรู้ยังไง ตอนนี้ Skooldio มีหลักสูตร UI Design with Figma แล้ว สามารถดูรายละเอียดได้ที่นี่ 

UI Figma | Skooldio Blog - ทำงานไวและว้าวกว่าเดิม! ด้วย 7 Plugins ใน Figma

อยากให้มีบทความดี ๆ แบบนี้อีก ซื้อกาแฟเลี้ยงคนเขียนได้ทาง https://ko-fi.com/thanon

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 Plugin 2022 ออกแบบไว ใช้งานได้จริง!

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

    More in:Design

    Design

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

    Figma คืออะไร ??? ทำไมจึงเป็นเครื่องมือออกแบบอันดับ 1 ที่ UXUI Designer ทั่วโลกเลือกใช้  Figma คือเครื่องมือออกแบบที่ขึ้นแท่นอันดับ 1 ในปี 2022 โดยสามารถใช้ออกแบบได้ตั้งแต่เว็บไซต์, ...
    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’ คือการมองแยกส่วนประกอบต่างๆ ที่ร่วมกันเป็นหน้าเว็บไซต์หรือแอปฯ ที่เราออกแบบว่ามีส่วนประกอบมาจากอะไรบ้าง หากใครผ่านการเรียนการออกแบบมาก่อน อาจจะคุ้นเคยกับหลักองค์ประกอบการวาดรูปที่เริ่มตั้งแต่จุด จุดต่อกันกลายเป็นเส้น จากเส้นต่อกันเป็นระนาบ และระนาบประกบกันเป็นรูปทรง เช่นเดียวกันกับการออกแบบ ...

    Comments are closed.