珍! 奇! 百! 賞! Figma plugins 開箱與操作

想要優化設計流程、加速產出、甚至達到人工做不到的事嗎 — 認識 Figma plugin,你將會成為一位更快樂的設計師!小編挑選出 18 個面向、 60 個套件,額外搭配 8 個操作的範例,你可以 📚 在這裡獲得練習檔案,讓我們一起進入有趣的 plugin 世界吧!
📌 此篇文章有大量圖片 & 影片,請使用電腦以提升最佳閱讀體驗!

等等,什麼是 Figma Plugin?

Figma 之所以能快速席捲全球的其中一個秘密,正是靠著豐富的 Plugins (套件,插件或稱外掛) 來補齊官方尚未支援的功能! 想像成世界各地的熱心開發者們,也一起在替 Figma 打造編輯器功能,而這些 plugin 們大多都能免費使用。

你可以從這篇: 人人都該嘗試! Figma Plugin 套件小教室 中先了解套件 & 使用套件的基本技巧。

我該如何閱讀這篇文章

這篇文章收入小編必用或是覺得體驗不錯的有趣套件。我將他們粗略分成 18 種類別、大約 60+ 個套件,同時也發布這份檔案,讓你一邊瀏覽一邊可以練習套件的操作。如果這些不能滿足你的需求,可以從每個套件介紹頁面下方 tags 區域,連結出去再探索更多! practice

🎨 Color Palettes 顏色調配組合技

良好地挑選顏色組合,可以讓設計更協調、更適合閱讀。Color Palettes 、Web gradients 替你解決親自搭配的困擾,從設定好的組合中選擇可以剩下不少時間 (選擇障礙如小編,真的用得很開心); Image Palette 則從萃取出與圖片相關的 5 種顏色,讓你的整體視覺與圖像相呼應。

📷 Photos Embedding 高畫質照片免費用

好的圖片,勝過千言萬語。使用 Unsplash 中上萬張可以商用的水水照片,襯托出你的設計氛圍!

練習 1: Unsplash + Image Palettes 圖片與色彩套件練習

🌀 Shape, SVG, and Effects 形狀與效果

要在 Figma 裡面拉出不規則形或是彎曲線並不容易,好險 Blobs、Get Waves 可以替你解勞。

而 Oblique、Isometric 則會對物件製作出歪斜效果,在設計立體感時能派上用場。

To Path、arc 讓物件或是文字可以沿著曲線擺放,想讓設計活潑起來,你可以玩一下套件中的不同參數組合!

練習 2: Arc + oblique 文字曲線效果

💠 Patterns 重複背景省時幫手

Hero Patterns 讓你使用套件提供的數十種圖案當作背景; Pattern Hero 反過來使用你所提供的圖片、物件一樣大量重複整齊排列,兩個套件可以讓背景再也不單調!

Confetti 則是在一個指定圖層中撒上慶祝的花瓣與彩帶,如果要做慶生或是賀卡時應該很有幫助

Looper 與前面介紹的沿線段擺放物件稍有不同,這裡能針對重複的物件們做出漸漸放大、旋轉的效果。

🧖‍♂️ Gif, animation, and Lottie 動畫編輯技巧

在 Figma 裡面不只做靜態設計,你也能透過 Motion、FigMotion、GiffyCanvas 製作出 mp4 或是 GIF 動畫,如果覺得自己做不夠快,你也能使用 LottieFiles 直接在設計稿中呈現 Lottie 動畫!

練習 3: LottieFiles 插入動畫

🈂️ Fonts

Web Design is 95% Typography 使用 Font Preview 讓你在挑選文字更加清楚,不用選擇後才知道字體到底長怎麼樣; Typescales、Font Scale 能幫你產生不同字級大小的設定; Variable font 則提供在 Figma 裡面使用可變式字型 (而且可以做很多細部微調!)

練習 4: Font preview + Font Scale 快速設定字體樣式與字級

如果你常常覺得放上很多圖片後 Figma 就開始卡卡頓頓的,用 TinyImage 或是 Downsize 替圖片們瘦身吧!

HEIC Import 支援在 Figma 匯入用 iPhone 拍攝的照片; Remove BG 則可以替你去掉圖片裡的背景 (可惜它是一個僅提供簡單試用的套件,你有大量需求是需要付費的)

📊 畫圖表也難不倒

儘管已經有不少工具、服務可以畫出精緻圖表,使用 Charts 可以在 Figma 中輕量地畫出長條圖、圓餅圖或是折線圖!

🕸️ Wireframe And Prototyping 流程圖 & 產品原型助手

