Webflow 筆記 - 以 Relume 快速設計網頁的工作流與心得

Getter’s trial of Relume’s Figma to Webflow workflow

前言

在之前的探索 -《Library 比較與選用》之中，我發現 Relume Library 的運用生態系龐大，這次的分享就是我實際學習 Relume 工作流並實戰一個網頁 Redesign 後的心得。

工作流

重要原則

1. 先在 Figma 完成設計，再進 Webflow 編輯。
2. 不使用 Figma to Webflow Plug-in ( 由 Webflow 官方出品的小工具 )
3. 在 Figma 中的 Relume Component 可以 Detach、但不要改名，以免在 Webflow 版 Relume Library 時找不到要拉哪個相對應元件

Figma Phase

1. 事前準備 — 將設計網站要用的 Referece 與多媒體素材、Copytext 準備好。
2. 到 Relume Library Figma Kit 中挑選適合的 Section Component，複製到自己的 Figma 中排列組合，成為完整頁面 Wireframe
3. Relume Library 都是 1440px 的 Layout 不含 RWD 版本，不過 Webflow 版中所有 Component 都有預先設計好的 RWD，可以先不用設計。
4. 不一定會有 Component 完美符合我們的設計主意，但可以 Detach 後做微調，儘量用刪去法來將 Relume Component 裁剪、組裝出我們想要的元素而不要自己添加 — 因為 Relume 有自己一套基於 Finsweet 的 Size 與 Padding 系統，理解並適應它需要額外的成本。
5. 多排幾組 Wireframe、挑選最好的設計方案。
6. 貼入素材與 Copytext 到各個 Section 中。
7. Mockup Styling，進行整頁的視覺設計、特別是跨 Section 的設計。

Relume Library 中有整頁的 Template 也有局部的 Section Layout

在 Figma 中組裝、嘗試 Wireframe 後再做 Mockup

Webflow Phase

1. 複製整個 Relume Library Style Guide 到自己的 Webflow Workspace 中，改名、作為新設計的網頁 Project
2. 到 Relume Webflow Library 頁中點擊「Install library — Free」將其安裝到第一步的新 Project 中，如此一來在其編輯界面中就可使用 Add → Layouts → Relume Library Lite 來使用免費版 Relume Component
3. Mapping — 依 Figma 中我們使用到的 Section Layout 名稱 ( 例如 Header / 44 ) 在 Webflow Relume Library 中找到相對應或相似的 Component 並加入編輯區中
4. 網頁結構遵循 Client-First Page Structure
5. Relume 過半的 Layout 需要付費，但僅憑免費部分還是能讓我們拼裝出付費版本的 Layout
6. 組裝好整個網頁的 Wireframe 後，填入素材與 Copytext
7. 客製 Relume 樣式、原創新元素，以符合自己的 Figma Mockup。
8. Publish Website 並檢查 RWD。
9. 將所有客製過的 Relume 樣式 CSS 改名，以免未來加入新的 Relume Component 時出現樣式衝突，同時這也能幫我們快速辨別哪些元素是客製過的。
10. 將此 Project 併入我的個人付費 Project 中，以使用 Webflow 付費功能 ( Form, Custom JS/CSS )。
11. 加入動態特效設計。
12. 正式站上線 ( 我的個人練習成品見此 )。

Relume Component 和我實際客製過的對比

參考資料 : Relume 官方的 Figma to Webflow Demo

心得

優點

1. 設計與建站速度的確快很多，多媒體與 Copytext 的準備反而佔 50% 以上時間。
2. 以往用 Webflow 手刻一個含 RWD 的 Secion 元件就費 1~2 個小時，配合 Relume 我可以將這種工作聚焦在網頁第一屏 ( Hero ) 與 CTA 就好。
3. 不會有驚喜 — 使用已有套色彩樣式的 Library 時，會連帶其使用的圖片與色碼進入我們的 Webflow 專案中，需要逐筆去調整成我們自己的樣式。在有 RWD 的情況下容易有細節沒調到而出現不必要的驚喜。
4. Template 減法概念很實用。
5. 先在 Figma 做設計稿，方便做跨屏的視覺設計。

限制

1. Relume 免費版有一定的限制 — 可直接拉進 Webflow 的 Layout 較少、無法使用 CSS Sync 功能 ( 客製 Relume 樣式後再從 Library 加入的會直接套用 )，所以我算是還未完整體驗 Relume 的效率。
2. 無內建動畫做使用 — 相對的 Untitled UI 等其它 Library 有的有提供，在只是小量客製的情況下使用它們不失為更速成的解法，只是自由度會較 Relume 低。
3. Figma 中不提供手機版 Wireframe、Relume 做的設計稿無法用 Figma to Weblofw Plugin 直接把 RWD 帶進 Webflow 中，有些不便與可惜。

結語

本次的分享到此告一段落，這個案件是我根據市面上某企業官網做的 Redesign，所用圖片、標語、Logo 皆透過 AI 工具重製、去識別化。

目前的成品見此，在這個作品中我同使也在試用 Spline 這套 3D 工具，相關心得就留待未來分享，感謝觀看！