25 สุดยอด Figma Plugin (update 2020)

25 สุดยอด Figma Plugin (update 2020)

Share:

+3

Figma เป็นหนึ่งในเป็น Prototype tool สำหรับออกแบบ web/app ยอดนิยมของ UX/UI Designer ที่มาแรงและมีคนใช้มากขึ้นเรื่อย ๆ บทความวันนี้ ได้รวบรวม “25 สุดยอด Figma Plugin” (ติดอันดับ ปี 2020) ที่จะช่วยอัพสปีด และเพิ่มประสิทธิภาพการทำงานให้ดียิ่งขึ้น 👍

1. Figma Walker ⚡️

By Kazushi Kawamura

Figma Walker เป็น Launcher ที่ใช้ Keyword Search เรียก Action หรือ Component ในโปรเเกรม Figma ใครใช้ Plugin ตัวนี้ รับประกันว่าทำงานเร็วขึ้นแน่นอน

Figma Walker

2. Figmotion

By Liam Martens

Plug-in ตัวนี้เหมาะสำหรับคนที่อยากทำ Micro Interaction หรือ High-fidelity prototype สามารถเอาไปใช้สร้าง Animation ของ Layer ต่าง ๆ ละเอียดระดับ Key Frame แบบจบในตัวโปรแกรม Figma ได้เลย ไม่ต้องกลับไปใช้ Tool แยกอย่าง Principle, Haiku หรือ After Effect สามารถ Export Animation เป็นวิดิโอ หรือ CSS/ JSON ส่งต่อให้ Developer ได้ด้วย

Figmotion

3. Roller — Design linter

By Toybox

เอาไว้คลีน Style ให้มีความ Consistency เหมาะสำหรับคนที่กำลังทำ Design System เราจะต้องสร้าง master ของ style ที่เราใช้ทั้งหมดเข้าไปใน Plug-in ก่อน แล้ว Plug-in จะ search UI ของเราทั้งหมด แล้วบอกว่ามี สี ฟอนต์ หรือ Style ไหนที่หลุดจากตัว master ของเราบ้าง แล้วอยากจะเปลี่ยน กับ master อันไหน

4. Auto flow

By Tiffany Chen

เอาไว้ใช้สร้าง Flow ของโปรแกรม แค่คลิกเลือก Frame 2 อัน แล้ว Plug-in จะสร้างลูกศรโยงระหว่าง Frame ให้อัตโนมัติ สะดวกสุด ๆ

5. Content Reel

By Microsoft

เอาไว้สร้าง mockup content ใน UI มีให้เลือกตั้งแต่ ชื่อ, เบอร์โทร, ที่อยู่, วันที่, อีเมล, URLs, หน้าคน

Content Reel

6. Responsify

By Brian Lovin

เอาไว้สร้าง Grid 12-Column สำหรับออกแบบเว็บ มีครบทุก Screen Resolution

Responsify ⚡️

7. Viewports

By Denis Rojčyk

เอาไว้สลับดูหน้าจอใน Screen Resolution ต่าง ๆ โดย UI ต้องตั้งค่า Auto-layout ไว้ถึงจะสลับ view ได้

Viewports

8. Better Font Picker

By Nitin Gupta

เปลี่ยน Font Picker ให้แสดงหน้าตาจริงของ Typeface นั้น ๆ ดูง่ายกว่าเดิมเยอะ

Better Font Picker

9. Font Scale

By Cosmin Negoita

เอาไว้ปรับ Font Size ให้ smooth ขึ้น โดยเราสามารถเลือกอัตราส่วนแบบต่าง ๆ และ Base font size ได้ ที่สำคัญหน่วยของ Font มีตารางเทียบกับ relative unit (em) ให้ดูด้วย เอาไปใช้กับ Responsive Design ได้สบาย ๆ

Font Scale

10. Palette

By Dustin Mierau

ให้ AI ช่วยสร้าง color scheme จากสีที่เราเลือกได้

Palette Figma plugin - helps you create the perfect color palette through machine learning from Colormind.

11. Themer

By Tom Lowry

เหมาะสำหรับคนที่กำลังทำ Darkmode หรือกำลังออกแบบ UI ให้ App ที่เปลี่ยนธีมสีได้ Plug-in จะช่วยเทียบสีในแต่ละโหมดให้ และสลับธีมให้

12. Clean Document

By Yuan Qing Lim

เอาไว้คลีนไฟล์ ลบ layer, group ต่าง ๆ ที่ไม่ได้ใช้ รวมทั้งปรับให้ size เป็น pixel perfect

Clean Document

13. Super Tidy

By Ismael Gonzalez

เอาไว้จัดเรียง Frame หรือเปลี่ยนชื่อ Frame ให้ดูเป็นระเบียบเรียบร้อย

Super Tidy

14. Spellchecker

by Vladimir

เอาไว้เช็คคำผิดใน UI

15. Find and Replace

By Jackie Chui

เอาไว้ใช้ค้นหา และแก้ไข Text

Find and Replace

16. Unsplash

By Unsplash

เอาไว้โหลดรูปฟรีของ Unsplash มาแปะบน UI

17. Iconify

By Vjacheslav Trushkin

โหลดไอคอนฟรีกว่า 50,000 ไอคอน จาก Material Design, FontAwesome

Iconify

18. Brandfetch

By Brandfetch

เอาไว้ Search หาโลโก้ของ Brand ต่าง ๆ

Brandfetch

19. Charts

By Sam Mason de Caires

เอาไว้สร้าง Chart โดยสามารถตั้งค่าแกนต่าง ๆ ได้เอง

Charts

20. Nisa Text Splitter

By Orkhan Jafarov

เอาไว้แยก Text หลายบรรทัด ออกเป็นหลาย ๆ layer เหมาะสำหรับคนที่กำลังออกแบบตาราง

Nisa Text Splitter

21. Icon Resizer

By Idan Arbel

ปรับขนาด bounding box ของไอคอนให้ตรงกับขนาดมาตรฐาน

Icon Resizer

22. Time Machine

By Cash App

โปรเเกรม Figma มี version control ของตัวเองอยู่แล้ว แต่บางคนอาจคิดว่ามัน backup ให้ถี่ไป อยากเลือกเวลา backup เอง Plug-in ตัวนี้ช่วยได้

Time Machine เอาไว้ทำ Version Control แบบ manual Plug-in จะ copy Frame ที่เราเลือกแล้วสร้างตัว Clone ไปรวมไว้ในหน้า “Time Machine” พร้อมกับแทรกวันที่กับเวลาบนชื่อ Frame ให้ด้วย

Time Machine

23. A11y – Color Contrast Checker

By Tiffany Chen

Plug-in ตัวนี้จะช่วยเช็ค Accessibility ว่าตัวหนังสือกับพื้นหลังของ UI ผ่านมาตรฐาน Contrast ของ WCAG (Web Content Accessibility Guidelines) รึเปล่า

A11y - Color Contrast Checker

24. Color Blind

By Sam Mason de Caires

เป็น Plug-in อีกตัวที่ช่วยเช็คเรื่อง Accessibility ว่าสีของ UI ที่เราใช้อยู่ตอนนี้ ใช้กับคนตาบอดสีได้รึเปล่า

Color Blind

25. Isometric

By Wilson Lam

เอาไว้ปรับ UI ให้เป็น Isometric Grid

Isometric

ไม่พลาดบทความใหม่ๆ จาก BetterUXUI.com

1. กด Like Facebook page BetterUXUI

2. สมัครและอ่านบทความทางอีเมล

+3

Share:
Back to Top