Figma to Webflow - Complete Website Tutorial

Рет қаралды 304,336

Күн бұрын

📘 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

Пікірлер: 255

@Reapertips Жыл бұрын

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!

@zupixd 9 ай бұрын

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!

@BrantK147 Жыл бұрын

Thanks for the tutorial. Having experience with HTML and CSS really helped me understand Webflow. Also you're an awesome teacher :)

@blondelchedjou6202 2 жыл бұрын

The best webflow teacher, I am learning a lot of things, thank you.

@windmaomao Жыл бұрын

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.

@mrtbgz Жыл бұрын

Blending modes for images are now working as its supposed to be.. Good job webflow!!

@jahongirrislikboev88 Жыл бұрын

Just excellent walkthrough. Thank you very much for the content!

@joshuajia722 2 жыл бұрын

Perfectly done, I have used Webflow for 2 years, I still learned something!

@FluxAcademy 2 жыл бұрын

Very happy to hear!

@techwithjordan 10 ай бұрын

Coming from back end CS, I gained so much knowledge from these two videos

@rakshithrao7217 2 жыл бұрын

Please make more website tutorials like this.

@FluxAcademy 2 жыл бұрын

will do!

@tommasomariotti3342 2 жыл бұрын

Great video! So clear and useful, great job!🔥👌🏼

@kaskas55 2 жыл бұрын

Love the series. thank you, Ran!

@SLApple-hp9ed Жыл бұрын

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.

@yavor7607 2 жыл бұрын

this is #1 video for beginers on the whole KZfaq right now. niiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiice!

@MarcelousTV Жыл бұрын

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!!

@heathernowak1791 Жыл бұрын

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!

@wfwfwfwfwfwf Жыл бұрын

Cheers for talking about Relume. Looks good.

@theblowupdollsmusic Жыл бұрын

Thank you for sharing. I was not aware of the Relume or Flowbase libraries. Game changed.

@stenliosko 2 ай бұрын

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!! :))

@lunai3225 Жыл бұрын

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

@jj-jo6wr Жыл бұрын

How many years of coding?Do you feel regret no coding is required now?

@lunai3225 Жыл бұрын

@@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

@rah2023 Жыл бұрын

@@jj-jo6wr haha no coding is a joke. Type of projects we're working on, no code people are not allowed to touch it.

@hitbox7422 Жыл бұрын

@@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.

@DreckzTV Жыл бұрын

@@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.

@EnglishRain Жыл бұрын

Thank you for providing link to part 2 in description of part 1

@Ben-iz3eh 2 жыл бұрын

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!

@KlaasVictor 11 ай бұрын

Thank you very much for this great tutorial!!

@lawrencelabra540 Жыл бұрын

This was so helpful!! Thank you

@marialinova8940 Жыл бұрын

Thank you for this tutorial!

@Raccoonov Жыл бұрын

Very useful, thanks!

@JehadiHellTransportAgency 2 жыл бұрын

loved this video thanks for the lesson .........

@brahmiuniyal 5 ай бұрын

Very Helpful videos! 😄 Thank you so much!

@aliyahya9388 Жыл бұрын

you should write part 2 in the title ,, amazing explain an easy to understand

@andrewrivers731 2 жыл бұрын

Wow, thanks, Ran!!

@Ed-ri8of 2 жыл бұрын

Hey Ran, thanks as always. Great job team! Do you plan to upload a video about how to publish this site?

@frictiongraphics116 2 жыл бұрын

Awesome and thnx for this ❤️🍻

@marcosltd 2 ай бұрын

Thanks so much for this,such a great and informative video!

@FluxAcademy 2 ай бұрын

Glad it was helpful!

@heycarrrl Жыл бұрын

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.

@user-zi4xo5rc2w 18 күн бұрын

Great tutorial. I followed your figma tutorial as well. I learned lots of things. Make more videos like this.

@FluxAcademy 18 күн бұрын

Awesome, thank you!

@christianjoelcaracas4180 Жыл бұрын

so much. Can’t wait to start making soft.

@EricksonGaloso 4 ай бұрын

Thank you so much!

@aleksandrakomarova7710 Жыл бұрын

you are the best! Thnak you!

@Belliferous 2 жыл бұрын

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?

@J0PHIEL 2 жыл бұрын

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?

@markhamilton8765 2 жыл бұрын

Yes, that is correct.

@CortezRP 2 жыл бұрын

Would it then make more sense to do it in webflow and skip figma?

@tangysyrup8827 2 жыл бұрын

@@CortezRP this would cause total chaos in terms of the design.

@WeiFinder Жыл бұрын

@@CortezRP Much easier to do the initial design in Figma imho

@eleratalkstoo123 Жыл бұрын

@@CortezRP exactly what I thought of, we a are just creating 2 website with on one result

@keithlancaster5489 Жыл бұрын

Nicely done

@everydaynuggets Жыл бұрын

THANK YOU!! ✌

@wesleygibson815 Жыл бұрын

Thanks Sir ... u r great

@raindrops6342 4 ай бұрын

Amazing course. The instructions were very clear.

@FluxAcademy 4 ай бұрын

Great to hear! Thanks

@MadaraUchiha-ic6so Ай бұрын

I can't clone the project file @Flux

@amnankhalid6915 Жыл бұрын

Perfect work to share (y)

@emilekoffi5257 Жыл бұрын

Thanks you !

@DanStPeter 2 жыл бұрын

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!

@FluxAcademy 2 жыл бұрын

Kabarza created a video on our channel about REM typography, check it out

@DanStPeter 2 жыл бұрын

@@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.

@chensam2894 Жыл бұрын

pretty good 👍

@workers_without_border Жыл бұрын

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.

