我的 UI/UX 線上作品集:為何我選用Framer 做作品集架站平台?

Jerry

2026/1/10

Hi~我是 Jerry

我是一個跨領域的 UI/UX 設計師,目前剛畢業,全職接案中

今天想和大家分享我用 Framer 做的第一個網站:我的互動設計碩班畢業 UI/UX 線上作品集:Jerry Chu Design。同時也想要聊聊我轉換到 Framer 的心路歷程,以及為什麼我認為 Framer 是個對 UI/UX 設計師來說極有潛力的網頁架站工具~!

背景歷程

先簡單帶過一下我的作品集網站歷程。

在 2017 年我是一個 3D 動畫師,需要一個展示自己的 Showreel 和動畫作品的平台,之前一直是用 Behance 作為我的作品集:JerryChuWorks。理由很簡單,是因為認識的動畫師們都在用 Behance 分享自己的作品,甚至有的台灣動畫師大神還得過 Behance 認證的標籤,對我來說這個平台是一個創意的聚集地。


到了 2021 年,我剛辭掉工作去準備申請國外研究所。當時突發奇想,想去學國外厲害的藝術家一樣去做一個自己專門的網站。在當時畢竟想要轉領域到 IT 底下的互動設計,也申請了雪梨的互動設計所。

我是真的有打算自己試試看去寫一個網頁,還到處查了資料去了解什麼是 IP、什麼是 Domain Name,甚至還寫了一篇學習筆記文。但結果出於自己的惰性與遲遲無法對網站技術開竅,最終還是決定選一個好上手的架站工具來快速幫助我把自己的作品曝光。

當時我選用的平台是 Wix,理由很簡單:快、免費、不少人推薦、而且不用特別去理解網頁程式語言與網頁工程等專業技術。想著反正未來有機會在碩班可以邊學程式邊做網站就把自學 IT 技術這件事情忘了,也同時完成了我第二版的作品集網站:JerryChuPortfolio


回到今年 2025 年 6 月,好不容易從互動設計碩班畢業,為了讓自己能夠順利得到一份 UI/UX 設計的工作,我鉅細靡遺的將每一個專案應用的 UX 設計流程列的清清楚楚,準備放在我的 Wix 網站上。

準備 UI/UX 的作品和動畫的作品的思路完全不同,不單單只是放你自己的設計稿而已,同時也要把整個流程和解決問題的思維展示出來,以下是我當時用 Figma 做的網站設計稿:

很長~吧

我想這時候就是一個我想要轉換平台的轉捩點了:我的內容真的真的太長了。

我記得當時開開心心的做好設計稿準備一個個把元素、圖片、文字、排版放進 Wix 裡時,被撲面而來的工作量嚇了一跳:我真的有辦法完成我的作品集嗎??

Framer 的優點

還好,我的朋友們推薦我用 Framer(好像一句廣告台詞)

這裡開始進入正題:為什麼我選用 Framer 做我的 UI/UX 線上作品集?他的優點是什麼呢?我列出了下面六個我認為非常關鍵的因素:

免費架站

沒錯,Framer 和 Wixㄛ一樣也是免費的。

對我這樣的畢業生來說沒有買網域或是用專業版的需求,況且 Framer 免費版的功能就已經非常足夠了。

免費版廣告放右下角

這也是一個很大的痛點:Wix 最上方免費版的廣告真的又大又明顯

而 Framer 的廣告僅僅只佔了右下角的一小部分,一般人根本不會注意到

操作介面與 RWD 模式非常直覺

Framer 的介面是設計給設計師使用的,就像是一個無限寬的畫布

設計師不用一邊想 html/css 的問題一邊做設計,網頁的元素可以自由的移動與排版

此外,點選元素後可以像 Figma 一樣能按著 Option 鍵去量元素間的距離。你沒聽錯!要達成 pixel perfect 的網站設計不是夢!

對 Figma 使用者友善

除了介面和基本功能根本有抄襲 Figma 介面的嫌疑外(?

用 Figma 的設計師可以用一個插件直接無痛將 Figma 設計稿轉到 Framer 裡面:Figma to HTML with Framer

這個插件是所有用 Figma 的 UI/UX 設計師的福音,再也不用一個個將圖片、裝飾元素、icon 匯進平台再一個個去移動位置了,因為只要用了這個插件基本上所有的設計元素與定位都會原封不動的進去你的 Framer 網站中,省事省時又方便!

動畫互動效果非常簡單好用

沒錯,想到網頁動畫是不是就想到去寫 CSS 或是套用像 GSAP 這樣的套件呢?

在 Framer 裡基本的動畫與互動效

果都已經是內建的功能了,像是 Scroll Animation、Button Hover / Click Effect 等等,完整實踐 No-Code 平台的優勢

架站快調整快又非常穩定

Framer 架好站後,一鍵 Publish 搞定,沒有多餘的動作,非常直覺

而且我在使用 Wix 的時候,有時在 Loading 頁面時會定格很久,或是做錯動作要回到上一步可能會lag,這在 Framer 是不會出現的,非常的神奇!

當然,一定還有很多我還沒發現的功能或是模式可以玩,但對於做一個完整的 UI/UX 作品集來說已經相當足夠,甚至感覺 Framer 就是為了做 UI/UX 作品集而存在的架站工具也不為過呢

感謝 Framer 讓我把可能幾週的工作量用幾天內完成,讓我順利完成自己的作品集,也靠這個作品集找到了我第一個 UI/UX 的接案工作

感謝 Framer 讚嘆 Framer!(笑中帶淚)

結語

我會認真推薦我所認識的朋友們用 Framer 來架站,讓作品集網站可以回歸到使用者體驗以及個人創意上,做出好看好用且體驗佳的線上作品集!

最後謝謝你看完我的文章,希望你也能有所收穫!

讓我們一起學習網站設計吧~

文章大綱

本文作者介紹

Jerry

畢業於澳洲雪梨科技大學 (UTS) 互動設計碩士,曾在台灣累積三年的 3D 動畫與動態設計工作經驗。熱衷於透過數位設計將創意與易用性結合,創造出能感動人心、優化感官體驗的方案。目前在澳洲雪梨探索設計的更多可能。

本文作者介紹

Jerry

畢業於澳洲雪梨科技大學 (UTS) 互動設計碩士,曾在台灣累積三年的 3D 動畫與動態設計工作經驗。熱衷於透過數位設計將創意與易用性結合,創造出能感動人心、優化感官體驗的方案。目前在澳洲雪梨探索設計的更多可能。

看看其他文章

Connect, configure and preview
Connect, configure and preview