22Jul, 2021
Language blog :
Thai
Share blog : 
22 July, 2021
Thai

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

By

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

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

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

UnDraw

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

UnDraw

UI Faces

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

(Also available on Sketch | Figma)

UI Faces

Photo Splash 

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

Photo Splash
Image : qooqee.com

Rename It

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

(Also available on Sketch | Figma)

Rename It

Angle

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

(Also available on Sketch | Figma)

Angle

Source: Figma Community

Stark

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

(Also available on Sketch | Figma)

Stark

Web Export

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

Web Export

VizzyCharts

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

VizzyCharts

Color Ranger

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

Color Ranger

ICONDROP

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

(Also available on Sketch )

ICONDROP

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

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

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

21
June, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
21 June, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
หลายคนคงเคยเจอเหตุการต่างๆ บนโลกดิจิทัลที่สามารถนำพาเราไปเสียเงินหรือสมัครใช้บริการได้ง่าย ๆ ทั้งที่ไม่รู้ตัว ลองมาดูกันว่า พวกเขาเหล่านั้น ใช้วิธีหลอกล่อนักชอปอย่างเรากันอย่างไรบ้าง พื้นฐานของคนทั่วไปนั้นไม่อยากที่จะสูญเสียอะไรไป แม้แต่สิ่งที่อาจจะไม่จำเป็น เราอาจจะพบการทำการตลาดในเชิงนี้ได้บ่อย ๆ ทั้ง ๆ ที่เราไม่รู้ตัว และอาจจะไม่จำเป็นต้องซื้อแต่โดนกระตุ้นด้วยข้อมูลที่เรารับมาแบบงง ๆ เช่น Flash sale 40% สินค้าที่มีจำนวนจำกัด นั้นจะน่าสนใจมากกว่าการเดินเจอสินค้าเดียวกันในห้างที่ลดราคา 40% เช่นเดียวกัน ข้อความบนเว็บช็อปปิ้งที่ส่งมาหาคุณว่าสินค้าที่คุณเคยสนใจกำลังลดราคาอยู่ อย่าพลาดโอกาสที่จะซื้อตอนนี้ มักกระตุ้นความต้องการซื้อของเราได้เป็นอย่างดี เพราะเรากลัวที่จะเสียโอกาสดี

By

3 mins read
Thai
21
June, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
21 June, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
แต่ก่อน เวลาที่เว็บไซต์ถูกดีไซน์ด้วยฟอนต์แปลก ๆ หรือมีเอกลักษณ์เฉพาะตัว จะทำให้ผู้ใช้งานบางคนมองไม่เห็น เพราะในเครื่องของผู้ใช้งานไม่มีฟอนต์นั้น ระบบก็จะเลือกเอาฟอนต์อื่นในเครื่องขึ้นมาแสดงผล เห็นเป็นฟอนต์อื่นไป ทำให้ดีไซเนอร์ต้องแก้ปัญหาด้วยการทำรูปแล้วเอามาแปะในเว็บไซต์แทน หรือแม้ว่าจะแสดงผลตามที่ถูกออกแบบมา ความเร็วก็อาจเป็นปัญหาในการโหลดและเข้าถึง เพราะฟอนต์ถูกโหลดจากเซิร์ฟเวอร์ แต่สมัยนี้ไม่มีใครใจเย็นพอที่จะรออะไรนานๆ เพราะจากรายงานระบุว่า 40% ของคนที่เข้าเว็บไซต์ จะออกหรือปิดทันทีถ้ามีการโหลดนานกว่า 3 วินาที โดยเฉพาะนักช็อปออนไลน์เกือบครึ่งที่พร้อมจะหันหลังให้อีคอมเมิร์ซเว็บไซต์ที่โหลดช้ากว่า 2 วินาที และ 79% บอกว่ามีโอกาสที่จะไม่ใช้บริการอีก Google Fonts คืออะไร? (กันแน่) หลายคนคงรู้จัก Google Fonts แต่วันนี้เราจะพามาทำความรู้จักให้มากขึ้น

By

4 mins read
Thai
21
June, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
21 June, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
S&P Food’s yearly revenues were 435 mils $USD. 10% of the revenue was from online sales. The board of directors felt that online sales should account for more. The digital

By

4 mins read
English

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.