當我們在 Figma 中要畫流程圖時,Autoflow 可以替你省下很多人工連線的時間 (或是你可以參考 👉 FigJam); 而 Wireframe, WireBox, Wireframer 這些套件可以幫你製作不同程度的產品原型介面。

📱 Device Mockups In Figma

使用 Mockup 讓設計可以嵌入在真實的畫面之中: 譬如被好好拿著的手機框框裡面、有 3D 傾斜感的畫面裡。小編實測後有不少圖片品質問題,如果可以,也試試看其他軟體或是線上服務!

練習 5: Chart + Mockup 製作圖表與嵌入真實畫面

📨 Email & Printing Templates

除了做網頁、App 介面設計,Marka 與 Emailify 提供你做 email 設計並能匯出其程式碼,讓你能真的當作信件格式寄出 ✌️; Print 則可以產生符合設計印刷規格的設計稿!

呼~看到這裡稍微休息一下,如果喜歡的話也記得分享給更多朋友一起練習! 上述 plugin 們大多是套用效果到物件,接下來,我們將介紹改善設計流程的 plugin 們!

🗃️ Tips in the File 整理檔案大補帖

設計師除了將有趣的想法藉由設計稿落地外,另外的任務就是確保設計稿有被良好整理、日後回來察看任何歷史資訊都是方便且快速的。 LilGrid 幫助你整理 Canvas 上面零散的設計物件; Order Matters 可以替你快速調整 layer 中的圖層順序。

Rename it 是命名利器,快速設定出良好且有規範的名稱,讓你的設計稿讀起來更加舒適! Find and Replace 則是讓你快速收尋 Canvas 中的文字,透過他,你可以抓到茫茫大海裡面的文字片段 🔍

Clean Document 與 Design Lint 就像是設計稿的清潔大隊,他們會掃過其中凌亂的地方、幫你標示出來,在交付設計稿前很適合給它們檢查一番!

練習 6: LilGrid + Find and Replace 整理凌亂檔案與找出 NG 文字

📐 Redline 規格標註

當我們在交付設計給工程團隊時,適當的標注規格與尺寸可以大大降低溝通的成本,確保設計不是被工程團隊「通靈」出來的!Redline、Measure 都是其中的好幫手; Annotation 則是小編製作的,使用上有任何問題歡迎給予意見 🙇‍♂️

🍀 Accessibility design 可達性設計的重要性

當我們在設定顏色、文字時,可以使用 A11y、Color Blind、Stark (需付費) 來檢查針對色盲色弱者、文字比例大小是否有符合 Accessibility (可達性) 所規範的良好使用體驗。

練習 7: Color blind 了解色盲色弱使用者的觀看視角

🈳 Mock Data & Real Data 擬真資料產生器

在設計稿內我們需要一些假資料: 人物頭像、手機號碼、地址等等。Content Reel 與 Taiwan Data Generator 幫助你快速產生大量擬真資訊; 如果是要從第三方服務匯入文字資訊到設計稿內,Google sheet sync、Coda for Figma、Context Switch 都是你的好幫手,這在文案管理時可以避免非設計人士直接動手改動到設計稿。

🔰 RWD 絕妙組合

想要查看不同尺寸下畫面呈現的情況,我們可以使用 Responsify 來一鍵產生,進一步搭配 Breakpoints,你還可以直接在設計稿中模擬 RWD 的情形!

🧱 Design System and Tokens 設計系統

建構設計系統是使用 Figma 的一個原因,儘管官方已經有提供很多殺手級的功能,使用下面這些套件將會圓滿最後一小段路! Design Tokens 可以將設計系統的參數們有系統地匯入與輸出,幫助你可以快速建構重複的元件屬性、或是交付給工程團隊使用。

Variable 是直接將 design token 套用到設計元件上,比較有特色的是它能設定的數值不一定有辦法直接在 Figma 介面中去修改,直接開啟另一扇快速批次修改物件的門!

Style Organizer 與 Batch Styler 用於在迭代設計系統時,可以用更有效率的方式管理與局部更新!

練習 8: Variable 快速調整物件樣式

🧝‍♀️ Design → Code 祕技! 設計稿輸出

Assistant 目前支援將設計轉成 Flutter 與 React,相信這套開源工具會持續不斷地更新!

小結

恭喜你一路看到最後,這些僅是社群之中上千套件中的 60+ 個而已,每週在社群上都會有許多新套件出現。固定回來拜訪這篇文章吧,小編會不定期將自己覺得很讚的套件持續介紹給你!


Credits

  1. Useful Figma Plugins And Tools
  2. 21 useful figmaplugins for newbies