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

    องค์กรจะดีขึ้นยังไง? ถ้าทุกทีมเข้าใจ เรื่อง UX | Skooldio Blog - องค์กรจะดีขึ้นยังไง? ถ้าทุกทีมเข้าใจ เรื่อง UX
    Design

    องค์กรจะดีขึ้นยังไง? ถ้าทุกทีมเข้าใจ เรื่อง UX

    ปัจจุบันการสร้าง Experience ที่ดีให้ลูกค้าเป็นสิ่งสำคัญมาก แต่หลายธุรกิจมักเข้าใจผิดว่า ต้องเป็นหน้าที่ของ UX Designer คนเดียว เพราะที่จริงแล้วลูกค้าจะมีประสบการณ์ที่ดีได้ ต้องมาจากความรู้สึกของผู้ใช้ที่ได้รับจากแบรนด์ในทุกขั้นตอน ซึ่งสิ่งเหล่านี้จะเกิดขึ้นได้จากความร่วมมือของทุกทีมนั่นเอง Marketer การเข้าใจ User Experience ...
    Service Design | Skooldio Blog - Service Design คืออะไร? ทำความรู้จักเครื่องมือที่จะช่วยออกแบบธุรกิจให้เป็นที่รัก
    Design

    Service Design คืออะไร? ทำความรู้จักเครื่องมือที่จะช่วยออกแบบธุรกิจให้เป็นที่รัก

    การแข่งขันทางธุรกิจนับวันจะยิ่งดุเดือดขึ้นเรื่อยๆ ต่างคนก็ต่างต้องพัฒนาสินค้า หรือบริการของตัวเองให้ดีที่สุดเพื่อที่จะอยู่รอด แต่หากทุ่มเทสร้างสินค้ามาอย่างดี แต่บริการพังไม่เป็นท่า ประสบการณ์ของลูกค้าต่อแบรนด์อาจจะกลายเป็นลบไปเลยก็ได้ การออกแบบบริการหรือ Service Design จึงมีบทบาทสำคัญมากในการจัดการระบบการทำงานต่างๆ เพื่อสร้างสรรค์ประสบการณ์ที่ดีให้กับผู้ที่เกี่ยวข้อง  Service Design คืออะไร? Service ...

    More in:Design

    Design

    Service Design, Design Thinking, UX, UI กับจุดเชื่อมโยงที่เรียกว่า Human Centred Design

    หลายๆ คนอาจจะเคยได้ยินคำว่า UX, UI และ Design Thinking กันมาบ้างแล้ว แต่ตอนนี้มีอีกหนึ่งศาสตร์ที่กำลังมาแรงมากนั้นก็คือ Service Design หรือกระบวนการออกแบบบริการ ซึ่งกระบวนการออกแบบบริการนั้นมักถูกคนจำนวนมากสับสนว่ามันต่างกับ User Experience ...
    สรุป 5 เทคนิคสร้าง Service Design ให้ลูกค้าปลื้มสุดๆ | Skooldio Blog Design

    สรุป 5 เทคนิค ใช้ Data สร้าง Service Design ให้ลูกค้าปลื้ม

    คุณก็ออกแบบบริการให้ลูกค้าประทับใจได้ง่ายๆ แค่รู้วิธีใช้ Data เพื่อสร้าง Service Design ที่เราสรุปให้ในบทความนี้ ตั้งแต่ความเข้าใจพื้นฐาน วิธีคิด และเคสตัวอย่างที่สามารถนำไปปรับใช้ในการทำงานของคุณได้จริง โดย 3 ผู้เชี่ยวชาญ จาก 🔴 ...
    Design

    เรียนรู้ตำแหน่งงานหลักใน Tech StartUp ผ่านตัวละครจากซีรีส์เรื่องดัง

    ผ่านไป 8 ตอนแล้วกับ Start-up ซีรี่ส์มาแรงส่งตรงจากเกาหลี เรื่องราวของเหล่าวัยรุ่นที่มีความฝันอยากจะปั้น Startup ของตัวเองให้ขึ้นมาเป็นบริษัทเทคชั้นนำแบบ Silicon Valley สาขาเกาหลี ตลอดทั้งเรื่องที่ผ่านมา เราได้เห็นการแข่งขันที่เข้มข้น ความยากลำบากในการสร้าง Startup ...
    Business

    6 สิ่งที่องค์กรมักเข้าใจผิดเกี่ยวกับ Design Thinking

    “Design Thinking เรียนแล้วไม่เห็นใช้ได้จริงเลย” “ก็เข้าเรียนครบนะ แต่ไม่เห็นได้อะไรเลย” “พอเอามาทำตาม ไม่เห็นว่าจะได้ไอเดียที่ว้าว ที่ใหม่ตรงไหนเลย” Design Thinking หนึ่งในหัวข้อสุตฮิต ที่ในยุคนี้ไม่ว่าจะองค์กรใหญ่เล็กขนาดไหน ถ้าจะเริ่มปรับธุรกิจ หรือเน้นสร้างนวัตกรรมในองค์กร ต้องรู้จักอย่างแน่นอน ...

    Comments are closed.