Framer 作品集製作教學：從 Figma 排版到網站上線
準備投履歷或開始接案時，作品集總是最難整理的那一關：作品要放哪些？頁面怎麼排？做完設計，又該怎麼變成能分享的網站？
這篇記錄我用 Figma 規劃作品集，再把設計帶進 Framer 的過程。會從頁面架構、作品與文字整理，一路做到手機版和網站發布。你可以跟著做，也可以先看看我整理的 5 款免費 Framer 作品集模板，挑一款當起點。
PDF 和網站都能呈現作品。如果需要寄履歷、讓面試官快速存檔，PDF 很方便；如果你希望持續更新作品、直接分享連結，網站會更靈活。我這次選擇做網站，也保留從履歷連到作品集的方式。
根據我的經驗，製作一個作品集網站需要投入近一個月的時間，包括市場調查、作品定位、架站平台選擇、作品整理、文案等多個階段。
這次我用 Framer 做作品集模板，大約花了一週。操作時不用寫程式，我可以直接在畫布上調整頁面。
先來看看設計成果：lnlstudios – Framer Portfolio Template
如果你還不熟悉 Framer，可以先把它想成能直接發布網站的視覺化編輯工具。這篇會示範我如何使用官方的 Figma to HTML with Framer 外掛，把在 Figma 做好的區塊帶進 Framer，再調整成適合不同螢幕的網站。
開始前，先決定作品集怎麼做
我這次先在 Figma 排版，因為作品和畫面結構可以一起整理。如果你想直接從模板開始，也能在 Framer 裡編輯，不必先做一份 Figma 設計。
- 先列出要呈現的作品，以及每個作品想交代的背景、做法和成果。
- 在 Figma 排版時，盡量用 Auto Layout 管理區塊；匯入後仍要檢查間距和響應式呈現。Framer 官方匯入教學
- 準備使用官方 Figma to HTML with Framer 外掛，將需要的區塊分批匯入。
第一步：建立作品集 Wireframe
我會先在 Figma 畫出每一頁的區塊，不急著挑照片或字體。圖片的位置先放灰色方塊，文字也用假字代替：
- 圖片（Image）: 灰色色塊
- 文字（Text）：Lorem Ipsum (假字) 或是線條
- 按鈕（Button）：深色小方塊
先把區塊排出來，就能看到每頁要放多少圖片和文字，以及它們會不會擠在一起。我會先在這裡調整位置，再處理顏色和字體。
以此作品集為例，我們有首頁、作品目錄、作品頁和聯絡我們。針對這四個頁面設計出Wireframe。
第二步：測試你的文字內容
Wireframe 排好後，我會把文字放進去，看看每個區塊實際能容納多少內容。
以「工作背景」為例，我會先把內容分類，再調整段落的大小和位置。這樣比較容易看出哪一段佔了太多空間。
第三步：放上照片
接著把照片放進先前留好的位置。我會檢查圖片解析度，也會看照片和文字擺在一起時，哪一邊需要多一點空間。
第四步：開始設計！
這是我最喜歡的階段。前面把作品和內容備好，終於可以開始炒菜啦！我會在這時處理顏色、字體和輔助圖像；下面是我常用的幾個 Figma 外掛：
- iconify : 可以搜尋並直接導入icon，擁有超過100,000個圖示
- uiLogos : 提供品牌標誌的Loreum Ipsum。快速生成虛構的Logo插入Figma中。此外，該插件還包括194個國家的國旗和一些熱門品牌的logo。
- Blobs : 可隨機產生有機、不規則的形狀。
第五步：Figma to Framer
在 Figma 完成設計後，我會用官方的「Figma to HTML with Framer」外掛，選取一個區塊、複製，再貼到 Framer 畫布。分批匯入比較容易檢查每個區塊的字體、圖片和間距；Auto Layout 匯入後也要再確認一次。
在 Framer 開啟專案，把複製的區塊貼到畫布上即可。貼好後先檢查文字、圖片和圖層，再處理不同螢幕尺寸。Framer 官方示範
第六步：在 Framer 裡製作 RWD 網站
接下來要確認桌機、平板和手機上的閱讀體驗。我這次另外檢查了筆電寬度，因為桌機看起來剛好的圖片與文字，縮小後可能會擠在一起。先讓主要版面能彈性伸縮，再視需要調整各個斷點。
第七步：設定動畫
我在 Framer 裡替按鈕和部分元素設定動畫，先做桌機版，再檢查平板和手機上的呈現。已有的設定可以沿用，不過每個尺寸還是要看一次效果。
最終成品發表
最終完成品：預覽我的 Framer 作品集網站。
想從現成版型開始，可以看我整理的5 款免費 Framer 作品集模板。挑到合適的模板後，再把作品、個人介紹與聯絡方式換成自己的內容。
