Webflow 筆記 — Library 比較與選用
Webflow Library 是什麼？
Webflow Library 是 Webflow 的一個功能，允許我們運用第三方作者共享出來的可複用的組件來快速組出我們的網站。組件可以是任何東西，從按鈕和圖像到複雜的布局和動畫。
在選用 Library 時，為了避免 Webflow 網站的樣式檔案過大、並要維持一致性，需要慎選我使用的 Library 數量。
以下是我的目前的挑選對象與原則 :
挑選對象
1 ) Untitled UI
Untitled UI 的 Library 會給完整設計完的 UI Section，其設計細節很符合我自己的設計習慣 ( 接近 Ant Design 與 Bootstrap )。
2 ) System Flow
System Flow 在 Tab / Form 等細部元件上補充了我在 Untitled UI 中未被滿足的需求。
3 ) Flowponent ( 外部 )
Flowponent 比較像臨時找可複用的設計的地方，它有個獨立的網站並可一鍵複製想要的 UI 到 Webflow 中，可能的缺點是在其中複製的 Section 因為來源混雑，所以 Grid System 各自不同，使用太多的話需做不少事後整理。
4 ) Relume Library ( 待嘗試 )
Relume 乍看之下都只給 Wireframe，以”快速組裝”、”低學習曲線”來考慮的話不是首選，但後來我發現其生態系 ( AI 工具與社群 ) 極為龐大，因此排入我的清單中。
挑選原則
1 ) 版型設計符合情境
2 ) 設計風格
需要是我可以掌握、欣賞的風格，例如 Untitled UI 的元件尺寸、字級、border radius 等細節是目前最符合我自身的設計習慣。
3 ) 元件完整度
各種常用情境都能覆蓋到，SystemFlow 在這方面給了我良好的補充，包含 Tab 與 Form 元件，這在做 SaaS 型網站時可以給我更多幫助。
4 ) 具 Figma 設計稿
與 Webflow 一對一 Mapping，方便切換至 Figma。
5 ) Follow Client-First Guideline
Client-First 是 Finsweet 這間 Agency 針對 Webflow HTML/CSS 結構提出的指南，目的是讓根據指南做出的 Webflow 檔案更方便未來的維護，我發現多個 Library 都遵守 Client-First，包含 Untitled UI、Combine Library、Relume，使用同樣遵守 Client-First 的 Library 有助於我混合使用多組 Library。
6 ) Tutorial / Document
有的 Library 提供運用教學，而不僅是複製用的模板，如 System Flow 與 Relume，但這意味著學習曲線。如果只是急用或小量使用的設計師，其實不需要。
7 ) 生態系
Relume 的生態系遠比 Library 庫中的展現龐大，包含自己的社群、Showcase 投稿、以及新推出的 AI UI Design Workflow ( 要錢 XD )；如果預期自己未來 webflow 的使用量大的話，值得深入學習 Relume 的體系。
漏網之魚
1 ) Flowbase
Component 與 Template 數量多、同時也開發 Chrome Extension 幫助 Webflow User 操作方便，但乍看之下 Component 多是收費項目，因此觀望中。
2 ) Flow Elements Library
只是一個較為小型的 Library，但專注於 Dark Theme 且細節精緻，我認為做 Dark Theme 網站時可能會有幫助。
3 ) Walsh Webflow Library
直接給與一整頁 Landing Page Template 來複製，完整度高、設計細節也接近我的習慣。
結語
透過寫這篇文章，我將 Webflow Free Library 掃描過一次，以確定自己使用的是最好用且有延展性的組合，同時將我挑選 Library 的決策記下來。
也因為近期使用量大、邊用邊查資料，才輾轉發現 Client-First 與 Relume 等體系，這將是我之後的探索方向之一。
最後附上一篇其他作者的 Library 分析文，對 Relume 與其它幾個候選者有更豐富的介紹。