@MrGnorts 10 ай бұрын

tysm man

@segunsamuelbabalola3216 Жыл бұрын

Thank you so much for what you've done . I could not download the figma . Where can i download from .

@miladshojaei3678 Жыл бұрын

Hi there, thanks for your great videos, but why did you remove the Figma website design with Webflow tutorial?

@karas.6876 2 жыл бұрын

Are you planning on showing us how to make the website responsive? That's the main thing I'm struggling with at the moment.

@VoyagesJapan 8 ай бұрын

Hi Karas, not sure if you've figured this out, but I was reading through the comments today and saw this one. I watched this video after the Flux Academy video and he goes over Responsive design i Webflow really well. It's more beginner level, but the way he teaches it will give the fundamentals you need to make this website responsive. Figured I'd pass it on. kzfaq.info/get/bejne/d7FpoaRpvammkYE.html

@balorochristian5320 Жыл бұрын

Very thanks 😅

@xyler9284 2 жыл бұрын

Just change the max-width of the native container to your required width, which makes it easier to use.

@warpixeldev 4 ай бұрын

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.

@PubgLover-lc6zm 2 жыл бұрын

Earliest viewer to almost watched your entire video. Great Video

@FluxAcademy 2 жыл бұрын

Legend!

@gcbpux Ай бұрын

I love your tutorials, if Only I can afford the masterclass

@FluxAcademy Ай бұрын

Our updated Webflow Masterclass is on sale this week for 30% off 🎉

@paulifedolapo6692 Жыл бұрын

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.

@vamosaprenderlol1163 Жыл бұрын

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.

@JD-fx7hj Жыл бұрын

Hi how do you pass your design after is finish to real code like html and css for your website

@MinhAnh-gi1em Жыл бұрын

It such a fantastic video, can you show me where you get the source of images in the Figma section?

@priscillatagoe525 Жыл бұрын

Great video. Please where is the link to designing this website in Figma?

@benjamintang3568 Жыл бұрын

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?

@angelvelazquez1792 Жыл бұрын

Just curious if it is important to develop everything pixel perfect from Figma to Webflow?

@adebayoelijah1041 Жыл бұрын

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.

@JavisDj7 Жыл бұрын

I want to center the logo in the middle and links at the right, can you make a video on how to do it?

@valentinneufeld6182 Жыл бұрын

Nice

@IAMCHIDERA Жыл бұрын

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!!

@Xhami888 3 ай бұрын

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 kzfaq.info/get/bejne/kN-irMaXsbbciGw.htmlsi=2OfFv0FMuQlKYP-1

@mahmoudoluwafemi3 9 ай бұрын

Fantastic 😍, could you help with a link to clone the webflow project please 🥺

@KachZz 7 ай бұрын

So if you have to manually redesign everything, what is Figma for then?

@jo69123 5 ай бұрын

Do you think that connecting a webflow page to a SiteGround custom domain could cause performance issues when loading the site?

@smgraphics3012 2 жыл бұрын

nice tutorial i subscribe your channel

@Abdullahalmamun-bf5tc Жыл бұрын

what do you use for screen recording?

@stearless Жыл бұрын

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)?

@mr.tallguy Жыл бұрын

Basically man - thanks a lot for this tutorial 🤑

@slayertx 4 ай бұрын

I am so confused by this... You just rebuilt the site in webflow and didn't need figma at all. You didn't import a single thing at all.

@jamesroberts8937 12 күн бұрын

No seriously, I don’t get the point of this either just do everything in webflow to begin with

@profeRo. 2 ай бұрын

which shortcut or key do u use to close the space between the grids on minute 36:17 ?

@10013paul 2 жыл бұрын

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 ?

@outpost31737 2 жыл бұрын

I don't like using pixel values for type. Is there an option to use REM units instead?

@hitbox7422 Жыл бұрын

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.

@razvanmuresan6683 Жыл бұрын

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.

@WeiFinder Жыл бұрын

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

@samirakh2640 4 күн бұрын

Bonjour svp quelle version ce logiciel figma parce qu'il ya beaucoups d'options que je n'ai pas dans mon figma

@mansweepquo Жыл бұрын

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?

@cubedesigne Жыл бұрын

What do you camera using

@michaelomodele1240 Жыл бұрын

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.

@amenwiz 25 күн бұрын

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?

@thaorlinh Жыл бұрын

Does anyone have problems with background gradient? I followed every steps but the purple circle is still hidden underneath page content wrapper

@wanivision. 2 ай бұрын

37:30 I have a problem changing the order of the elements, it doesn't do anything when I click 'First'. Help please! Thanks

@naifhomood4309 6 ай бұрын

what is the benefit from figma if you create evrything again in webflow ?

@riaamoorthy6743 5 ай бұрын

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?

@kositakis0617 10 ай бұрын

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

@vickylondon1543 Жыл бұрын

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

@sarfaraznawaz7874 2 жыл бұрын

For fonts 500 is medium, 600 is semi bold, 700 is bold.

@roryflorensa Жыл бұрын

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%.

@shubh8537 Жыл бұрын

Hi I haven't watch the full video yet, I did watch the previous Figma one and have made the design there. I had a question which is what is the point of designing in Figma if we have to redo everything on Webflow? ( This might seem like a stupid question but I am just trying to understand things better)

@laco3042 11 ай бұрын

Figma is to design a prototype of your website. A prototype lets you test your layout and design theory efficiently. Once it's perfected you use it as a guide for yourself to build the site in Webflow.

@shubh8537 11 ай бұрын

@@laco3042 I see that makes a lot more sense thank you

@JaideepMultani Жыл бұрын

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

@AshcanComicsPub 7 ай бұрын

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?