今天要來向大家介紹 Framer 教學，如果你想直接將設計好的網站變成上線的網站，那麼一定要試試！在你做完成設計稿時，同時也可以讓別人使用你架設好的網站！
More...
在文末我會附上我製作的免費部落格模板，如果你想試試透過 Framer 架設你的部落格，那就看到最後吧！
Framer 是什麼？
Framer 是一個可以通過拖拉介面來設計出一款你腦袋中的網站，在你設計完成的同時也無需在做前端架設，可以直接將網站上線，讓所有人都使用你設計好的網站。
而 Framer 的特點在於你可以將已有的設計稿轉換成網站 Ex. Figma to Framer，如果有些功能是原本介面做不出來，你也可以透過寫 Code 去做出特殊功能。
所以對於設計師來說能夠透過熟悉的介面來做出各種靜態、動態的動畫，而對於工程師則是可以節省開發時間，將時間花在真正複雜的功能上。
Framer 價格貴嗎？
跟其他架站或部落格服務相比，算是相對佛心的，因為免費就能使用，而且免費版也開放了所有基礎功能，所以當免費版用了覺得真的喜歡後再買方案就好。
只要透過上方科技宅阿高的連結註冊或登入，即可在訂閱 Pro 方案時獲得等值 台幣 1,290 元 的折扣！記得結帳時輸入，科技宅阿高專屬優惠碼：partner25proyearly
Framer 教學
樣式
可以完全自訂各個設計元件的樣式，像是透明度、圓角、匡線、陰影、Z軸、旋轉等等 ，都是在這裡設定。
不過這部分較為彈性，因為自訂程度較高，所以在一開始的學習上需要花點時間，整體來說不難啦，試過幾次就熟悉了。
RWD 響應式設計
你可以在設計的同時自由新增 & 編輯斷點，在設計時就可以直接預覽在各種螢幕下的排列，確保在各裝置都不會發生跑版的情形。
預設模板
如果是新手也無需擔心，內建了多種頁面與區塊的模板可以直接使用，而這些內建模板都是有支援 RWD 的。
內建字體與自訂字體
Framer 內建多種字體可以使用，包含常見的 Google Fonts 也都有，但如果沒有你想要的字體，他也支援上傳字體，讓你自由選擇想用的所有字體！
網站效能如何？
Framer 不像 WordPress 需要花費比較多時間在優化架構與插件，而是他都幫你做到盡可能的優化，像是上傳的圖片自動轉 .avif 檔，節省網頁在圖片載入的速度。
這點嘗試過的人就知道差別，像是在更新網頁時的速度與載入時的速度，也可以透過我提供的部落格模板玩看看 Framer！
CMS 內容管理系統
Framer 的 CMS 內容管理系統 非常彈性，除了一般的部落格文章外，只要是會重複的區塊都可以透過 CMS 達成。
而且 CMS 的區塊無需多次設定，只要將希望自動化呈現的區塊做過一次連結，後續只需要照著固定的格式去編輯內容就好。
所有內容區塊都是可以自訂順序與編輯格式的
可以透過 Collection 分類文章或是完全不同類型的內容
SEO 搜尋引擎最佳化
Framer 的 SEO 設定保留了最核心的功能，同時又能配合 CMS 的彈性區塊讓你自訂 SEO 該抓的資訊，下方為範例。
像是我在 CMS 有各種欄位，在設定 CMS 的 SEO 時就可以選擇要抓的資訊，寫好後在下方也會有預覽區塊讓你確認。
而一般的頁面就是少了 CMS，其他像是標題、網址、縮圖、Meta Description 都可以自己編輯（縮圖也可以從 CMS 抓）。
Framer 也有提供內建追蹤數據功能如下圖，如果覺得內建的無法精確分析，也可以透過連接 Google Analytics 或埋代碼的方式去抓數據。
Google Analytics 與自訂埋代碼
當你網站網址有更新時也會自動提交 Sitemap，所以包含了所有 SEO 的核心功能，同時又把介面做的簡單易用，所以在 Framer 設定 SEO 是非常簡單的！
Framer 優缺點有哪些？
優點
適合想要高度客製化網站，能夠根據你的需求做彈性調整，所以如果原本就是設計師，熟悉 Figma 等操作，那麼上手 Framer 的速度也會很快！
免費即可使用，所有基本功能在免費版都有開放，如果想要使用自訂網域、移除浮水印或是解鎖額外功能，再來考慮付費版即可。
只要透過上方科技宅阿高的連結註冊或登入，即可在訂閱 Pro 方案時獲得等值 台幣 1,290 元 的折扣！記得結帳時輸入，科技宅阿高專屬優惠碼：partner25proyearly
缺點
需要較多時間熟悉介面操作，如果完全不曾接觸過 No-Code 之類的網頁架設工具，那在初期可能會沒有頭緒。
中文學習資源較少，目前中文的 Framer 學習資源相對少很多，如果熟悉英文那國外是有不少，不過畢竟 Framer 目前還是相對少眾的工具，需要較高的自學能力。
誰適合使用 Framer？
如果是熟悉 Figma 的設計師，那麼你還可以透過 Figma to Framer 的 Figma Plugin 直接將完成的設計稿直接轉換到 Framer 中！
另外如果是單純想要架設部落格的讀者，且部落格更新頻率約為一個月 10 篇或以內，那我覺得 Framer 的 CMS 數量還是夠用的。
而且目前 Framer 對於新手友善在於有許多免費模板與元件，可以透過直接複製的方式加到你的網站之中。
WordPress、Webflow 與 Framer 哪個好？
我覺得 WordPress 還是有它的定位在，像是自有主機與許多插件，所以如果是有許多內容，頻繁更新的平台，那還是會選擇 WordPress。
但如果是以設計為主，且更新文章或內容的頻率普通，那 Framer 會比 Webflow 還要好用，而且前幾天 Webflow 才剛更新限縮流量，相對來算比較不划算。
此外 Framer 的 SEO 設定與介面操作我覺得都比 Webflow 更實用，只要在前期設定一次，之後只要負責更新內容就夠了！
Framer 總結，我推薦 Framer 嗎？
我是非常推薦 Framer 的，除了在初期無需成本即可試用外，還可以根據你的想像做任何調整，真正做到理想的網站。
而且在 SEO 優化與極具彈性的 CMS 內容管理系統，讓你除了最基本的寫文章，還可以做到許多意想不到的操作，像是我目前的 AI 工具網站要在 WordPress 上實現就有一定難度。
對於只想寫部落格的讀者，那就可以根據你的需求選擇，希望設計彈性大的就可以考慮 Framer，如果想要免費的部落格模板也可以點擊按鈕領取！
