從設計師角度學習 Framer Part 1：前言與觀念

*Note: 此系列文章不適合套用在 Framer X 。

從設計師角度學習 Framer Part 2：從 Sketch 到 Framer

Sketch

Sketch 是近年來每個 UI UX 設計師必學軟體之一。因為直覺又精簡的操作，受到大家的喜愛。接下來的教學，將著重在如何把 Sketch 裡面的檔案匯入到 Framer。 所以還沒有接觸過 Sketch 的朋友可以先花點時間弄懂它：）

Framer 原型小插曲：Mapbox 地圖應用

在進入第四篇基礎教學前，想要跟大家分享一個比較進階的 Framer 應用。那就是如何在 Framer 上，顯示自己在 Mapbox 設計過的即時地圖，並真的可以放大縮小喔，讓各位可以大大的提高產品原型擬真度喔！

FRAMER FLOW 初體驗

Framer 不適合製作頁面流程 (暫時)

建議大家不要拿 Framer 來製作頁面流程的原型。因為有比 Framer 更方便的工具，像是 Prott, Flinto 以及 Invision 等等。

用 Framer 學習互動機制的設計與表達

作為一個「UIUX」或「互動」設計師，需要有能力清楚地表達自己所設計的「互動機制」，特別是在跟工程師溝通的時候。如何能用「有邏輯」「工程師能懂的文法」來表達，就是設計師需要學習的部分了。

從設計師角度學習 Framer Part 4：Draggable & Pinchable 物件

恩⋯⋯沒想到 Part 4 離 Part 3 會相隔那麼遠的時間。這中間 Framer 有了許多重大更新，使得前面幾篇的教學有點老舊了，之後會找時間更新一下。

Framer JS 資源分享

歡迎留言分享更多資源！

官方網站資源 — framerjs.com

Framer Tips — Responsive for multiple devices

讓你製作的 Framer 可以在不同裝置上正確顯示（長寬比相同的話⋯）

Framer — PageComponent & Drag 的應用案例