# 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 - 總結
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/
