A little tip for you - when you style the buttons in webflow you should add stroke to every of them. Even if you don’t want stroke on particular type of button, add stroke with the same color as background to avoid different heights in buttons. Aside from that, the video is a perfect tutorial, love it!
You can convert PX to REM right in the webflow designer. Type in your pixels, lets say 70. Then continue typing 70/16rem, hit enter, and the conversion happens automatically. Great video Ran, absolutely love these. The more I see these, the more I want to do your courses. Keep it up.
So awesome!! Ran.. process vids like this are my absolute favorite. Also.. I feel like you were a lot more positive and supportive of yourself. I feel like you are someone who can be hard on themselves due to high standards.. just know that everyone watching is very impressed and grateful ;) You rock Ran!!!
For context I haven’t finished watching this… Ran this is really good almost feels like it should have be the second level of the Webflow master class 4.0. It definitely gives OFF that vibe but more polished. ❤
Hi Ran, here to say that you can just divide the pixel value by 16 to get rems. Also you can calculate them directly in Webflow just typing /16 + enter 😁
Hey man, a great tutorial to making a website, even a complete beginner like me was able to design a website for my own company, completely different than what you made. Just a quick suggestion that whenever you talk about app integrations into other apps, just make sure to warn people or give a disclaimer that this is available to people who have paid for a plan. Like I made the entire design in figma and was really happy about how it turned out but when I went to export it to webflow I was faced with the message of 'upgrade your plan to import to webflow'. TLDR: Amazing video and tutorial - made my own site by following along, just note to give people a heads up about what plan you're using if you are at all and to give a disclaimer that certain features won't be available to you if you don't have a plan for relume.
Thank you SO MUCH for this video. I just took the plunge and decided to fork over $38 to Relume so that I could import to Figma and Webflow, and I went through their getting started tutorials and everything in every video made sense except for the last video which was "Moving from Figma to Webflow" and I didn't understand why they said it's moving from Figma to Webflow but he started to create the site from scratch in Webflow and then said "If your project is in the Relume site builder just import it" and he clicks import... Then he says that if it's not then he proceeded to copy a bunch of components from Figma to Webflow. and I was totally confused. He really needed to say what you said in a couple minutes in the beginning of the "Build in Webflow" section and now it makes total and complete sense. Also your process here seems WAY simpler than what he was doing but I honestly was so confused I couldn't trust that I had the right idea about what he was doing coz I was completed lost on that video. This video explains it clearly and it seems it really is not much different from moving a site from Figma to Webflow without the use of the plugin, except that you already have the Wireframe and style guide in Webflow which makes it a lot faster already.
@@KalvinPatel Webflow has different pricing options with their hosting included in it. I've used Bluehost as well but it would be hard to compare the two because Webflow is not just a hosting plan.
@@faelanm gotcha, ya Webflow is alsso an editor too. Right now I have BluHost hosting, GoDaddy domain, and I use Semplice as my portfolio builder (that uses wordpress). Would you recommend me switching all that over to Webflow and just learn how to utilize webflow?
Cannot express to you how much I was waiting for this video! I'm not a designer but need a website and was inspired to try using relume to figma to webflow after watching one of your older videos. It's been weeks of frustration & trying to figure things out (I wasn't familiar w any of this). This video answered so many of my questions and came just in time. Thank you so much!
This video is really helpful as webflow designer. I was stuck and confused about the relume. But in this video you explained very simple and how the tricks works using relume from wireframe to design and to webflow, and the very interesting part was the animation on scroll body bg change and also the text scroll animation while scrolling. Thanks buddy , it’s super valuable content, thanks for your time. So much appreciated ❤😇🥰👌
What did AI actually do in this video? Ran chose the colours, font and style. The only thing AI did was the wireframe, which was adapted by Ran. And to put together the already existing components, which were also modified by Ran. And then he had to manually copy everything into Webflow. AI is certainly an inspiration, but it accounts for less than 20% of the end product.
my only problem with all of this is that there are so many different plugins, etc you have to know about to download. . Just seems like so many steps you have to learn when all of those plugins should just be part of the core in my opinion. This video is amazing and I've been a Wordpress guy for 15 or so years so this is a huge learning curve for me, but this video is giving me hope that I can catch on pretty quickly. Thank you for your great content! Kind of lame that after you import the figma over to webflow that you have to re-add all of the images.
This video is complete gold! Amazing tutorial. Just a question, when I try to clone the style guide of Webflow it doesn't allow me as it says I've reached the limit of 2 unhosted sites. How can I fix this?
Please Help! I'm a total Newb to Relume and Figma. Where do I find the pages you show in the tutorial, 01 Inspirations, 02 Moodboards, 03 Art Directions, 04 Wireframes?
That's an awesome workflow! Can I use the Relume plugin in the free version of Figma, and can I use the plugin to export my site from Figma to Webflow also in the free plan of Figma?
Hello Ran, Thank you so much for this video. I liked it. I have a couple of questions for you and I would love if you can answer me in detail. I am someone who has no experience in coding, designing, and development. I am someone who has done SEO on WordPress websites only. Even on that platform I never had any development experience. So my questions are. 1. Is this video for someone who has zero experience in coding, designing and development? 2. I am not sure if you were using the free versions of Webflow and Relume, as you just showed us developing 1 page. Since I want to start my agency I assume I have to purchase both of these tools? 3. Lastly, if I am purchasing Relume, do I still have to purchase Figma or can I work over the free version? The Reason to ask you is that I am from a third-world country where a Dollar costs around Rs. 280. I want to start my agency but I have a very limited budget. Please help me with this. Please Be Honest. Your expert advice will help me in making decisions. Thanks
Hi.Ran I enjoy learning webflow with your amazing tutorials. I have a question bro.I find difficuilt in pricing per page especially CMS powered blog pages .like main blog page and its 7 template pages .My per page price is $30 .My per page price is $30 .How should I charge for CMS powered pages.pls suggest for me.
When I go to my style guide section, I only see the first “typography section, and not the other sections, namely the “variable” section. Is this affected because I have a free Relume subscription?
i cant afford to upgrade the relume cause im only a student that i want to work part time job im so dissapointed that i cant copy the class sync then the relume layout please help me i want to become a good web designer sooooo sad i dont have bank too
You can be a good web designer without Relume. It's just a helpful tool in some scenarios. As you start to get paid for your work you can use that money for your tools, just like any trade.
I bought relume and i am half impressed and half disappointed when you look at the components library for most pages / sections there isnt that many choices thats the only downside for me now!
QQ: In post production phase when you are preparing your resource images to be plugged into the figma doc...What frame of thought are you in when deciding on the size/dimension of each image? Is there a standard or best practice based on popular aspect ratios?? Thanks for the wonderful tutorial.
So essentially, you’ve had no ideas of your own. You copied someone else’s creativity and colors. You lifted the vibe from a museum. You let MidJourney blinker into an uninspiring art direction. Then Relume to avoid having to think about customer journey and experience. Components so you don’t have to think. No consideration for the end user. Maybe they’re all just stoopid and only expect the expected. But this is why AI is killing the creative process. You’re simply creating more noise and less signal. This is not a workflow or best practice to benefit the customer or their customers. This is a workflow that allows YOU to deliver two sites in the same time that one may have taken. It’s the homogenization of the process. The lowering of the bar. And it’ll be a year before those same clients are delivered a tool that lets them do everything you just did, with one click, then they just keep hitting the Remix button until some know-nothing sees something they like. And AI will have left you behind to go play with its new friends.
You're right in a way but no ideas of his own and copied? Maybe you always come up with contents/layouts that are new under the sun. If someone is going to be replaced by AI like you're saying it's definitely not Ran lol. This is not entirely how he executes real world projects, he conducts strategy session to know what are required to achieve the goal of the website. You're not gonna get all of that in a video like this.
What AI is doing is very basic. Stop calling it "revolutionary". Graphic on the left content on the right and the reverse with few cards section... WOW. Soo incredible. Just marketing (overhyping everything).
it's revolutionary because while it takes a few days for you, it takes seconds for the AI, its also revolutionary because its just the beginning, it has tons to improve which it will; scalable
I believe that it is not necessary to use an inspiration board, a mood board and a style guide. This is time-consuming and unnecessary. Using just a style guide should be sufficient.
This is such a great video, thanks for taking the time to make it. The switch to longer form on your videos has been a nice one. The updated Webflow Master Class is also so comprehensive now, but these vids are full of valuable nuggets l. Keep up the great work. 🫡
A little tip for you - when you style the buttons in webflow you should add stroke to every of them. Even if you don’t want stroke on particular type of button, add stroke with the same color as background to avoid different heights in buttons. Aside from that, the video is a perfect tutorial, love it!
Or use box-sizing: border-box; on all elements.
awesome tip, thnx
You can convert PX to REM right in the webflow designer. Type in your pixels, lets say 70. Then continue typing 70/16rem, hit enter, and the conversion happens automatically.
Great video Ran, absolutely love these. The more I see these, the more I want to do your courses. Keep it up.
That's an awesome comment! Thanks for sharing!
So awesome!! Ran.. process vids like this are my absolute favorite.
Also.. I feel like you were a lot more positive and supportive of yourself. I feel like you are someone who can be hard on themselves due to high standards.. just know that everyone watching is very impressed and grateful ;)
You rock Ran!!!
Appreciate that my friend ❤️
For context I haven’t finished watching this… Ran this is really good almost feels like it should have be the second level of the Webflow master class 4.0. It definitely gives OFF that vibe but more polished. ❤
Hi Ran, here to say that you can just divide the pixel value by 16 to get rems. Also you can calculate them directly in Webflow just typing /16 + enter 😁
Hey man, a great tutorial to making a website, even a complete beginner like me was able to design a website for my own company, completely different than what you made. Just a quick suggestion that whenever you talk about app integrations into other apps, just make sure to warn people or give a disclaimer that this is available to people who have paid for a plan. Like I made the entire design in figma and was really happy about how it turned out but when I went to export it to webflow I was faced with the message of 'upgrade your plan to import to webflow'.
TLDR: Amazing video and tutorial - made my own site by following along, just note to give people a heads up about what plan you're using if you are at all and to give a disclaimer that certain features won't be available to you if you don't have a plan for relume.
Thank you SO MUCH for this video. I just took the plunge and decided to fork over $38 to Relume so that I could import to Figma and Webflow, and I went through their getting started tutorials and everything in every video made sense except for the last video which was "Moving from Figma to Webflow" and I didn't understand why they said it's moving from Figma to Webflow but he started to create the site from scratch in Webflow and then said "If your project is in the Relume site builder just import it" and he clicks import... Then he says that if it's not then he proceeded to copy a bunch of components from Figma to Webflow. and I was totally confused.
He really needed to say what you said in a couple minutes in the beginning of the "Build in Webflow" section and now it makes total and complete sense. Also your process here seems WAY simpler than what he was doing but I honestly was so confused I couldn't trust that I had the right idea about what he was doing coz I was completed lost on that video.
This video explains it clearly and it seems it really is not much different from moving a site from Figma to Webflow without the use of the plugin, except that you already have the Wireframe and style guide in Webflow which makes it a lot faster already.
Thanks! Happy to hear that this helped you work it out :)
That's dope! The fact that you do this in 2 hours is amazing!
Thank you for finally showing a good Relume style guide tutorial!
I'm currently taking the Webflow Masterclass and these videos on UA-cam are perfect bonus lessons. Thank you Ran.
Happy to hear! Good luck!
Good luck!
how much do you pay for Webflow, is it better hosting than Bluhost?
@@KalvinPatel Webflow has different pricing options with their hosting included in it. I've used Bluehost as well but it would be hard to compare the two because Webflow is not just a hosting plan.
@@faelanm gotcha, ya Webflow is alsso an editor too. Right now I have BluHost hosting, GoDaddy domain, and I use Semplice as my portfolio builder (that uses wordpress). Would you recommend me switching all that over to Webflow and just learn how to utilize webflow?
Cannot express to you how much I was waiting for this video! I'm not a designer but need a website and was inspired to try using relume to figma to webflow after watching one of your older videos. It's been weeks of frustration & trying to figure things out (I wasn't familiar w any of this). This video answered so many of my questions and came just in time. Thank you so much!
Great to hear!
Crazy content, I love the workflow, the process , everything. Thanks a lot !
Thank you so much for this video. Super helpful and well-presented. Your time and effort is most appreciated!
Glad you enjoyed it!
This video is really helpful as webflow designer. I was stuck and confused about the relume. But in this video you explained very simple and how the tricks works using relume from wireframe to design and to webflow, and the very interesting part was the animation on scroll body bg change and also the text scroll animation while scrolling. Thanks buddy , it’s super valuable content, thanks for your time. So much appreciated ❤😇🥰👌
You're very welcome, glad that it helped!
Best video I have watched on this channel, a true master class
Glad you think so!
What did AI actually do in this video?
Ran chose the colours, font and style. The only thing AI did was the wireframe, which was adapted by Ran. And to put together the already existing components, which were also modified by Ran. And then he had to manually copy everything into Webflow. AI is certainly an inspiration, but it accounts for less than 20% of the end product.
this is amazing video Ran!
Awesome, but would love to have the asset folder provided to us to avoid getting different images.
Insane amount of value
my only problem with all of this is that there are so many different plugins, etc you have to know about to download. . Just seems like so many steps you have to learn when all of those plugins should just be part of the core in my opinion. This video is amazing and I've been a Wordpress guy for 15 or so years so this is a huge learning curve for me, but this video is giving me hope that I can catch on pretty quickly. Thank you for your great content!
Kind of lame that after you import the figma over to webflow that you have to re-add all of the images.
It would be really good if you start sharing your figma pages or project related assets.
WOOOOW Amazing! How would you do it in Framer?
I learned a lot. Thanks!
👋
Awesome vid! with which tool did you create the assets?
Hello there! I would like to know your opinion on which tool is better between Figma and Webflow. Thank you for your time and consideration.
This video is complete gold! Amazing tutorial. Just a question, when I try to clone the style guide of Webflow it doesn't allow me as it says I've reached the limit of 2 unhosted sites. How can I fix this?
Delete one of them
Thanks! Great video! Which AI tool did you use to create the images?
Please Help! I'm a total Newb to Relume and Figma. Where do I find the pages you show in the tutorial, 01 Inspirations, 02 Moodboards, 03 Art Directions, 04 Wireframes?
i think he created them
just wow,its so fast
Awesome tutorial, thanks! Just one question. What website are you using to create those 3D sneakers?
muchas gracias
I build using Elemntor. U think i should move to webflow?
That's an awesome workflow! Can I use the Relume plugin in the free version of Figma, and can I use the plugin to export my site from Figma to Webflow also in the free plan of Figma?
Great video, thanks Ran :D
Glad you enjoyed it!
Hello Ran, Thank you so much for this video. I liked it. I have a couple of questions for you and I would love if you can answer me in detail.
I am someone who has no experience in coding, designing, and development. I am someone who has done SEO on WordPress websites only. Even on that platform I never had any development experience. So my questions are.
1. Is this video for someone who has zero experience in coding, designing and development?
2. I am not sure if you were using the free versions of Webflow and Relume, as you just showed us developing 1 page. Since I want to start my agency I assume I have to purchase both of these tools?
3. Lastly, if I am purchasing Relume, do I still have to purchase Figma or can I work over the free version?
The Reason to ask you is that I am from a third-world country where a Dollar costs around Rs. 280. I want to start my agency but I have a very limited budget. Please help me with this. Please Be Honest. Your expert advice will help me in making decisions. Thanks
@FluxAcademy awaiting response Thanks
Serious question: Webflow or Framer?
can you provide this Brief document , so we can generated another version of it USing AI!
This is hard
I’ve been looking where I can get it
Plz help!!!! 🙏
How can I connect my wrbflow login & signup pages to USIP or somewhere else???
What program/app did you use with the AI imagery?
Hi.Ran I enjoy learning webflow with your amazing tutorials. I have a question bro.I find difficuilt in pricing per page especially CMS powered blog pages .like main blog page and its 7 template pages .My per page price is $30 .My per page price is $30 .How should I charge for CMS powered pages.pls suggest for me.
Deep dive deep dive DEEP DIVE! How do I stop the DIVING!!??
Nice brow 😮
Is it possible to create a booking platform like Airbnb?
Hi ran, i want to ask..
On exibition section. How to make the picture animare? thx
bro as a beginner can i use this method😊
Try it!
When I go to my style guide section, I only see the first “typography section, and not the other sections, namely the “variable” section. Is this affected because I have a free Relume subscription?
so what was the use of Figma? why didn't you export the wireframes from Relume to WebFlow directly?
I believe there are more things Figma can do design wise that webflow can't do
I dont see style Guid in my project.. can you help please
show us how you created the moodboards.....of course...that kind of tutorial...
i cant afford to upgrade the relume cause im only a student that i want to work part time job im so dissapointed that i cant copy the class sync then the relume layout please help me i want to become a good web designer sooooo sad i dont have bank too
You can be a good web designer without Relume. It's just a helpful tool in some scenarios.
As you start to get paid for your work you can use that money for your tools, just like any trade.
Has someone the figma
File with all those materials(e.g. cta, hero-section, features )?
Where did you get the pictures you used......I wanna get mine from there too
Midjurney AI
do the same thing, but this time with framer instead webflow.
how does the style guide already exist? im stuck with getting that synced up with wireframes. someone please help
was i suppose to generate the typography in relume?
I bought relume and i am half impressed and half disappointed when you look at the components library for most pages / sections there isnt that many choices thats the only downside for me now!
You can search "uncommon components" if you want something creative
There is now more components 😁 makes it better
You have not provided the assets. Please provide them so that I can follow and build together.
QQ: In post production phase when you are preparing your resource images to be plugged into the figma doc...What frame of thought are you in when deciding on the size/dimension of each image? Is there a standard or best practice based on popular aspect ratios?? Thanks for the wonderful tutorial.
where is the assets
please show the actual design that you are teaching at the beginning of the video
Couldn't you have done that much quicker in framer ?
Brief …..?
This video is really valuable. I love it
So essentially, you’ve had no ideas of your own.
You copied someone else’s creativity and colors. You lifted the vibe from a museum. You let MidJourney blinker into an uninspiring art direction. Then Relume to avoid having to think about customer journey and experience. Components so you don’t have to think.
No consideration for the end user. Maybe they’re all just stoopid and only expect the expected. But this is why AI is killing the creative process.
You’re simply creating more noise and less signal. This is not a workflow or best practice to benefit the customer or their customers. This is a workflow that allows YOU to deliver two sites in the same time that one may have taken.
It’s the homogenization of the process. The lowering of the bar. And it’ll be a year before those same clients are delivered a tool that lets them do everything you just did, with one click, then they just keep hitting the Remix button until some know-nothing sees something they like.
And AI will have left you behind to go play with its new friends.
You're right in a way but no ideas of his own and copied? Maybe you always come up with contents/layouts that are new under the sun. If someone is going to be replaced by AI like you're saying it's definitely not Ran lol. This is not entirely how he executes real world projects, he conducts strategy session to know what are required to achieve the goal of the website. You're not gonna get all of that in a video like this.
What AI is doing is very basic. Stop calling it "revolutionary". Graphic on the left content on the right and the reverse with few cards section... WOW. Soo incredible. Just marketing (overhyping everything).
lol breathe ..
it's revolutionary because while it takes a few days for you, it takes seconds for the AI, its also revolutionary because its just the beginning, it has tons to improve which it will; scalable
@@S_U_M_E_R u already have basic componenta availabe in webflow just drag and drop and they are responsive
@@diaarraaa I hope your client tells you the same
I believe that it is not necessary to use an inspiration board, a mood board and a style guide. This is time-consuming and unnecessary. Using just a style guide should be sufficient.
This is such a great video, thanks for taking the time to make it. The switch to longer form on your videos has been a nice one. The updated Webflow Master Class is also so comprehensive now, but these vids are full of valuable nuggets l. Keep up the great work. 🫡