DESIGN | 3 mins read

อัปเดต 10 ปลั๊กอิน Xd, Figma, Sketch ยอดนิยม (2019-2021) สำหรับ UX/UI Designer!​

By Joe Prasoetsak on 22 Jul 2021
sennalabs-blog-banner

หลังจากที่เคยลง 5 ปลั๊กอิน (ของ Adobe Xd) ที่ UX/UI Designer ควรมี แนะนำโดย UX/UI Designer ของเราไปแล้ว วันนี้เรารวบรวมปลั๊กอินยอดฮิตที่มีคนพูดถึงและแนะนำมากที่สุดตั้งเเต่ปี 2019 เป็นต้นมา ซึ่งปลั๊กอิน (Plugin) เหล่านี้จะมาช่วยอำนวยความสะดวก และประหยัดเวลาของเหล่านักออกแบบและผู้ใช้งานเป็นอย่างมาก

และในบทความนี้ เราจะมาแนะนำ 10 ปลั๊กอินยอดนิยม ซึ่งโฟกัสที่ปลั๊กอินสำหรับโปรแกรม Xd และบางปลั๊กอินสำหรับ Sketch และ Figma แล้วต่อด้วย 5 ปลั๊กอินที่น่าสนใจท้ายบทความนะครับ

UnDraw

จะบอกว่าเป็นปลั๊กอินที่ได้รับความนิยมสูงสุดในช่วงหลายปีนี้ก็ว่าได้ ที่รวบรวมรูปเวกเตอร์สวย ๆ (svg format) หลากหลายคาแรกเตอร์ให้เลือก ทั้งยังสามารถเปลี่ยนสีให้เข้ากับดีไซน์ของเราได้ด้วย สิ่งที่ต้องทำเพียงแค่ ใส่คำค้นหา หรือคีย์เวิร์ด กดเลือกรูปที่ต้องการ แล้ววางลง artboard ได้เลย

UI Faces

ปลั๊กอินที่ช่วยวางรูปโปรไฟล์ได้โดยไม่ต้องเสียเวลาไปหารูปเอง และใช้เวลาแค่ไม่กี่นาที เพียงแค่วาง Shape ที่ต้องการ และคลิกใช้ปลั๊กอินเป็นอันจบ แต่ที่เจ๋งไปกว่านั้น เรายังสามารถหาแหล่งที่มาได้อีกด้วยว่าอยากได้รูปจากเว็บไหน (Unsplash, Pexels, Randomuser เป็นต้น) สามารถเลือก อายุ เพศ อิโมชัน สีผมได้ และยังมีลูกเล่นอื่น ๆ ให้เลือก เช่น อยากได้รูปเรียงตามความนิยม ปรับรูปให้เป็นโทนขาวดำ แถมยังเลือกขนาดรูปได้ด้วย

(Also available on Sketch | Figma)

Photo Splash 

เหมือนยก Unsplash มาใว้ใน XD ช่วยประหยัดเวลาในการหารูป คน สัตว์ สิ่งของ และสถานที่ไปได้เยอะมาก มาเป็นแถบบาร์ด้านข้างที่ยืดหดได้ ทำให้ดูรูปหลาย ๆ รูปได้ และในเวอร์ชันพรีเมียม จะสามารถเลือกคุณภาพของรูป สามารถเลือกรูปในจำนวนที่มากขึ้นได้ แล้วนำลง artboard หรือ container โดยการสร้างความกว้าง ความยาว และช่องว่างระหว่างรูปเองได้ อีกทั้งยังสามารถค้นหาจากคำ ชื่อบัญชี คอลเลกชัน และแบบสุ่มได้ เป็นต้น


Image : qooqee.com

Rename It

ตัวช่วยในการทำให้ไฟล์งานของคุณเนี้ยบขึ้น ด้วย Rename ปลั๊กอินเปลี่ยนชื่อเลเยอร์ หา parent element หรือ find and replace คำในไฟล์งาน จะช่วยให้คุณทำงานโดยไม่ต้องกังวลเรื่องชื่อ เพราะสามารถมาปรับ เปลี่ยนชื่อได้ทีหลัง นอกจากนี้ ยังระบุขนาด (ความกว้าง ความสูง) กับเลเยอร์นั้น ๆ ได้ด้วย  

(Also available on Sketch | Figma)

Angle

เครื่องมือที่รังสรรค์ mockup สวย ๆ ที่มักเห็นใน Dribble บ่อย ๆ ปลั๊กอินตัวนี้จะช่วยให้นักออกแบบเห็นงานในอุปกรณ์หลากหลายขนาดมากขึ้น โดยไม่ต้องตามหาของจริง Angle จะช่วยให้งาน mockup จบในที่เดียวโดยไม่ต้องไปโหลดไฟล์ม็อกอัป เอางานใส่ แล้ว export รูปใน Photoshop อย่างที่หลายคนเคยทำ แค่นี้เราก็จะได้รูปสวย ๆ ที่เอาไปนำเสนองานกับทีม หรือลูกค้าได้เเล้ว Angle มี device ให้เลือกเยอะมาก รวมถึงมุมมองที่หลากหลายองศาอีกด้วย

