【Framer評價】9個特色讓你快速了解這款線上UI架站工具

文章最後更新於 2023 年 11 月 11 日

今天要介紹的網站架設工具是讓我蠻驚豔的『 Framer 』。

它在使用上就像是 UI 設計軟體 ( 例 Figma、Sketch )，但更神奇的是你將畫面排版完成後，網頁也同時完成了。

對網頁設計師來說，排版即等於切版，這就有點有趣了。

如果你是不會切版的 UI 設計師，那 Framer 就會是幫你把視覺直接變成網頁的魔法工具。

本篇文章會涵蓋的內容如下 :

• Framer 是甚麼
• Framer 的 9 大特色
• Framer 優缺點
• 價格方案
• Framer 適合誰
• 心得總結

話不多說，我們就直接進入主題吧~

Framer 是甚麼?

Framer 與其說是架網站工具，更像是線上 UI 設計軟體。

它在繪製網頁 UI 介面的同時，也可以同步完成不同裝置 ( 桌機、平板、手機 ) 的設計畫面。

Framer 最常被拿來跟 Webflow 做比較，主要是因為他們的介面操作跟 Figma 都有點相似，而且也都有開發外掛，可以將 Figma 的視覺稿匯入到它們的頁面編輯器。

所以很適合本來就在用 Figma 的設計師使用。

最大的不同之處在於 : Webflow 需要對 html / css 至少有基本程度的了解，且對網頁切版有些概念才好上手。

那 Framer 就不需要懂上述的技能，不過如果你熟悉 Figma 的 Auto Layout 排版的話，會對你操作 Framer 有很大幫助。

使用『 partner25proyearly 』此折扣碼可享 3 個月免費試用 Pro 方案。

Framer 的 9 大特色

①. Framer AI 快速創建網站 :

對網頁設計沒有概念的人，就可以用 Framer AI 的功能，透過輸入 Prompt 來快速產生網頁框架。

另外像是企劃因為是最懂客戶需求的第一窗口，就可以將客戶需求寫進 Prompt，試試 AI 會產生甚麼樣的網頁視覺，或許會有出乎意料的靈感。

②. 介面跟 figma 70%相似，排版完網站即完成 :

下圖第一張是 Figma 的介面，第二張是 Framer 的介面，都是左邊管理圖層，右邊則是元件調整設定，中間就是視覺呈現的地方。

最厲害的就是你其實可以不用透過 Figma 先畫視覺稿，直接在 Framer 做視覺排版即可，因為排版完成後，就如上圖網頁等於完成了，還把平板、手機的版本都一次完成。

③. Figma / sketch to Framer 外掛 :

當然如果你還是習慣在 Figma 或 Sketch 先設計視覺排版的人，也可以透過 Framer 開發的外掛 ( 如下圖的 Figma to HTML with Framer )，就可以將你在 Figma 的視覺直接 Copy 到 Framer，設定一些動態之後就可以發布網站囉。

④. 有許多好用元件可以直接套用 :

元件的好用之處就在於直接拖拉進畫面就可以應用，以下分享我在使用 Framer 製作網頁時覺得好用的元件。

輪播元件 :

分別有以下三種類型 :

• Ticker : 像跑馬燈效果，可以一直重複輪播
• Slideshow : 就像很多網站會有的首頁大 Banner 輪播效果，可以用箭頭控制上下張
• Carousel : 可以用滑鼠滾輪控制輪播效果

表單 :

表單是很實用的功能，最常用來收集潛在客戶名單。

icons:

從 Framer 可以直接插入內建好的 icons ，而且種類繁多，下圖只是所有 icon 的一小部分而已。

頁面區塊元素:

內建多種頁面元件、區塊元件以及導覽列元件等等，可以加速你繪製網頁的速度。

動態元件:

Framer 有已經製作的動態元件，像是文字動態、雜訊動態、顏色漸變循環動態等，直接 copy 貼上就可以使用了。

⑤. 有免費模板可以直接套用 :

有許多有設計感的模板都是可以免費使用的，尤其是作品集類別最多。

⑥. 有免費方案可使用 :

Framer 最佛心的一點就是有免費方案，大部分的功能都開放使用，其中有兩點我覺得很棒的是 :

• 可以無限創建新的專案
• 可以建立多語系功能 ( 免費版限多一種語言 )

