林育正 Riven

Follow

--

完整介紹 Framer 好用之處與基礎使用教學

你好 我是設計師 Riven🐻‍❄️

今天我們要來介紹的是 Framer，我們可以用它來設計網頁，並在完成設計稿的同時，就已經是被開發上線的網站了。

早在 2018 年的時候我們就搶先體驗過 Framer X，而前陣子我們也介紹過最新功能 Framer AI，不過有許多同學在透過 prompt 生成網頁之後，會很快就遇到不會改動的情況；所以我覺得這是個不錯的時間點，來好好聊一下 Framer 最基礎的使用操作，以及為什麼要選擇 Framer。

www.framer.com

Framer 是一個給設計師和開發者使用的軟體，可以拿來做 UI 設計和網站開發，或是拿來弄高保真的原型也可以。

我覺得 Framer 最強的是結合了設計與 Coding 的優點，對設計師來說可以做出動態和互動效果更好的體驗，尤其是以前端技術作為佈局的框架，給開發者操作也是完全沒問題的。

功能面來看和 Webflow 差不多，而介面跟 Figma 很像；整體使用門檻偏高，你可能會需要同時具備設計與程式的基礎，才能夠 100% 發揮 Framer 的功能。

因此，對於非設計和資訊相關工作者來說，Framer 不是一個新手友善的方便工具；不過若是能透過 Framer 來學習 UI 設計與前端開發，這會是能夠帶領我們追求技能專業達到更高境界的絕佳選擇。

而因為 Framer 在設計與開發上實在是千年一遇般太好用了，我也選擇將 Framer 加入到最近我正在籌備的 AI 設計線上課程當中，會有更完整深入淺出的 UI 設計與網站開發教學，並且加入 AI 技術在設計流程裡，有興趣的同學可以透過以下連結了解更多：

go.rar.design