(Also available on Sketch | Figma)

Source: Figma Community

Stark

เวลาออกแบบ เราก็อยากให้ผู้ใช้งานทุกคนเข้าถึงได้ แต่การที่จะรู้ว่างานอยู่ในมาตรฐานไหม ก็ต้องทดสอบ Stark มีเครื่องมือที่จะช่วยตรวจสอบ เช่น Contrast Checker, Smart Color Suggestions, Colorblind Generator, Rapid Contrast Checking เป็นต้น ซึ่งจะช่วยให้เราออกแบบงานและสร้างผลิตภัณฑ์ที่ตอบโจทย์ และใช้ได้จริงมากขึ้น 

(Also available on Sketch | Figma)

Web Export

Web Export ช่วยให้นักออกแบบบันทึก หรือส่งออกไฟล์เป็น HTML and CSS code ได้โดยตรง เหมาะสำหรับ designer ที่ไม่ค่อยชำนาญเรื่องโค้ดมากนัก หรือต้องทำงานส่งต่อไฟล์ให้ developer ก็สามารถให้ปลั๊กอิน export ทุกอย่างให้ได้เลย แล้วยังสามารถเลือกใส่ markup ก่อน-หลัง ใส่ styles classes  และ attributes ได้ด้วย

VizzyCharts

ถ้างานของคุณต้องออกแบบแดชบอร์ดบ่อย ๆ Vizzycharts จะสามารถช่วยเรื่อง data visualization ได้ดีมาก โดยสามารถสร้างข้อมูลขึ้นเอง หรือเข้าข้อมูลจากไฟล์ CSV ก็ได้ แล้วปลั๊กอินจะสร้างกราฟข้อมูลขึ้นมา มีให้เลือก 3 แบบ คือ Column Chart, Line Chart และ Ring Chart

Color Ranger

Color Ranger หรือ Color Ranger 2 เป็นปลั๊กอินที่ช่วยให้การจัดการเรื่องสี เป็นเรื่องง่ายขึ้น นักออกแบบสามารถปรับค่าความสว่าง (brightness) ความอิ่มตัว (saturation) ระดับสี (hue) ความลึก (color depth) หรือความโปร่งของสี ทั้ง single element ไปถึงทั้งอาร์ตบอร์ด สามารถสร้าง บันทึกและแก้ไข presets ได้ และเวอร์ชันล่าสุด คุณสามารถสร้างงาน bright mode - dark mode ได้ด้วย

ICONDROP

ปลั๊กอินที่มีมากกว่าไอคอน เพราะรวม Illustrations และ Stock photos ให้ใช้งานมากถึง 2 ล้านชิ้น ผู้ใช้แค่ใส่คำค้นหา ถ้าต้องการค้นหาขั้นสูง สามารถเลือกเป็นแพกเกจ สไตล์ ความเกี่ยวข้อง ฟรีหรือพรีเมี่ยมได้ด้วย ปลั๊กอินยังมี presets บางส่วนให้เลือก เช่น material design icons และยังดู my downloads และ my likes ย้อนหลังได้ด้วย

(Also available on Sketch )

และขอแถมอีก 5 ปลั๊กอินที่น่าสนใจ 

  • Google Sheets - นำเข้าข้อมูลโดยตรงจาก Google Sheets เพื่อความสมจริงของคอนเทนต์
  • Map Generator - ใส่แผนที่จริงจาก Google Maps พร้อมปรับซูม เลือกประเภทแผนที่ และสไตล์ได้
  • Image Optimizer - ช่วยบีบอัด/ลดขนาดของไฟล์รูปที่ใช้ในงานออกแบบ
  • Mimic - ดึงฟอนต์ สี และรูปภาพจากเว็บไซต์ที่ต้องการ เพียงแค่กรอก url 
  • Confetti - สร้างกราฟิกพื้นหลังได้ง่าย ๆ ใน 1 คลิก ปรับความโปร่ง หมุน ย่อ ขยายกราฟิกได้

Written By
Born in the south. Raised in E-sarn. Graduated in the central. Fall in love with the north of Thailand. Been to India and came back with the head bobbling. Love learning languages and get lost in nature.
Born in the south. Raised in E-sarn. Graduated in the central. Fall in love with the north of Thailand. Been to India and came back with the head bobbling. Love learning languages and get lost in nature.

Please Tell Us Your Ideas

We will get back to you within 24 hours!