Figma to Webflow - Complete Website Tutorial
Вставка
- Опубліковано 9 лип 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
![ОРБАН приехал к ПУТИНУ и "отчитался" о поездке в Киев 😁 [Пародия]](http://i.ytimg.com/vi/_0ukDovOWq8/mqdefault.jpg)
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!
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!
The best webflow teacher, I am learning a lot of things, thank you.
Love the series. thank you, Ran!
Great video! So clear and useful, great job!🔥👌🏼
Just excellent walkthrough. Thank you very much for the content!
this is #1 video for beginers on the whole UA-cam right now. niiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiice!
Thanks for the tutorial. Having experience with HTML and CSS really helped me understand Webflow. Also you're an awesome teacher :)
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.
Coming from back end CS, I gained so much knowledge from these two videos
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.
Blending modes for images are now working as its supposed to be.. Good job webflow!!
Perfectly done, I have used Webflow for 2 years, I still learned something!
Very happy to hear!
Wow, thanks, Ran!!
This was so helpful!! Thank you
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!! :))
Thank you very much for this great tutorial!!
Thank you for this tutorial!
Please make more website tutorials like this.
will do!
Very useful, thanks!
loved this video thanks for the lesson .........
Awesome and thnx for this ❤️🍻
Very Helpful videos! 😄 Thank you so much!
Thank you for providing link to part 2 in description of part 1
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.
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.
you are the best! Thnak you!
THANK YOU!! ✌
Thank you so much!
Thank you for the video, I'm inspired for this video so much❤
tysm man
Thanks you !
Nicely done
Thanks so much for this,such a great and informative video!
Glad it was helpful!
you should write part 2 in the title ,, amazing explain an easy to understand
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!
so much. Can’t wait to start making soft.
Fascinating
Thanks Sir ... u r great
Perfect work to share (y)
pretty good 👍
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
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.
Hey Ran, thanks as always. Great job team!
Do you plan to upload a video about how to publish this site?
Great tutorial. I followed your figma tutorial as well. I learned lots of things. Make more videos like this.
Awesome, thank you!
Earliest viewer to almost watched your entire video. Great Video
Legend!
Very thanks 😅
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.
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?
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.
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.
I love your tutorials, if Only I can afford the masterclass
Our updated Webflow Masterclass is on sale this week for 30% off 🎉
Amazing course. The instructions were very clear.
Great to hear! Thanks
I can't clone the project file @Flux
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.
Hi how do you pass your design after is finish to real code like html and css for your website
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.
37:30 I have a problem changing the order of the elements, it doesn't do anything when I click 'First'. Help please! Thanks
Thank you so much for what you've done . I could not download the figma . Where can i download from .
which shortcut or key do u use to close the space between the grids on minute 36:17 ?
I want to center the logo in the middle and links at the right, can you make a video on how to do it?
Bonjour
svp quelle version ce logiciel figma
parce qu'il ya beaucoups d'options que je n'ai pas dans mon figma
what is the benefit from figma if you create evrything again in webflow ?
So if you have to manually redesign everything, what is Figma for then?
Nice
Just change the max-width of the native container to your required width, which makes it easier to use.
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.
Hi there, thanks for your great videos, but why did you remove the Figma website design with Webflow tutorial?
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)?
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?
nice tutorial i subscribe your channel
what do you use for screen recording?
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?
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
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
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.
Does anyone know where they get those icons from or if they are made with artificial intelligence?
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?
Does anyone have problems with background gradient? I followed every steps but the purple circle is still hidden underneath page content wrapper
Just curious if it is important to develop everything pixel perfect from Figma to Webflow?
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?
Do you think that connecting a webflow page to a SiteGround custom domain could cause performance issues when loading the site?
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?
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?
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
It such a fantastic video, can you show me where you get the source of images in the Figma section?
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%.
i can't change the overlay color while using the hamburger menu on mobile and tablet device any help?
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 ?
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 ua-cam.com/video/ZyrycfLPxX8/v-deo.htmlsi=2OfFv0FMuQlKYP-1
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.
What do you camera using
Basically man - thanks a lot for this tutorial 🤑
Great video. Please where is the link to designing this website in
Figma?
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.
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
There's a problem with coping and pasting the content form Figma to Webflow. CTR+C does not seem to work ...
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
how to select all actions and then duplicate ?
I can't select them all
42:44
Fantastic 😍, could you help with a link to clone the webflow project please 🥺
I'm unable to download the asset file for this tutorial, their nowhere for me to input my name and email on the website
Same.......