Figma to Webflow - Complete Website Tutorial
Vložit
- čas přidán 20. 07. 2024
- 📘 Free e-book "The Blueprint For Insanely Successful Webflow Designers" 👉 bit.ly/3wNZSN4
Learn Webflow the FAST way with our full Webflow Masterclass course 👉 bit.ly/3VQJFys
Level up your web design skills in Figma with our course, Figma for Web Designers 👉 bit.ly/46gcPvz
Build alongside Ran in Webflow by cloning the Figma project 👉 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 ⬇
Don't forget to subscribe to our channel for more Design Content. Click here 👉 bit.ly/33byV7L
🎨 Learn the Art & Business of Web Design. Check out all our courses 👉 bit.ly/3jMxocU
📱 Find us on SOCIAL MEDIA
Flux Academy's Instagram 👉 / flux.academy
Ran's Instagram 👉 / ransegall
Thanks for watching our video!
#Figma #WebDesign #FluxAcademy
One of the most useful tutorials I watched. I am totally new to Webflow and thanks to you I got a grasp of the fundamentals. Thanks for the tutorial!
What a fantastic video, seriously! - especially cause you showed all the process of designing it all in figma first. With these two videos, anyone can start building their sites. Thank you!
The best webflow teacher, I am learning a lot of things, thank you.
Thank you for providing such a thorough tutorial on Figma and Webflow. This provided much needed context of what all is involved in the process of moving websites from the prototyping to design phases. I watched another tutorial by the developer of Relume with this same process. I think it would help your viewers to see this process using the Relume library which exist as a kit in Figma and as a component library for Webflow. Seeing both of these really cemented my understanding and gave me great options for both building from scratch and using pre made components, ultimately mixing the two for the best of both worlds. Thank you!!
Thanks for pointing out the Relume library! I hadn't come across that and my mind is BLOWN at the number of components available for free in that Figma file!!! Major time-saving potential right there!
Cheers for talking about Relume. Looks good.
Thank you for sharing. I was not aware of the Relume or Flowbase libraries. Game changed.
Great video! So clear and useful, great job!🔥👌🏼
Just excellent walkthrough. Thank you very much for the content!
Please make more website tutorials like this.
will do!
this is #1 video for beginers on the whole CZcams right now. niiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiice!
Thanks for the tutorial. Having experience with HTML and CSS really helped me understand Webflow. Also you're an awesome teacher :)
Amazing job! To be honest, by watching it, i'm also learning quite a bit of CSS tricks. Never know a `blending` is supported, crazy. THANK YOU.
Perfectly done, I have used Webflow for 2 years, I still learned something!
Very happy to hear!
Coming from a coding background & as a front-end dev, this is literally making everything I was doing into a piece of cake haha! Thanks for the tutorial
How many years of coding?Do you feel regret no coding is required now?
@@jj-jo6wr not at all, it's an advantage, anything you learn in life is in your toolkit to use, I could combine my coding knowledge with no-code to do advanced stuff for my projects
@@jj-jo6wr haha no coding is a joke. Type of projects we're working on, no code people are not allowed to touch it.
@@rah2023 well, the difference is that i don't need to painstakingly re-assemble entire module libraries in React just do render simple websites. Im a senior developer with over 8 years of experience with high- to mid level front- and backend languages, and i got to say that no-code environments like webflow take away a huge amount of work for me when it comes to compatibility, css-to-html structuring and overall accessibility for my clients in terms of wordpress alternative CMS. Just because you assume that "no-coders" got no competence in what they do, doesn't mean that it is a reality.
@@hitbox7422 It's refreshing to hear this mindset re-iterated. Over my years of web development I've found that each new framework with support is its own tool and different jobs can use a variety of tools. Sure building out a webapp tool for the marketing department using a MEVN stack wouldn't be terrible, but I've seen incredibly in-depth and useful tools using Wordpress, originally a "blog" framework, on intranet/private ip for modularity and have way easier time to customize without worrying about security of multi-tenant public access & scaling.
I think certain tools, with the right support, can age like wine and become tasteful to our budgets of time and money with the right outlook.
Love the series. thank you, Ran!
Coming from back end CS, I gained so much knowledge from these two videos
Great video! The z-index trick was just what I needed for a project, so that was very timely.
Is there a way for us to view the completed project on Webflow?
Thanks!
Blending modes for images are now working as its supposed to be.. Good job webflow!!
Webflow is something like Adobe Dreamweaver but more intuitive. It's helpful to reduce my coding time. I will consider the switch to Webflow. Thanks for sharing this video.
buddy...I just directly and almost instantly understand everything you are sharing with us...one amazing quality of such to transmit knowledge :))..pure pleasure to listen and learn with you!! THX!! :))
This was so helpful!! Thank you
Thank you very much for this great tutorial!!
Hey Ran, thanks as always. Great job team!
Do you plan to upload a video about how to publish this site?
Thank you for providing link to part 2 in description of part 1
Thank you for this tutorial!
Very Helpful videos! 😄 Thank you so much!
Very useful, thanks!
loved this video thanks for the lesson .........
you should write part 2 in the title ,, amazing explain an easy to understand
Wow, thanks, Ran!!
Noticed that this video has enough spare border so mobile users can zoom in. Thanks for that.
Would increasing your browsers view zoom get similar results?
I want to buy the course - but you keep throwing up all this free GOLD - ive been able to learn Figma + (basic) Webflow and create a (pretty dope) site! Thanks for all you and your team are doing over there.
Awesome and thnx for this ❤️🍻
Great video Ran! Can you create a similar, comparison video using REM's to build in Webflow? It would be very interesting and valuable to compare the two approaches building the same design. Thank you!
Kabarza created a video on our channel about REM typography, check it out
@@FluxAcademy Thanks. I have watched Kabarza's REM video. It was very good. I thought a comparison of Ran's pixel-based approach vs. a REM approach building the same website would be informative and helpful.
Thanks so much for this,such a great and informative video!
Glad it was helpful!
Great tutorial. I followed your figma tutorial as well. I learned lots of things. Make more videos like this.
Awesome, thank you!
Thank you for the video, I'm inspired for this video so much❤
you are the best! Thnak you!
Amazing course. The instructions were very clear.
Great to hear! Thanks
I can't clone the project file @Flux
Man Webflow is the shit. Webflow is literally what we've been needing since the beginning of web development. It is literally the GUI of web development. Like GVIM is for vi. Github GUI or Tower is for git. Without limits like all those other things like Wix and Squarespace.
Earliest viewer to almost watched your entire video. Great Video
Legend!
Nicely done
Perfect work to share (y)
so much. Can’t wait to start making soft.
Hello Sir, for the second green BG-grad, I had to put it relative because 'Absolute position' was not functioning to pull it down to the bottom as I wish. I made it work but curious why. Could you please explain for me? Thank you so much for the video.
Thank you so much!
THANK YOU!! ✌
Thanks Sir ... u r great
Fascinating
Thank you so much for what you've done . I could not download the figma . Where can i download from .
Thanks you !
Why can't this be done just once and for all in Webflow instead of designing it first in Figma? It looks to me like duplicating the same work. The same processes seem to be basically repeated.
tysm man
pretty good 👍
Hi there, thanks for your great videos, but why did you remove the Figma website design with Webflow tutorial?
Hi how do you pass your design after is finish to real code like html and css for your website
It such a fantastic video, can you show me where you get the source of images in the Figma section?
I love your tutorials, if Only I can afford the masterclass
Our updated Webflow Masterclass is on sale this week for 30% off 🎉
I want to center the logo in the middle and links at the right, can you make a video on how to do it?
Just change the max-width of the native container to your required width, which makes it easier to use.
Can anyone explain to me how to make those blurred bubbles overflow between 2 sections (since that's how it's designed in figma) but not overflow the viewport (effectively showing horizontal scrollbar)?
So after creating the design in figma, there's no way to just copy over the groups or figma file? We are basically recreating the design in webflow now but with functionality?
Yes, that is correct.
Would it then make more sense to do it in webflow and skip figma?
@@CortezRP this would cause total chaos in terms of the design.
@@CortezRP Much easier to do the initial design in Figma imho
@@CortezRP exactly what I thought of, we a are just creating 2 website with on one result
Very thanks 😅
Thanks but I'm confused, why you didn't just create it in webflow itself?
Because creation process is much harder in Webflow than in a designtool like figma. I did as a beginner the same. Tried to “create” and design it directly in the backend. But that costs hours more
thank sir. Thank you for answering. So please I have another question. so building a website for a client on webflow or wordpress am I going to create a new email address and then open a new account on the CMS then after building the site and launching it I will now give it to the client the logins and everything So he can access the website or how do they do it. because I don't understand how it is done I've never worked for anybody but I want to start soon.
Thanks for this amazing resource. Please, I need you to send me the stater file so I can tag along, I can't access it on the link you provided in the description.
Hi Ran, please i can't seem to find the link to download the resources for this video (the images in the figma file). I will like to follow along. Thanks man.
nice tutorial i subscribe your channel
Could you please do a video of the basics of starting web flow free lancing?
For example
What plan to buy
How would the client buy a plan if they need to
How to transfer the site to them
Do you still host the website on your account?
Do they pay once or twice
Thanks!!
Basically thay invite you in there workspace as a gust so you don't need to buy a webflow plan here's the more detail in this video czcams.com/video/ZyrycfLPxX8/video.htmlsi=2OfFv0FMuQlKYP-1
which shortcut or key do u use to close the space between the grids on minute 36:17 ?
Great video. Please where is the link to designing this website in
Figma?
Just curious if it is important to develop everything pixel perfect from Figma to Webflow?
So if you have to manually redesign everything, what is Figma for then?
Hello - may be a silly question here, but why do we design in Figma and then again in Webflow? Wouldn't it save time by designing in Webflow straight away?
what do you use for screen recording?
what is the benefit from figma if you create evrything again in webflow ?
Fantastic 😍, could you help with a link to clone the webflow project please 🥺
Sorry i am new on this and i wanna ask you how do we find this site / blog after the design? How do we find this on Google ?
It's crazy how to create the same site on Wordpress you need 10 hours because of the limitation of the Site and all Plugins you need to instal. Webflow it's so easy that i feel using Figma for Web Design.
Do you think that connecting a webflow page to a SiteGround custom domain could cause performance issues when loading the site?
It looks like everything designed in Figma is being redesigned with function within Webflow. Why was Figma used first? Couldn't this be built in Webflow alone?
Also, I saw you used Relume in a different video. Does Relume now cut out a lot of these steps?
Bobby Z I use the signature version but I tNice tutorialnk most of the stuff was also available in the producer edition (I bought that first). I am using
Nice
37:30 I have a problem changing the order of the elements, it doesn't do anything when I click 'First'. Help please! Thanks
I don't like using pixel values for type. Is there an option to use REM units instead?
I would recommend using dynamic media query REM calculations for webflow, and yes, font-size propertys accept REM as factorization unit. If you don't know how to set up media querys yourself, i would suggest to add the finsweet google chrome extension to your browser, this way you get a new option to choose from in webflow which can be used to generate those media querys within the webflow user interface and just copy paste it into your custom code section. This way you can generate dynamic values for the REM factorization depending on your breakpoint.
how can i make the website scale. For example if I have a 21:9 monitor I want the images and text to scale up in order to fill my screen.
You'd still want most of your content centered so users aren't breaking their neck on your site. Also most 21:9 users section their windows left/right or left/center/right, etc which basically gives you multiple smaller screens in one monitor
What do you camera using
Does anyone have problems with background gradient? I followed every steps but the purple circle is still hidden underneath page content wrapper
How to change the canvas settings from 1050px to 1522px like this tutorial.
because everytime i try to charge to 1522px, the scale just 69%, not 100%.
Hello, when I tried to copy the benefit section, to move the image to the left and the content to the right, webflow just doesn't allow me to make the switch even though mine is exactly the same -- a 2 col grid. Does anyone know why?
Has anyone had any experience using the figma to web flow plugin? Does it take everything you’ve designed and output it in the same way?
I have a problem on the buy button with the small dot inside of it. my dot is place outside the button. What do you think is the problem?
I have an issue with the nav bar not being at the top of the screen and being on top of the text and image
i cant find the grid in my layout elements panel,its a lot different,i only have sectiom,container,quick stack , v flex and h flex? please i need help how do i fix this
Basically man - thanks a lot for this tutorial 🤑
Bonjour
svp quelle version ce logiciel figma
parce qu'il ya beaucoups d'options que je n'ai pas dans mon figma
Does anyone know where they get those icons from or if they are made with artificial intelligence?
when I clicked on the link to clone the Figma project, and the page opened, I couldn't see where to input my email to receive the file. yet the instructions are there. what could be the issue?
i can't change the overlay color while using the hamburger menu on mobile and tablet device any help?
Can you explain why you need to re-design a Figma design to webflow?
that's what I was wondering... why dont use only Webflow 😵💫
Can I ask... Why would you create it in Figma only to redo your work in Webflow?
I was wondering the very same thing. My thinking was that elements already designed in Figma would simply be imported in someway into WebFlow?!?🤔
You mentioned a kickstarter project. What is that?