Figma 到 Webflow：簡介（第 1 部分，共 7 部分）— Webflow 大學
參加 Webflow 大學的完整課程：Figma 到 Webflow | 網流大學 可以訪問所有資產或克隆已完成的 Webflow 項目。
在本課程中，我們將貫穿整個設計過程，從概念到完成。我們從 Figma 開始，在 Cinema 4D 和 Octane 中創建一些令人驚嘆的 3D 資產，在 After Effects 中創建動畫 Lottie 文件，最後，我們在具有交互功能的 Webflow 中構建我們的網站。
在社交媒體上分享您的進步#figmatowebflow，並在論壇中分享此主題。
00:00 簡介
01:13 — 在 Figma 中迭代和設計您的網站
01:29 — 在 Cinema 4D 和 Octane 中建模和渲染產品圖像和動畫
01:56 — 從 After Effects 和 Lottie 導出您的 3D 動畫
02:15 — 構建和在 Webflow 中開發您的網站
02:46 — 發布並啟動您的生產就緒網站
03:39 — 額外學分的獎勵課程
04:09 — 問責制並分享您的進度
介紹 Figma（第 2 部分，共 7 部） — Webflow University
在 Webflow University 完成整個課程：https://university.webflow.com/figma-to-webflow 5，獲得所有資產或克隆完成的 Webflow 項目。
在本課中，我們將介紹一個我們內部經常使用的過程：我們將協同使用 Figma 來設計和反覆修改，讓我們的項目從無保真、低保真，最終到中保真。
在社交媒體上分享您的進展 #figmatowebflow，並在論壇的這個主題中分享。
00:00 — 介紹
00:17 — 後期製作的魔力
02:00 — 向框架中添加形狀和文本
02:38 — 移動和對齊內容
03:36 — 縮放和調整大小
03:58 — 複製以加快迭代速度
09:25 — 快速複製部分
21:32 — 創建中保真設計
39:05 — 設計迭代的演變
40:36 — 分享你的進展
Cinema 4D 和 Octane 初學者指南 — Figma to Webflow（第 3 部分，共 7 部）
在 Webflow University 完成整個課程：Figma to Webflow - Webflow University Courses 9，獲得所有資產或克隆完成的 Webflow 項目。
本課是一個關於如何使用 Cinema 4D 來建模和動畫化我們虛構的碳酸水瓶產品的初學者指南。然後，我們將使用 Octane Render 添加表面紋理並為我們的 3D 設計進行照明。
在社交媒體上分享您的進展 #figmatowebflow，並在論壇的這個主題中分享。
在本課中，我們將介紹： 00:00:00 — 介紹
00:01:16 — 建模與幾何
00:32:33 — 紋理製作
01:06:06 — 照明
01:15:56 — 動畫製作
01:42:48 — 渲染
用於網頁的 After Effects — Figma to Webflow（第 4 部分，共 7 部）
在 Webflow University 完成整個課程：Figma to Webflow - Webflow University Courses 1，獲得所有資產或克隆完成的 Webflow 項目。
在 Cinema 4D 和 Octane 中生成 3D 產品渲染後，我們使用 After Effects 和 Bodymovin 插件將它們轉換為 JSON Lottie 文件——我們可以在網站上使用的動畫設計。
在社交媒體上分享您的進展 #figmatowebflow，並在論壇的這個主題中分享。
在本課中： 00:00 — 介紹
00:41 — 安裝 Bodymovin 插件
01:56 — 在 After Effects 中為圖像序列創建組合
03:50 — 渲染 JSON 文件
05:17 — 設置偏好為“允許腳本寫入文件並訪問網絡”
06:56 — 分享您的進展 #figmatowebflow
在 Webflow 中構建您的 Figma 設計 — Figma to Webflow（第 5 部分，共 7 部）
在 Webflow University 完成整個課程：https://university.webflow.com/figma-to-webflow 6，獲得所有資產或克隆完成的 Webflow 項目。
現在我們已經有了線框設計和 3D 資產，接下來我們將在 Webflow 中構建我們的網站。我們使用 Figma 線框設計和 3D Lottie 文件，在 Webflow 中構建網站，並通過豐富的互動來吸引我們的客戶。
在社交媒體上分享您的進展 #figmatowebflow，並在論壇的這個主題中分享。
在本課中，我們將構建我們網站的這些部分： 00:00:00 — 介紹
00:02:36 — 帶有響應式背景圖像的英雄部分
00:28:14 — 包括我們標誌的導航欄（navbar）
00:41:37 — 使用類別和 Webflow 互動的產品特點部分
01:18:40 — 使用 CSS 網格的特色標誌部分
01:24:15 — 包含表單塊的聯絡我們部分
01:31:09 — 帶有鏈接和更多網格的頁腳
01:48:38 — 無障礙檢查
將您的網站發布到自訂域名（第 6 部分，共 7 部） — Webflow University
現在我們已經在 Webflow 中構建了漂亮的新網站，是時候通過將其發布到我們的自訂域名來啟動課程了。
在社交媒體上分享您的進展 #figmatowebflow，並在論壇的這個主題中分享。
在本課中，我們將展示如何完成以下操作： 00:00 — 介紹
00:40 — 在 Webflow 中添加自訂域名
01:58 — 使用 GoDaddy 更新 DNS
05:21 — 驗證域名並檢查其狀態
06:06 — 將預設域名設置為 WWW.
06:36 — 發布網站並上線！
最後說明：Figma to Webflow（第 7 部分，共 7 部） — Webflow University
在 Webflow University 完成整個課程：Figma to Webflow - Webflow University Courses 2，獲得所有資產或克隆完成的 Webflow 項目。
在本課中，我們將結合這個設計工作流程的所有元素，並強調一些細微之處，以幫助您完善自己的設計工作流程。
在社交媒體上分享您的進展 #figmatowebflow，並在論壇的這個主題中分享。
00:00 — 介紹
00:10 — 查看其他工作流程
01:15 — Figma 中的迭代
01:20 — 使用 Cinema 4D 和 Octane 進行產品設計和渲染
02:00 — 使用 After Effects 和 Bodymovin 導出 Lottie
02:22 — 使用 Webflow 構建網站
02:42 — 發布到自訂域名
02:55 — 總結
