# Figma to Webflow: Introduction (Part 1 of 7) — Webflow University 00:00 Introduction 01:13 — Iterate and design your site in Figma 01:29 — Model and render product images and animations in Cinema 4D & Octane 01:56 — Export your 3D animations from After Effects and Lottie 02:15 — Build and develop your website in Webflow 02:46 — Publish and launch your production-ready site 03:39 — Bonus lessons for extra credit 04:09 — Accountability & share your progress # Intro to Figma (Part 2 of 7) — Webflow University 00:00 — Introduction 00:17 — Magic of Post Production 02:00 — Adding shapes and text into your Frame 02:38 — Moving and aligning content 03:36 — Scaling and sizing 03:58 — Duplicating for faster iterations 09:25 — Quickly duplicating sections 21:32 — Creating the mid-fidelity design 39:05 — Evolution of design iterations 40:36 — Share your progress # Cinema 4D & Octane for beginners — Figma to Webflow (Part 3 of 7) In this lesson, we'll go over: 00:00:00 — Introduction 00:01:16 — Modeling & geometry 00:32:33 — Texturing 01:06:06 — Lighting 01:15:56 — Animating 01:42:48 — Rendering # After Effects for the web — Figma to Webflow (Part 4 of 7) In this lesson: 00:00 — Introduction 00:41 — Install the Bodymovin plugin 01:56 — Create a composition in After Effects for your image sequence 03:50 — Render the JSON file 05:17 — Set your preferences to "Allow Scripts to Write Files and Access Networks" 06:56 — Share your progress #figmatowebflow # Build your Figma design in Webflow — Figma to Webflow (Part 5 of 7) In this lesson, we'll build these parts of our website: 00:00:00 — Introduction 00:02:36 — Hero section with a responsive background image 00:28:14 — Navigation bar (navbar) including our logo 00:41:37 — Product features section using classes & Webflow Interactions 01:18:40 — Featured logos section using CSS grid 01:24:15 — Contact us featuring a Form block 01:31:09 — Footer with links and more grids 01:48:38 — Accessibility check # Publish your site to a custom domain (Part 6 of 7) — Webflow University In this lesson, we'll show how to do the following: 00:00 — Introduction 00:40 — Add a custom domain in Webflow 01:58 — Update the DNS using GoDaddy 05:21 — Verify the domain and check their statuses 06:06 — Set the default domain to the WWW. 06:36 — Publish the site and launch! # Final notes: Figma to Webflow (Part 7 of 7) — Webflow University 00:00 — Introduction 00:10 — Check out other workflows 01:15 — Iteration in Figma 01:20 — Product design and rendering with Cinema 4D and Octane 02:00 — Export Lottie with After Effects and Bodymovin 02:22 — Site build with Webflow 02:42 — Publish to a custom domain 02:55 — Summary
#Figma到Webflow。介紹（第1部分，共7部分） - Webflow大學 00:00 介紹 01:13 - 在Figma中疊代和設計您的網站 01:29 - 在Cinema 4D和Octane中建模並渲染產品圖像和動畫 01:56 - 從After Effects和Lottie導出你的三維動畫 02:15 - 在Webflow中建立和開發您的網站 02:46 - 發布和啟動您的生產就緒的網站 03:39 - 額外獎勵的課程 04:09 - 問責制和分享你的進展 # 圖文並茂的Figma介紹（第二部分）--Webflow大學 00:00 - 介紹 00:17 - 後期製作的魅力 02:00 - 將形狀和文字添加到您的框架中 02:38 - 移動和對齊內容 03:36 - 縮放和尺寸 03:58 - 複製以加快疊代進度 09:25 - 快速複製部分 21:32 - 創建中等保真度的設計 39:05 - 設計疊代的演變 40:36 - 分享你的進展 # Cinema 4D & Octane的初學者--Figma到Webflow（第3部分，共7部分） 在這一課中，我們將了解到 00:00:00 - 介紹 00:01:16 - 建模和幾何形狀 00:32:33 - 紋理 01:06:06 - 照明 01:15:56 - 動畫製作 01:42:48 - 渲染 # After Effects for the web - Figma to Webflow (Part 4 of 7) 在本課中。 00:00 - 介紹 00:41 - 安裝Bodymovin外掛 01:56 - 在After Effects中為你的圖像序列創建一個構圖 03:50 - 渲染JSON文件 05:17 - 將你的偏好設置為 "允許腳本寫入文件和訪問網路" 06:56 - 分享您的進展 #figmatowebflow #在Webflow中建構你的Figma設計--Figma到Webflow（第5部分，共7個）。 在本課中，我們將建構網站的這些部分。 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大學 在本課中，我們將展示如何進行以下工作。 00:00 - 介紹 00:40 - 在Webflow中添加一個自定義域名 01:58 - 使用GoDaddy更新DNS 05:21 - 驗證域名並檢查其狀態 06:06 - 將默認域名設置為WWW。 06:36 - 發布網站並啟動! # 最後說明。Figma到Webflow（第7部分） - Webflow大學 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 - 摘要# Figma到Webflow。講座介紹（第1部分，共7部分） - Webflow大學 00:00 介紹 01:13 - 在Figma中疊代和設計你的網站 01:29 - 在Cinema 4D和Octane中建模並渲染產品圖像和動畫 01:56 - 從After Effects和Lottie導出你的三維動畫 02:15 - 在Webflow中建立和開發您的網站 02:46 - 發布和啟動您的生產就緒的網站 03:39 - 額外獎勵的課程 04:09 - 問責制和分享你的進展 # 圖文並茂的Figma介紹（第二部分）--Webflow大學 00:00 - 介紹 00:17 - 後期製作的魅力 02:00 - 將形狀和文字添加到您的框架中 02:38 - 移動和對齊內容 03:36 - 縮放和尺寸 03:58 - 複製以加快疊代進度 09:25 - 快速複製部分 21:32 - 創建中等保真度的設計 39:05 - 設計疊代的演變 40:36 - 分享你的進展 # Cinema 4D & Octane的初學者--Figma到Webflow（第3部分，共7部分） 在這一課中，我們將了解到 00:00:00 - 介紹 00:01:16 - 建模和幾何形狀 00:32:33 - 紋理 01:06:06 - 照明 01:15:56 - 動畫製作 01:42:48 - 渲染 # After Effects for the web - Figma to Webflow (Part 4 of 7) 在本課中。 00:00 - 介紹 00:41 - 安裝Bodymovin外掛 01:56 - 在After Effects中為你的圖像序列創建一個構圖 03:50 - 渲染JSON文件 05:17 - 將你的偏好設置為 "允許腳本寫入文件和訪問網路" 06:56 - 分享您的進展 #figmatowebflow #在Webflow中建構你的Figma設計--Figma到Webflow（第5部分，共7個）。 在本課中，我們將建構網站的這些部分。 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大學 在本課中，我們將展示如何進行以下工作。 00:00 - 介紹 00:40 - 在Webflow中添加一個自定義域名 01:58 - 使用GoDaddy更新DNS 05:21 - 驗證域名並檢查其狀態 06:06 - 將默認域名設置為WWW。 06:36 - 發布網站並啟動! # 最後說明。Figma到Webflow（第7部分） - Webflow大學 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 - 摘要# Figma到Webflow。講座介紹（第1部分，共7部分） - Webflow大學 00:00 介紹 01:13 - 在Figma中疊代和設計你的網站 01:29 - 在Cinema 4D和Octane中建模並渲染產品圖像和動畫 01:56 - 從After Effects和Lottie導出你的三維動畫 02:15 - 在Webflow中建立和開發您的網站 02:46 - 發布和啟動您的生產就緒的網站 03:39 - 額外獎勵的課程 04:09 - 問責制和分享你的進展 # 圖文並茂的Figma介紹（第二部分）--Webflow大學 00:00 - 介紹 00:17 - 後期製作的魅力 02:00 - 將形狀和文字添加到您的框架中 02:38 - 移動和對齊內容 03:36 - 縮放和尺寸 03:58 - 複製以加快疊代進度 09:25 - 快速複製部分 21:32 - 創建中等保真度的設計 39:05 - 設計疊代的演變 40:36 - 分享你的進展 # Cinema 4D & Octane的初學者--Figma到Webflow（第3部分，共7部分） 在這一課中，我們將了解到 00:00:00 - 介紹 00:01:16 - 建模和幾何形狀 00:32:33 - 紋理 01:06:06 - 照明 01:15:56 - 動畫製作 01:42:48 - 渲染 # After Effects for the web - Figma to Webflow (Part 4 of 7) 在本課中。 00:00 - 介紹 00:41 - 安裝Bodymovin外掛 01:56 - 在After Effects中為你的圖像序列創建一個構圖 03:50 - 渲染JSON文件 05:17 - 將你的偏好設置為 "允許腳本寫入文件和訪問網路" 06:56 - 分享您的進展 #figmatowebflow #在Webflow中建構你的Figma設計--Figma到Webflow（第5部分，共7個）。 在本課中，我們將建構網站的這些部分。 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大學 在本課中，我們將展示如何進行以下工作。 00:00 - 介紹 00:40 - 在Webflow中添加一個自定義域名 01:58 - 使用GoDaddy更新DNS 05:21 - 驗證域名並檢查其狀態 06:06 - 將默認域名設置為WWW。 06:36 - 發布網站並啟動! # 最後說明。Figma到Webflow（第7部分） - Webflow大學 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 - 總結
In this course, we run through the entire design process, from concept to completion. We start in Figma, create some stunning 3D assets in Cinema 4D and Octane, create animated Lottie files in After Effects, and finally, we build our site in Webflow with interactions.
https://www.google.com/search?q=tm+html&sxsrf=ALiCzsakLWPhKYaCfd12wRgZvT3o022b6A%3A1658828399807&ei=b7bfYrj0MMKP-Abrm5_4DA&oq=tm&gs_lcp=Cgdnd3Mtd2l6EAMYADIECCMQJzIECAAQQzIECAAQQzIECAAQQzILCC4QgAQQsQMQgwEyCAgAEIAEELEDMggIABCABBCxAzIICAAQgAQQsQMyCAgAEIAEELEDMggIABCABBCxAzoHCAAQRxCwAzoRCC4QgAQQsQMQgwEQxwEQ0QM6CwgAEIAEELEDEIMBOgoIABCxAxCDARBDOgsILhCABBCxAxDUAkoECEEYAEoECEYYAFDqBlj4B2CCFmgDcAF4AIABNYgBYJIBATKYAQCgAQHIAQrAAQE&sclient=gws-wiz https://www.google.com/search?q=emoji+rock&oq=emoji+rock&aqs=chrome..69i57j0i512l3j0i30l6.2322j0j7&sourceid=chrome&ie=UTF-8 https://www.google.com/search?q=tm+html&oq=tm+&aqs=chrome.0.69i59j69i57j0i512l3j46i433i512j69i65j69i60.1700j0j7&sourceid=chrome&ie=UTF-8 https://www.youtube.com/user/tentencreative/videos https://www.linkedin.com/company/2859482/admin/ chrome://newtab/ https://linktr.ee/tenten.co https://www.google.com/search?q=linkbio&oq=linkbio&aqs=chrome..69i57j0i512j0i10i512j0i512j0i30l3j0i10i30j0i30j0i15i30.1917j0j7&sourceid=chrome&ie=UTF-8 https://tenten.co/ https://www.pthg.gov.tw/planibp/cp.aspx?n=1038F03AFCDBAC4C&s=666972465F07F207 https://zh.m.wikipedia.org/zh-tw/%E6%8E%92%E7%81%A3%E6%97%8F http://www.tipp.org.tw/aborigines_info.asp?A_ID=10 https://webflow.tw/ https://tenten.co/zh/services/webflow-service https://tenten.co/insight/wp-admin/post.php?post=11057&action=edit&classic-editor&message=1 https://tenten.co/insight/webflow/figma-to-webflow/ https://tenten.co/insight/webflow/figma-to-webflow/ https://tenten.co/insight/webflow/figma-to-webflow/ https://www.google.com/search?q=figma+webflow+grid+template&source=lmns&bih=1433&biw=1728&hl=zh-TW&sa=X&ved=2ahUKEwiq8sL_tZb5AhV6TPUHHZkzBkUQ_AUoAHoECAEQAA https://www.figma.com/community/file/880199211770085867 https://www.figma.com/community/file/951923667513386238 https://dribbble.com/shots/4729681-FREE-Bootstrap-Grid-Templates-for-Figma https://www.youtube.com/watch?v=sQnPzTohwfM https://www.youtube.com/watch?v=BfsI6F9_izY https://www.youtube.com/watch?v=CrIczhxRvgg&t=0s https://www.youtube.com/watch?v=FPHVHy1E8-c https://www.youtube.com/watch?v=OF97sIGkYec https://www.youtube.com/watch?v=qxNGf5fktco&t=0s https://university.webflow.com/lesson/turn-a-collection-list-into-a-responsive-grid https://figmafy.com/how-to-export-from-figma-to-webflow-in-2022/ https://webflow.com/feature/reuse-grid-layouts-more-easily-with-grid-template-areas https://blog.prototypr.io/from-figma-to-webflow-how-to-turn-your-designs-into-live-website-a51df08de660 https://university.webflow.com/lesson/grid-areas https://uikitfree.com/responsive-portfolio-figma-template/ https://blog.prototypr.io/how-i-use-automation-to-quickly-transfer-my-designs-from-figma-to-webflow-part-1-67868e0668c https://onepagelove.com/webflow-grid https://www.figma.com/community/file/917884531831193982 https://discourse.webflow.com/t/figma-template-that-matches-webflow-breakpoints/104971 https://www.untitledui.com/components/grids-spacing https://dribbble.com/tags/figma_to_webflow chrome://newtab/