多語系是透過 AI 翻譯，覺得不順的地方也可以手動調整。

使用『 partner25proyearly 』此折扣碼可享 3 個月免費試用 Pro 方案。

⑦. CMS 功能 :

CMS 功能就是內容管理系統，最常見的就是部落格文章，也可以拿來製作作品集專案、最新消息、產品列表等，是相當實用的功能。

而且 CMS 的內容呈現方式你也可以自己設計，下圖是 Framer 預設的文章模板。

⑧. HTML Paste 功能 :

這個功能蠻進階的，但是我覺得很厲害，主要就是透過 Chrome 安裝外掛後，就可以複製你覺得不錯的網頁畫面。

下圖是我隨便找了一個日本網頁來測試，點擊下圖 Chrome 外掛的紅框 Framer Icon，就可以在網頁上選擇你想複製的區塊。

雖然現在複製後貼上 Framer 的效果沒有到很理想，但我覺得是蠻有趣的功能，未來如果這個功能持續優化，那會變得很強大。

⑨. Custom Code 功能 :

這部分就是給需要用程式做一些客製化需求的人使用，畢竟客戶需求百百種，有時候還是需要部分客製化才能解決客戶的問題。

Framer 優缺點

Framer 價格方案

免費跟付費我覺得最大的差異在於 :

• 付費版可使用自訂網域
• 付費版有更多的 CMS 擴充功能
• 付費版可乘載更多的網站流量
• 付費版才能使用 custom code

如果只是要作為個人作品集網站投履歷用的話，我覺得用免費版就夠了。

但如果你的個人網站是接案用的話，那可以最便宜的方案，使用自訂網域會比較有專業正式的感覺。

那如果是作為公司的形象網站，就要評估一下網站的流量以及需不需要監測流量數據，因為選用的方案會不同，至少要用 Basic 的方案會比較好。

使用『 partner25proyearly 』此折扣碼可享 3 個月免費試用 Pro 方案。

Framer 適合誰

結合過去網頁設計的經驗以及我使用 Framer 後的感想，我覺得蠻適合以下幾種人 :

• 本來就會使用 Figma 的設計師 : 因為整體操作介面跟 Figma 就差不多，但 Framer 可以幫你把在 Figma 設計的平面稿變成有動態效果的網頁，這樣你至少可以接個人網站、形象網站等外包，因為這類網站通常不會有太複雜的後台，只要有 CMS 功能就夠了。
• 想要學習 Figma 的人 : 因為我本身就不是非常熟 Figma，我是使用 Framer 製作網頁後，反而對 Figma 更熟悉，因為不管是使用 Auto Layout 的邏輯排版，還是使用變體作切換等，概念都是一樣的。
• 需要提案簡報的企劃 : 使用 Framer AI 可以快速製作網頁的 mockup，還可以用一些簡易的動態效果，讓客戶更理解畫面的呈現。
• 接案工程師 : 因為畫面不是工程師的專長，但是 Framer 有很多現成的模板可以套用，再開啟 Custom Code 客製化程式功能，就能作出各種不同需求的網站。

Framer 心得總結

實際使用 Framer 後會覺得排版完就能完成網頁的設計很厲害，而且製作動態也很簡單，能夠從 Figma 直接 copy 設計稿進到 Framer，也讓網頁設計變得越來越有彈性。

而且透過操作 Framer 也能讓你學會使用 Figma，是我自己使用一陣子後的收穫。

雖然國外有許多人會比較 Framer 跟 Webflow，最主要原因當然是因為他們有一部分的客戶群都是針對 Figma 設計師。

Framer 跟 Webflow 都讓 Figma 設計師感受到不需要寫 code 也能將他們的設計稿用簡單的方式製作成網頁。

但我覺得 Framer 跟 Webflow 的使用族群還是蠻不同的。

因為 Webflow 是需要一點 html/css 基礎才能上手的，但 Framer 基本上只要會 Figma 或 Sketch 就會使用。

而且 Webflow 能夠匯出 html code 去做進一步的客製化，這是 Framer 目前沒有的功能，Framer 的網站還是只能綁在 Framer 使用的主機。

Webflow 匯出 html 後就看你要放在自己的主機還是其他平台都隨便你。

如果要製作客製化程度高的大型專案我會推 Webflow，如果只是小型的活動網頁、個人 / 形象網站等，那 Framer 會是不錯的選擇。