--- title: "Framer 作品集製作指南：零程式碼打造專讓面試加分的 Portfolio" id: "123" type: "post" slug: "building-portfolio-framer" published_at: "2025-10-14T02:37:00+00:00" modified_at: "2025-11-16T13:45:57+00:00" url: "https://lnlstudios.com/zh/building-portfolio-framer/" markdown_url: "https://lnlstudios.com/zh/building-portfolio-framer.md" excerpt: "用 Framer 打造面試作品集網站。作品集不僅是一個設計師的自我展示的場所，更是在求職路上贏得優勢的秘密武器。" taxonomy_category: - "設計工具" taxonomy_post_tag: - "Framer" - "作品集" - "實測心得" - "求職" - "網站架設" taxonomy_language: - "中文 (台灣)" --- 如果你是設計師、自由工作者或想轉職的人，作品集就是你的第一印象。 而現在愈來愈多設計師開始用 Framer 做作品集，不只因為它零程式碼好上手，更因為它能快速做出「看起來比 Notion、Figma 更有質感」的網站。 這篇文章會帶你從版型選擇、版面配置，一直到實際上線，完整拆解如何用 Framer 打造一個能說服 HR 與面試官的線上 Portfolio。 若你還在猶豫要以PDF還是網頁來呈現作品集，不用懷疑，**選擇網站就對了**。一個經過精心設計的作品集，幾乎可以確保你投遞的履歷得到將近 **90%的面試機會**。這不僅展現了你的專業性，還能給潛在雇主留下深刻的印象。因此，投資時間和心力在製作一個具有特色又精美的個人作品集網站上是非常值得的。 根據我的經驗，製作一個作品集網站需要投入近一個月的時間，包括**市場調查、作品定位、架站平台選擇、作品整理、文案**等多個階段。 而這次我試著用 Framer 設計一個作品集模板，**大約花一週的時間**。Framer 的好處是操作介面簡單，不需要寫程式，所以在開發上大幅縮短了製作時間。 ![Image](https://lnlstudios.com/wp-content/uploads/2023/12/lnlstudiosPro_Framer_Template_Portfolio_1_1400x950-1-1024x695.jpg)先來看看設計成果：[lnlstudios – Framer Portfolio Template](https://lnlstudios-design-portfolio.framer.website/) 如果你還不知道 **Framer** ，我簡單介紹一下這個厲害的工具，它是一個**無需程式碼的架站工具**，操作模式與介面和 Figma 很相似。這篇教學會教你如何使用**「Figma to Framer」**把在 Figma 上設計好的網頁，轉移到 Framer 上建立網站。 [免費建立 Framer 帳號](https://framer.link/lnlstudiosxframer) ## 開始設計作品集前的注意事項！ 1. 一定要先在 **Figma** 裡設計，避免一開始就在 Framer 裡操作。 2. 在 Figma 設定好 **auto layout**，這樣在轉換到 Framer 裡的時候設計元件才能模組化調整。[教學影片→](https://www.youtube.com/watch?v=To_ADCVSg5g) 3. 使用 「**Figma to HTML with Framer**」 plugin ## 第一步：建立作品集 Wireframe 在開始設計網站的細節之前，我們可以先建立一個基本的架構，透過在畫布上放置灰色方塊代替圖像，使用Lorem Ipsum代替文字。以下是我習慣的呈現方式： - **圖片**（Image）: 灰色色塊 - **文字**（Text）：Lorem Ipsum (假字) 或是線條 - **按鈕**（Button）：深色小方塊 透過在 Figma 上的排列，我們可以很清楚的知道有多少的圖片和文字會被呈現出來，了解它們之間的關係並進行微調，確保網站有一個良好的資訊架構。 [%E4%BB%A5%E6%AD%A4%E4%BD%9C%E5%93%81%E9%9B%86%E7%82%BA%E4%BE%8B%EF%BC%8C%E6%88%91%E5%80%91%E6%9C%89%E9%A6%96%E9%A0%81%E3%80%81%E4%BD%9C%E5%93%81%E7%9B%AE%E9%8C%84%E3%80%81%E4%BD%9C%E5%93%81%E9%A0%81%E5%92%8C%E8%81%AF%E7%B5%A1%E6%88%91%E5%80%91%E3%80%82%E9%87%9D%E5%B0%8D%E9%80%99%E5%9B%9B%E5%80%8B%E9%A0%81%E9%9D%A2%E8%A8%AD%E8%A8%88%E5%87%BAWireframe%E3%80%82](%E4%BB%A5%E6%AD%A4%E4%BD%9C%E5%93%81%E9%9B%86%E7%82%BA%E4%BE%8B%EF%BC%8C%E6%88%91%E5%80%91%E6%9C%89%E9%A6%96%E9%A0%81%E3%80%81%E4%BD%9C%E5%93%81%E7%9B%AE%E9%8C%84%E3%80%81%E4%BD%9C%E5%93%81%E9%A0%81%E5%92%8C%E8%81%AF%E7%B5%A1%E6%88%91%E5%80%91%E3%80%82%E9%87%9D%E5%B0%8D%E9%80%99%E5%9B%9B%E5%80%8B%E9%A0%81%E9%9D%A2%E8%A8%AD%E8%A8%88%E5%87%BAWireframe%E3%80%82) 以此作品集為例，我們有**首頁、作品目錄、作品頁和聯絡我們**。針對這四個頁面設計出Wireframe。## 第二步：測試你的文字內容 在建立好 作品集 Wireframe 之後，就可以開始輸入文案了！你可以清楚地看到在網頁上你有多少空間、需要多少文字內容以及它應該放在哪裡。 例如：「工作背景」是資訊量龐大的一個部分，通過簡單地改變段落的大小、分類和布局，讓整體閱讀體驗變得更加簡單和更專業。 ![Image](https://lnlstudios.com/wp-content/uploads/2023/12/%E6%88%AA%E5%9C%96-2023-12-15-%E4%B8%8B%E5%8D%888.18.39-1024x682.png)## 第三步：放上照片 接下來，我們可以把適合的照片放到對應的位置。使用高品質且高解析度的圖片，同時調整它與文字間的平衡，以確保網站呈現清晰且專業的外觀。 ![Image](https://lnlstudios.com/wp-content/uploads/2023/12/%E6%88%AA%E5%9C%96-2023-12-15-%E4%B8%8B%E5%8D%888.20.20-1024x684.png)## 第四步：開始設計！ 這是我最喜歡的階段，上面 1~3 步驟相當於把食材都準備齊全，終於可以開始炒菜啦！從顏色、字體、輔助圖像、icon…等，在Figma 擁有非常多的外掛資源可以幫助我們完成精美的設計，以下分享幾個我常用到的 **Plug-in**： 1. [iconify](https://www.figma.com/community/plugin/735098390272716381) : 可以搜尋並直接導入icon，擁有超過100,000個圖示 2. [uiLogos](https://www.figma.com/community/plugin/1120667703468196103) : 提供品牌標誌的Loreum Ipsum。快速生成虛構的Logo插入Figma中。此外，該插件還包括194個國家的國旗和一些熱門品牌的logo。 3. [Blobs](https://www.figma.com/community/plugin/739208439270091369) : 可隨機生成，簡單有機、不規則的形狀，每個形狀都是獨一無二的。 ![Image](https://lnlstudios.com/wp-content/uploads/2023/12/%E6%88%AA%E5%9C%96-2023-12-15-%E4%B8%8B%E5%8D%888.21.31-1-1024x685.png)## 第五步：Figma to Framer 在 Figma 完成設計後，我們就可以使用「 **Figma to HTML with Framer** 」這個插件。我習慣每個區塊分批複製到 Framer 確保所有設計好的 Auto-layout 都沒有跑掉。 ![Image](https://lnlstudios.com/wp-content/uploads/2023/12/%E6%88%AA%E5%9C%96-2023-12-15-%E4%B8%8B%E5%8D%888.58.08-1-1024x521.png)點擊「**Figma to HTML with Framer**」後，到Framer開啟新畫布後 Ctrl+V 就貼上了## 第六步：在 Framer 裡製作 RWD 網站 接下來就是慢慢調整不同裝置尺寸，在 Framer 預設中有三個尺寸：桌機、平板、手機，而為了讓更多不同螢幕尺寸的使用這都能有更好的瀏覽體驗，我在這次設計中又額外加入了「筆電」的尺寸。 ![Image](https://lnlstudios.com/wp-content/uploads/2023/12/%E6%88%AA%E5%9C%96-2023-12-15-%E4%B8%8B%E5%8D%889.13.09-1024x498.png)## 第七步：設定動畫 Framer 提供很多動畫套件，針對按鈕或元素基本上都可以客製化自己想要的效果。很棒的一點是，只要設計桌機版一次，其他尺寸的動畫會直接同步套用。節省了非常多時間。 ![Image](https://lnlstudios.com/wp-content/uploads/2023/12/lnlstudiosPro_Framer_Template_Portfolio_2_1400x950-1-1024x695.jpg)## 最終成品發表 最終完成品：**[lnlstudios Minimal – Framer Portfolio Template](https://lnlstudios-design-portfolio.framer.website/)** 使用 Figma 設計然後 Framer 發布，以架設作品集網站來說，非常適合想打造高質感的作品集，但沒有太多預算和時間的人 。另外，Framer 也提供很多有設計感的[免費模板](https://framer.link/JHJFiFE) ，我還另外整理出了：[面試神助攻｜5 款高品質 Framer 免費作品集模板](https://lnlstudios.com/5-free-framer-template-for-portfolio/) ！大家也可以去逛逛～ ![Image](https://lnlstudios.com/wp-content/uploads/2023/12/lnlstudiosPro_Framer_Template_Portfolio_3_1400x950-1024x695.jpg)[開始製作 Framer 作品集！](https://framer.link/lnlstudiosxframer) 【 延伸閱讀 】 - [面試神助攻｜5 款高品質 Framer 免費作品集模板](https://lnlstudios.com/5-free-framer-template-for-portfolio/) - [想用 Framer 架設個人網站？一定要知道這 3 個免費資源！](https://lnlstudios.com/learning-framer-2025/) - [【 Framer教學 】如何使用免費模版快速搭建網站](https://lnlstudios.com/how-to-ues-framer-template/) 標籤[# Framer](https://lnlstudios.com/zh/tag/framer/) [# 作品集](https://lnlstudios.com/zh/tag/%e4%bd%9c%e5%93%81%e9%9b%86/) [# 實測心得](https://lnlstudios.com/zh/tag/%e5%af%a6%e6%b8%ac%e5%bf%83%e5%be%97/) [# 求職](https://lnlstudios.com/zh/tag/%e6%b1%82%e8%81%b7/) [# 網站架設](https://lnlstudios.com/zh/tag/%e7%b6%b2%e7%ab%99%e6%9e%b6%e8%a8%ad/) ![Profile photo](https://lnlstudios.com/wp-content/uploads/2024/12/Reme-scaled.jpg)##### 關於我 About me Reme，是一隻愛睡覺的北極熊，從外商品牌設計師轉職成為遠端UIUX設計師，找到自己喜歡的生活步調，享受生活中的美好當下。 I’m Reme ☺ — a digital designer passionate about helping businesses succeed through beautiful and functional designs. 合作邀約：sleepyrem.co@gmail.com [https://instagram.com/lnlstudios.co?igshid=MW4zMmVpNXNiMXhheQ%3D%3D&utm_source=qr](https://instagram.com/lnlstudios.co?igshid=MW4zMmVpNXNiMXhheQ%3D%3D&utm_source=qr) #### 文章分類 - [品牌設計](https://lnlstudios.com/zh/category/branding/) (4) - [設計工具](https://lnlstudios.com/zh/category/tools/) (9) - [質感生活](https://lnlstudios.com/zh/category/%e8%b3%aa%e6%84%9f%e7%94%9f%e6%b4%bb/) (1) #### 最新文章 - [AI 時代，Framer 和 Webflow 還值得學嗎？](https://lnlstudios.com/zh/ai-era-framer-webflow-future-of-web-design/) 2025-12-12 - [Logo 設計前必看：設計師都在用的 7 個核心原則](https://lnlstudios.com/zh/10-logo-design-tips/) 2025-11-15 - [【 Framer 】2025 最推薦新手的網站設計工具](https://lnlstudios.com/zh/framer-review-2025-best-no-code-website-builder-2/) 2025-11-08 - [Framer 作品集製作指南：零程式碼打造專讓面試加分的 Portfolio](https://lnlstudios.com/zh/building-portfolio-framer/) 2025-10-14 - [線上作品集｜5 款免費高品質 Framer 作品集模板讓面試加分](https://lnlstudios.com/zh/free-framer-portfolio-templates-for-design-job-interviews/) 2025-09-05 #### 相關文章 [https://lnlstudios.com/zh/ai-era-framer-webflow-future-of-web-design/](https://lnlstudios.com/zh/ai-era-framer-webflow-future-of-web-design/) #### [AI 時代，Framer 和 Webflow 還值得學嗎？](https://lnlstudios.com/zh/ai-era-framer-webflow-future-of-web-design/) - 2025-12-12 [https://lnlstudios.com/zh/framer-review-2025-best-no-code-website-builder-2/](https://lnlstudios.com/zh/framer-review-2025-best-no-code-website-builder-2/) #### [【 Framer 】2025 最推薦新手的網站設計工具](https://lnlstudios.com/zh/framer-review-2025-best-no-code-website-builder-2/) - 2025-11-16 [https://lnlstudios.com/zh/free-framer-portfolio-templates-for-design-job-interviews/](https://lnlstudios.com/zh/free-framer-portfolio-templates-for-design-job-interviews/) #### [線上作品集｜5 款免費高品質 Framer 作品集模板讓面試加分](https://lnlstudios.com/zh/free-framer-portfolio-templates-for-design-job-interviews/) - 2025-11-16