# 用 framer 個人作品集頁的步驟

---
使用 **Framer** 製作個人作品集頁的步驟如下：

## 1. **建立作品集 Wireframe**

- 在開始設計之前，先在 **Figma** 中建立一個基本的架構。使用灰色方塊代表圖片，並用假文案（如 Lorem Ipsum）代替文字，以便清楚規劃內容的佈局和結構。

## 2. **測試文字內容**

- 在 Wireframe 完成後，生成實際的文案。確保文字內容適合網頁的空間，並進行必要的分類和布局調整，以提升閱讀體驗。

## 3. **放上照片**

- 將高品質的圖片放入對應位置，確保圖片與文字之間的平衡，以達到專業的外觀。

## 4. **開始設計**

- 在 Figma 中進行詳細設計，包括顏色、字體和輔助圖像等。可以使用各種插件（如 iconify 和 uiLogos）來輔助設計過程。

## 5. **轉移至 Framer**

- 使用「**Figma to HTML with Framer**」插件將設計轉移到 Framer 中，建議分批複製區塊以確保 Auto-layout 不會出錯。

## 6. **製作響應式網站**

- 在 Framer 中調整不同裝置的尺寸設定，確保網站在桌機、平板和手機上都能良好顯示。

## 7. **設定動畫效果**

- 利用 Framer 提供的動畫功能為按鈕和其他元素添加互動效果，這樣在不同尺寸下的動畫效果會自動同步。

## 8. **發表最終成品**

- 完成後，可以將作品集網站發佈到網路上，Framer 提供多種免費模板供選擇，使得設計過程更加便捷。

這些步驟將幫助你高效地使用 Framer 創建一個專業且吸引人的個人作品集網站。

讓我們來看看我做出來的成果吧!
[Daphne 作品集 (Framer)](https://daphneshendesign.framer.website/)

---

[【Framer】面試必備！零程式碼，用 Framer 設計線上作品集](https://lnlstudios.com/building-portfolio-framer/)

[作品集好簡單 - 用Framer AI 架設個人作品集網站](
https://vocus.cc/article/64c75eb5fd897800019b295f)

[Framer AI 產出網頁，實用性高](
https://blog.akanelee.me/2023/06/14/framer-ai-try-out/)

[【Framer】征服面試：5個質感上乘的免費 Framer 作品集模板](
https://lnlstudios.com/5-free-framer-template-for-portfolio/)

[如何架設網站？完整網站設計＋製作流程教學（2025）](
https://frankknow.com/website-build-teach/)

[Framer 2024 用25分鐘學會建立自己的網站！ 作品集網站｜零基礎做網站|維克斯 |網頁串流](
https://www.youtube.com/watch?v=07SDX4IFxNQ)

[How To Add Scrolling Anchor Tags in Framer](https://www.youtube.com/watch?v=v9r-AvYCvDg)