Figma to Webflow - Complete Website Tutorial
Flux Academy
@fluxacademyAbout
Learn to be a more successful and profitable web designer: master the latest trends, tools, and technologies, and make it easy to get and retain high-value dream clients. Whether you're starting from zero, or already running a successful web design studio, we'll help you take your design skills and your business to the next level. We're on a mission to make web design better and more accessible around the world, and we want to help you build your dream business, by giving you expert web design instruction, insights into the latest tools, including AI design tools and no code solutions. We've helped more than 7,000 students become more competent and profitable web designers. 🔥 FREE TRAINING: 3 Steps to Build a Thriving Web Design Career 👉 link below
Latest Posts
Video Description
📘 Free e-book "The Blueprint For Insanely Successful Webflow Designers" 👉 https://bit.ly/3wNZSN4 Learn Webflow the FAST way with our full Webflow Masterclass course 👉 https://bit.ly/3VQJFys Level up your web design skills in Figma with our course, Figma for Web Designers 👉 https://bit.ly/46gcPvz Build alongside Ran in Webflow by cloning the Figma project 👉 https://bit.ly/3n7hcVs 📽️ CHAPTERS 00:00 Introduction 01:05 - Exporting from Figma 01:50 - Project setup 04:00 -Section & Container setup 05:40 - Building the Hero 12:20 - Add Navigation 27:58 - Background Gradients 33:58 - Responsiveness 39:50 - Add animations 45:27 - Content sections 53:41 - Blend modes 01:05:41 - Newsletter form ⬇ If you would like to watch more Figma and Webflow Tutorials, please let us know in the comments ⬇ 🎨 Learn the Art & Business of Web Design. Check out all our courses 👉 https://bit.ly/3jMxocU 📱 Find us on SOCIAL MEDIA Flux Academy's Instagram 👉 https://www.instagram.com/flux.academy/ Ran's Instagram 👉 https://www.instagram.com/ransegall/ Thanks for watching our video! #Figma #WebDesign #FluxAcademy
You May Also Like
Web Design Must-Haves
AI-recommended products based on this video
Crucial T705 4TB PCIe Gen5 NVMe M.2 SSD - Up to 14,100 MB/s - Game Ready - Internal Solid State Drive (PC) - +1mo Adobe CC - CT4000T705SSD3
VILVA 4K Portable Monitor, 15.6'' IPS 3840x2160 UHD Computer Monitor, 100% Adobe RGB Gaming Monitor USB C HDMI Portable Travel Display w/Speakers Smart Cover for Laptop Xbox PS4 Switch Phone Mac
MOSISO Laptop Case 13 inch, 13 inch Laptop Sleeve Bag Compatible with MacBook Air 13 M4 M3 M2 M1 2025-2018 / Pro 13 M2 M1 2025-2016, Neoprene Computer Sleeve Bag with Small Case, Space Gray Global Recycled Standard
MOSISO Compatible with MacBook Air 13 inch Case 2021, 2020-2018 Release A2337 M1 A2179 A1932, Plastic Hard Shell&Keyboard Cover&Screen Film&Storage Bag for MacBook Air 13.3 inch Case, Crystal Clear
tomtoc 360° Protective Laptop Sleeve for 13-inch New MacBook Air M4/A3240 2025, M3/A3113, M2/A2681 M1/A2337 A2179 A1932, 13-inch MacBook Pro M2/A2686 M1/A2338, Water-Resistant Computer Case Bag Global Recycled Standard
MOSISO 13-14 inch Laptop Case, 13.3 inch Puffy Laptop Sleeve Compatible with MacBook Air 13 13.6 M4 M3 M2 M1/Pro 13/Pro 14,HP,Dell,ASUS, Lenovo, Polyester Horizontal Bag with Small Case, Rose Red Global Recycled Standard
INIU USB C Charger Block, 100W 3-Port PD Fast Charging, Advanced GaN Power Adapter, Foldable Charger with USB C Cable for MacBook Air 13 Pro, iPad, iPhone 17 16 Pro Max, Samsung S25 S24, Switch 2 etc ClimatePartner certified
UGREEN USB to USB C Adapter & USB C to USB Adapter Combo 4-Pack, 10Gbps Type-C Converter, Car Charger Compatible with MacBook Pro, iPad Mac mini, iPhone 17/16, Galaxy, PC/Laptop, Hard Drive Enclosure
Metapen Air 8 Apple Pencil for iPad 2018-2025, 20H Battry Life, 2Min Fast Charging, Palm Rejection, Stylus Pen for iPad 11/10/9/8/7/6th, iPad Pro 12.9/11/13“M4, iPad Air 3/4/5/6/M2/M3, iPad mini 5/6
Deeyaple USB C to Aux, 4FT/1.2M, Type C to 3.5mm Audio Cable Headphone Jack Cable for Car Mobile Phone, iPhone 16 15, iPad Pro, Samsung Galaxy S24 S23 S2010, Google Pixel,Oneplus Grey (1)
Logitech G203 Wired Gaming Mouse, 8,000 DPI, Rainbow Optical Effect LIGHTSYNC RGB, 6 Programmable Buttons, On-Board Memory, Screen Mapping, PC/Mac Computer and Laptop Compatible - Black
Logitech G305 Lightspeed Wireless Gaming Mouse, Hero 12K Sensor, 12,000 DPI, Lightweight, 6 Programmable Buttons, 250h Battery Life, On-Board Memory, PC/Mac - Black
Dell 27 Plus 4K Monitor - S2725QS - 27-inch 4K (3840 x 2160) 120Hz 16:9 Display, IPS Panel, AMD FreeSync Premium, sRGB 99%, Integrated Speakers, 1500:1 Contrast Ratio, Comfortview Plus - Ash White
Apple 2025 MacBook Air 13-inch Laptop with M4 chip: Built for Apple Intelligence, 16GB Unified Memory, 256GB SSD Storage, Touch ID; Sky Blue - English Keyboard
Logitech G203 Wired Gaming Mouse, 8,000 DPI, Rainbow Optical Effect LIGHTSYNC RGB, 6 Programmable Buttons, On-Board Memory, Screen Mapping, PC/Mac Computer and Laptop Compatible - Black