บทความ IT เจ๋งๆ
10 Chrome Extensions ที่ดีที่สุดสำหรับ Designers
18-ต.ค.-19
คัมภีร์เทพ IT
ในฐานะของ Designer เรามักจะค้นหาเทคนิค, เคล็ดลับ และ Tools ใหม่ ๆ เพื่อช่วยเพิ่มความเร็วและปรับปรุง Process การทำงานของเราอยู่เสมอ หลังจากที่ Brendan Mahony ได้ใช้เวลาอยู่ช่วงหนึ่ง ในการทดลอง Chrome Extensions เขาจึงรวบรวม 10 Chrome Extensions และ Plugins ที่ดีที่สุดสำหรับ Designer มาให้ได้ลองนำไปใช้งานกัน
หากคุณเป็น Designer คุณอาจกำลังอ่านบทความนี้อยู่บน iMac ขนาด 27 นิ้วอยู่ แต่ User ส่วนใหญ่ของเรา คงไม่ค่อยมีใครที่ใช้จอ Monitor ขนาดใหญ่แบบนี้
ดังนั้น Window Resizer จะตอบโจทย์ในเรื่องนี้ มันเป็นเครื่องมือที่ช่วยชีวิตอย่างแท้จริง เมื่อต้องพิจารณาว่า Site ของคุณมีลักษณะอย่างไรเมื่อมันอยู่ในหน้าจอที่ขนาดแตกต่างกัน เพียงแค่เปิด Extension แล้ว Click ที่ Preset Viewports หรือ สามารถป้อนข้อมูลที่คุณต้องการกำหนดเองได้อีกด้วย
2. Loom
มีคนกล่าวว่า “ภาพหนึ่งภาพ แทน คำพูดเป็นพันคำ” และ Video แทนคำพูดเป็นหมื่นหรือเป็นล้าน Loom เป็น Software ที่น่าทึ่งอย่างแท้จริงซึ่งจะช่วยให้คุณบันทึก Animations, User-Flows หรือ Bugs และสามารถ Share กับทีมงานของคุณได้
ในช่วงสองสามเดือนที่ผ่านมา Brendan ใช้ Tool ตัวนี้บ่อยครั้ง มันมีประโยชน์มากเมื่อคุณพยายามสื่อสารสิ่งที่ไม่สามารถCapture เป็น Screenshot ได้ เพียงแค่ติดตั้ง Extension และกด Record เมื่อเสร็จแล้ว คุณสามารถ Share Video ของคุณ และดูสถิติได้ว่า ใครดูแล้วและสถติตอื่น ๆ อีกมากมาย จึงขอแนะนำให้คุณและเพื่อนของคุณลองไปใช้กันดู
3. Toybox
คุณใช้เคยเวลานาน ๆ ในการตรวจสอบ Elements, พยายามทำ Screenshots และบันทึก Bugs บน Site ของคุณหรือไม่ ถ้าใช้ก็อยากให้คุณลองใช้ Toybox Chrome Extension มันเป็นวิธีที่รวดเร็วที่สุดในการให้ Feedback และตรวจสอบ CSS ได้โดยตรงบน Site ของคุณ
มันก็จะคล้าย ๆ กับ InVision Commenting และ Zeplin Inspecting แต่มันจะทำใน Site ของคุณแทนที่จะเป็น Design File ไม่เพียงแค่นั้น เมื่อคุณกรอก Comment มันจะถ่ายภาพ Screenshots, บันทึก Browser Data, OS Info, Viewport Size รวมทั้งอื่น ๆ โดยอัตโนมัติ ทำให้การ Reproduce เป็นเรื่องที่ทำได้ง่าย มันเป็นสิ่งที่ “ต้องมี” สำหรับทีมงานหรือ Agency ต่าง ๆ
4. Muzli
คุณต้องการแรงบันดาลใจพร้อมกับกาแฟ (หรือชา) ในยามเช้าไหม? ถ้าใช่ก็ขอแนะนำ Muzli Chrome Extension ทุกครั้งที่คุณเปิด Browser Window ใหม่ คุณจะเห็น Feed ล่าสุดของ Design ที่ยอดเยี่ยม มันจะดึง Design Sources ที่ทั้งใหม่และทันสมัยมาให้คุณมากมาย
สำหรับ Brendan เอง เขาก็ใช้ Extension นี้มาหลายปีแล้วและมันก็เป็น Tool ที่ยอดเยี่ยมมาก
5. SVG Grabber
บางครั้งคุณก็ต้องใช้ Logo หรือ Icon บน Page ของคุณ ถ้านั่นเป็นเหมือนสิ่งที่คุณกำลังทำอยู่ ก็แนะนำให้คุณใช้ SVG Grabber ดู เพียงแค่ Click ปุ่มเดียว จากนั้นมันจะดึง SVGs ทั้งหมดที่อยู่บน Page ให้โดยอัตโนมัติ จากนั้นคุณจะเห็นสิ่งที่คุณสามารถ Capture หรือ Download ได้ตามต้องการ
แม้ Brendan จะไม่ใช้งานมันบ่อยมากนัก แต่มันก็เป็น Tool ที่ควรมีเผื่อไว้ใช้ยามที่คุณต้องการขึ้นมา
6. Page Ruler
การวัดขนาดของ Objects ใน Page ของคุณ อาจเป็นสิ่งที่สร้างปัญหาใหญ่ให้คุณได้ หากคุณเป็นคนที่เปิดใช้งาน Screenshot Tool บ่อยครั้ง ก็ขอแนะนำให้คุณลองใช้ Page Ruler extension ดู
เพียงเปิด Extension แล้วลาก Box เพื่อวัดขนาด แค่นี้คุณก็ใช้งานได้แล้ว
Dark Mode ถือเป็น Tool ที่ Designer ควรต้องมีอย่างแท้จริง ดังนั้น นี่คือสิ่งที่ถูกสร้างขึ้นใน Chrome Dev Tools และแม้มันไม่ใช่ Extension แต่คิดว่า เราควรกล่าวถึงมัน
เพียงเปิด Dev Tools > Click ไปที่จุด 3 จุด ที่มุมบนขวา > Click ที่ Settings > จากนั้นก็เปลี่ยนสีเป็น Dark ก็แค่นั้นเอง
8. ColorZilla
บางครั้งคุณอาจต้องการวิธีที่จะดูค่าสี อย่างรวดเร็ว และ ColorZilla ก็เป็นทางออกที่ดีสำหรับการทำเช่นนั้น เพียงวาง Mouse เหนือ Element ใน Page ของคุณเพื่อดูค่าสี Hex และ RGB คุณสามารถ Click เพื่อ Copy ไปยัง Clipboard ของคุณได้อย่างรวดเร็ว ซึ่งมันรวดเร็ว ง่าย และมีประสิทธิภาพ และพวกมันก็มี Feature อื่น ๆ อีก
อีกหนึ่ง Extension ที่ง่าย และสวยงาม ที่คุณสามารถ Download ได้ก็คือ Fontface Ninja โดยคุณสามารถวาง Mouse บน Elements ที่ต้องการ เพื่อดูว่ามันใช้ Font อะไรอยู่ คุณสามารถไปโดยตรงจาก Font บน Page เพื่อซื้อ โดยใช้ Extension Toolbar มันเป็น Extension ที่ทั้งใช้งานง่ายและสะดวกที่คุณคุณมีไว้
10. Custom Cursor
Custom Cursor จะทำให้คุณสนุกสนาน ไม่รู้สึกเบื่อ ด้วยความสามารถในการเปลี่ยน Default Curser ให้เป็นรูปแบบที่คุณต้องการ รวมถึงให้คุณ Upload Curser แบบที่คุณกำหนดเองได้ตามต้องการอีกด้วย
ที่มา: https://uxdesign.cc/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด