完整介紹 Framer 好用之處與基礎使用教學
你好 我是設計師 Riven🐻❄️
今天我們要來介紹的是 Framer，我們可以用它來設計網頁，並在完成設計稿的同時，就已經是被開發上線的網站了。
早在 2018 年的時候我們就搶先體驗過 Framer X，而前陣子我們也介紹過最新功能 Framer AI，不過有許多同學在透過 prompt 生成網頁之後，會很快就遇到不會改動的情況；所以我覺得這是個不錯的時間點，來好好聊一下 Framer 最基礎的使用操作，以及為什麼要選擇 Framer。
透過上面連結註冊後，可獲得 3 個月免費 Pro 訂閱方案（等值 $1,290）。
Riven 讀者專屬折扣碼：partner25proyearly
什麼是 Framer
Framer 是一個給設計師和開發者使用的軟體，可以拿來做 UI 設計和網站開發，或是拿來弄高保真的原型也可以。
我覺得 Framer 最強的是結合了設計與 Coding 的優點，對設計師來說可以做出動態和互動效果更好的體驗，尤其是以前端技術作為佈局的框架，給開發者操作也是完全沒問題的。
功能面來看和 Webflow 差不多，而介面跟 Figma 很像；整體使用門檻偏高，你可能會需要同時具備設計與程式的基礎，才能夠 100% 發揮 Framer 的功能。
因此，對於非設計和資訊相關工作者來說，Framer 不是一個新手友善的方便工具；不過若是能透過 Framer 來學習 UI 設計與前端開發，這會是能夠帶領我們追求技能專業達到更高境界的絕佳選擇。
而因為 Framer 在設計與開發上實在是千年一遇般太好用了，我也選擇將 Framer 加入到最近我正在籌備的 AI 設計線上課程當中，會有更完整深入淺出的 UI 設計與網站開發教學，並且加入 AI 技術在設計流程裡，有興趣的同學可以透過以下連結了解更多：
絕佳的 UI/UX 使用體驗
因為教學工作需要，幾乎所有現有的架站工具我都使用並研究過了，像是 WordPress, Webflow, Wix 等等。
而 Framer 身為一款綜合 UI 設計和 Web 開發的軟體，在自身的介面與體驗上可以說是最頂了！符合當代設計工具的設計語彙，同時在開發上許多細節真的是要親身經歷過就知道真的好用。
Framer 就跟大多數的 UI 設計軟體相同，我們可以使用簡單的屬性控制來設計每一個物件的樣式（Styling），例如填充、邊框、濾鏡，甚至是寫實的陰影效果，並且可以使用文字樣式和共享顏色來確保在整個項目中一致地設計頁面。
No Code 不需要寫程式碼
No code 是指使用圖形化使用者介面，而非傳統的程式碼撰寫，來設計應用程式或網站的方法。這種方法讓沒有程式撰寫經驗的人也能製作複雜的數位產品。
而 Framer 也是 No Code 的做法，可以透過視覺化的編輯與拖移物件的方式設計網頁，並且我覺得最厲害的地方在於整體架構仍依循著前端開發的框架走，要進行深度開發調整來做出體驗更好的設計是完全沒問題的。
而在加入 Framer AI 技術之後，在設計上又再更加速了，我們可以透過 prompt 描述詞來建立基礎的網頁設計，並決定配色與字體方案，然後再用 Framer 裡面的介面來調整設計稿，並直接發佈上線。
完美搭配 UI 設計軟體
我們可以使用熟悉的 UI 設計軟體，例如 Adobe XD、Sketch 和 Figma，在完成設計稿之後，可以直接與 Framer 相容，而不用重新開始一個新專案，在數位產品的開發上具備靈活性和自由度。
例如原本的設計專案是在 Figma 上，除了可以直接用來建立新的 Framer Project；如果只要部分轉移，只要在 Figma 的 Plugins 安裝 Framer Copy Paste 擴充，就可以隨時複製和貼上設計元件。
也就是說，我們可以將 Framer 當作是 Figma 的跳板，直接將設計稿轉成網頁前端程式碼；而實際上 Framer 也有一款叫 Figma to HTML with Framer 可以做到這件事情。
快速建立 Pages and Sections 模組
Framer 可以透過內建的 Page 和 Section 模組來建立網頁，不是那種隨隨便便的，而是符合簡潔版面設計且相當實用的網頁組件，我們可以用來作為 UI 設計的初始樣本，藉此來長出更多內容。
Pages 包含 Landing page, Portfolio, Blog 等常見頁面；而 Section 則是有常用到的 Price, FAQ 和卡片式的區塊等；都可以為網站建立基礎的佈局。
堆疊和網格（Stack and Grid）結構
Stack 和 Grid 是兩種常見的版面配置方法，用於整齊地組織和排列設計元素。在 Framer 中，這兩種工具都可以用來做出響應式設計，即能夠適應不同螢幕大小的設計。
Stack 是一種最基本的佈局方式，可以將多個設計元件按照一定的順序從上到下或從左到右排列，並垂直或水平地堆疊起來。當你在堆疊中增加或移除元素時，其他元素會自動調整位置以填充空間，這使得堆疊非常適合用於需要自動調整的版面配置，例如導覽列(Navbar)。
在許多流行的開發框架中，例如 Bootstrap 或者Flexbox，都有使用 Stack 的概念。在這些框架中，Stack 被用來建立響應式佈局，讓元素能在不同的螢幕尺寸上自動調整。
Grid 是一種更複雜的佈局方式，它將介面劃分為數個等寬或等高的單元，然後將元素放置在這些單元中。主要優點是提供了一種清晰、一致的方式來組織介面元素。
Grid 可以讓設計師輕鬆建立複雜的佈局，並保持介面的均衡和對稱。在許多流行的設計框架中，例如 Bootstrap 5，都有使用 Grid 系統。
Stack 和 Grid 提供了大量的靈活性，並且可以根據需要進行細微的調整，例如改變間距、對齊方式或巢狀包覆。這也使得 Framer 能夠在做設計的同時，也建立起前端程式的結構；不過對於新手來說剛開始會需要皺點眉頭學一下。
響應式設計（Responsive Design）
除了上面提到的 Stack and Grid 佈局方法，在 Framer 也能透過新增 Breakpoints 斷點，直接建立 Tablet 和 Phone（也能 Custom）尺寸的工作區域，並排在一起的頁面可以更快地調整各個裝置尺寸間的響應式設計（Responsive Design）。
而又因為 Framer 自身結構的關係，我們可以在動電腦或手機尺寸的設計稿時，同時看到其他斷點的自適應變化非常不錯，可以實現一次做三種版面的設計體驗，與其他架站工具只能透過預覽分別編輯的設定比較起來，真的是用過就會說讚。
Positioning 定位與 Viewport Pinning 釘選
在網頁設計中 Pinning 是一種常見的元素控制，可以在網頁滾動或瀏覽器窗口大小改變時保持其位置，比如說固定側邊欄選單、對話按鈕等；而在技術上通常會使用 CSS 的 position: fixed; 或 position: sticky; 屬性來實現，具體使用哪種技術取決於你想要實現的設計和用戶體驗。
而在 Framer 當中這件事情變得相當簡單，在選中物件後於 Position 可以切換狀態，接著就能再 Pinning 更改釘選位置（下圖藍線）。
使用 Position 定位選項可以來固定導航欄、側邊欄和背景，如果是將其固定在網頁頂部或底部，那麼使用者可以隨時滑動都能看見，不需要滾動回上方位置。
滾動動態效果（Scroll Animation）
在 Framer 內可以輕鬆按幾下來設計動態效果，例如使用強大的視差滾動（Parallax scrolling）使網站栩栩如生，搭配不同物件的位移觸發，令其脫穎而出。
而使用這些動態效果需要注意力道與出現頻率，如果過度出現會讓網頁使用起來感到焦躁，同時也會降低質感；不過 Framer 在參數的控制上做得還不錯，在基本操作上都不會有太過頭的特效產生。
再透過 Scroll Speed 調整個別物件的滾動速度，進而產生視差，就是 Parallax scrolling 視差滾動。
除了網頁設計之外，這效果也大量應用在橫向卷軸遊戲當中，例如瑪莉歐和楓之谷，隨著人物移動時包括背景圖、草叢、跳台等移動速率不同，都會產生很好的沉入感。
而說到滾動的動態效果，有一個相較之下比較困難，不過效果卻很好的 Scroll Variant（滾動變體）可以讓網頁滾動時讓既有物件做樣式上的變化，例如讓導覽列隨著背景變換顏色，可以帶來很讚的視覺效果。
Components 元件狀態
Components 可以在不同的組件變體之間設計視覺過渡，例如一個 button（按鈕）物件，我們可以新增 Hover（懸停）以及 Pressed（按壓）兩種狀態，這是設計中兩種常見的互動狀態，特別是在按鈕等可點擊元素上。
Framer 可以輕鬆調整懸停和按壓狀態時的視覺效果，並使用觸發器和延遲來建立自定義過渡動畫。
例如，你可以設置當一個按鈕被懸停時，它的背景色將逐漸變為另一種顏色，或者當它被按下時，它的大小會輕微地改變。這些細節都可以增強用戶體驗，並讓你的設計看起來更專業和吸引人。
Linking 構建網站
我們都知道一個完整的網站，會由數個網頁連結組成，而除了專注於單一頁面的 UI 設計之外，整體網站所提供的一致性也是影響使用體驗的重要指標，而這部分用 Framer 也能夠輕鬆地達成。
而在 Link Styles 可以一次性設置所有連結的樣式，包括預設、懸停和當前頁面狀態；此功能使您可以輕鬆地為網站的連結創造一致且具有視覺吸引力的設計，從而節省您在樣式設置過程中的時間和精力。
發佈網站與版本控制
Framer 作為一款能夠架設網站的工具，也當然有提供網站發佈和維護的功能，除此之外也可以自訂網域、版本回溯等實用設定，同時在伺服器連線速度上，經過實測也是非常地快，可以放心將網站內容託管在 Framer 的服務器上。
CMS 內容管理系統
那如果我們想要像在 WordPress 或 Medium 等部落格平台發佈文章， Framer 也同樣能夠做到，並且這部分出乎意料做得還不錯。
我們可以用 Framer 內建的 CMS 系統，來撰寫文章並更新網頁內容，也可以分出權限讓客戶或同事來使用。
SEO 搜尋引擎最佳化
既然 Framer 可以在網站上設計介面並發佈網站，還可以經營部落格撰寫文章，那再加上 SEO 最佳化的設定，就會是非常完整的架站工具。
例如可以為頁面提供標題和描述，Framer 會針對搜尋引擎進行最佳化。我們可以輕鬆編輯和管理搜尋引擎結果中顯示的資訊，使其成為提高網站可見性和排名的解決方案。
而在更改網頁標題和網址後，也會自動提交 Sitemap 網站地圖，確保搜尋引擎能夠找到最新的內容。
無論是構建簡單的頁面還是複雜的 Web 應用程式，在 Framer 中使用標記都是確保網站內容正確組織且易於訪問的有效方法。
網站主機快速載入
最後，還有一個會影響網站使用體驗的重要事情，就是運作速度。即便擁有完整體系的設計介面和架站功能，Framer 的網頁載入速度還是非常快，可以直接註冊 Framer 免費體驗看看就知道，不用太多說明。
Framer 會在部署每個網站後立即對其進行預渲染（也稱為伺服器端渲染）。預渲染的 HTML 確保 Google 機器人可以在不運行任何 JavaScript 的情況下分析網站，並以相當大的速度提升，這將有利於您的網站在排名中，並且也會將其發送給訪問者，從而縮短載入時間。
Framer 使用最新的網路技術和性能最佳化技術，做出來的網站能在 Google Lighthouse（燈塔）上得到很高的成績，如首次內容繪製、速度指數和互動時間，也代表著能有效利用資源並帶來出色的用戶體驗。
而我們需要做的就只是按兩下「發佈」按鈕，剛設計好的網站將在幾秒鐘內部署。Framer 託管基礎架構是相當厲害的，能提高易用性、速度和可靠程度。利用亞馬遜網路服務 （AWS），並具有 CloudFront、S3 和多個具有大型記憶體緩存的負載平衡前端，確保網站可以從世界任何地方以最佳性能瀏覽。
Framer 總結：超級推薦
不用另外去找虛擬主機來用，可以放心將網站放在 Framer 上，既能夠在上面滿足設計的控制慾，也能夠達到開發上的功能需求，同時要寫文章內容或 SEO 最佳化也不是問題。
整體來看 Framer 幾乎能說是沒什麼缺點，而就算分開來看，在 UI/UX 設計上也是很好弄，同時不管是要自己開發或交給工程師，以前端為基礎的網站架構都很通用。
我覺得 Framer 很適合給設計師和工程師來做網站，除此之外由於還有主機服務和 CMS 內容管理等功能，也很推薦給要自己做網站的自媒體內容經營者，或正在創業的個人/團隊等，如果你對介面設計美感或使用感受有一定的 sense 和要求，一定能懂 Framer 能帶來前所未有的網站設計體驗。
透過上面連結註冊後，可獲得 3 個月免費 Pro 訂閱方案。
Riven 讀者專屬折扣碼：partner25proyearly