Build alongside Ran by downloading the starter file here 👉
Check out our brand-new Figma for Web Designers course with @MaddyBeard:
Need a new Figma account? –
See part 2 on how to build this site with Webflow:
📽️ CHAPTERS
00:00 – Introduction
01:00 – Figma interface overview
04:30 – Page & grid setup
09:30 – Designing the hero & navigation
21:20 – Creating the background effect
25:00 – Building the content section
30:50 – Masking & blend modes
36:30 – Using Gradients
39:00 – Building the footer
40:40 – Designing a form
42:00 – Next steps
⬇ If you would like to watch more Figma Tutorials, please let us know in the comments ⬇
Don’t forget to subscribe to our channel for more Design Content. Click here 👉
🎨 Learn the Art & Business of Web Design. Check out all our courses 👉
📱 Find us on SOCIAL MEDIA
Flux Academy’s Instagram 👉
Ran’s Instagram 👉
Thanks for watching our video!
#Figma #WebDesign #FluxAcademy
Amazing delivery, amazing tutorial.
That's exactly what I was looking for! Thanks Ran 🖖
This was very informative!!
I feel kind of dumb asking this question but I'd love it if somebody could please explain something to me like I'm a 5 year old…
Why do you first draw the whole site in Figma only to re-draw it again in Webflow?
Wouldn't it be better to just do it all in webflow?
I have no experience in any of this and I want to learn how to create websites on my own.
Part 2?
you are good.thanks man.
I put my e mail and I didn’t get the resources file, do u have any idea of what could be the reason?
Can we make exact same design and put it in my portfolio as I am a beginner
I followed in detail with the downloaded assets. Thanks, it was great!
It may be overwhelming to be exposed to so many features and buttons Figmas offer but this video is such great tutorial to learn the basics. I was able to follow along and replicate the example page design. Thanks so much!
Thanks for the video! Excited to use this tool more and get better with it!
I really love this video, very explained for beginners, I could find the "PART 2", could you send me the link. Thank you for all this.
How the nav bars work?
Its necessary to take another frame to open 'about ' nav bar?
Where can I get payment illustration pack
Thank you. for making it a project. It helps to understand. It was very informative and easy to digest. :))
Ive heard the advice of DO NOT GROUP.
33:35 anyone else not finding the Layer section? I tried grouping and ungrouping, but it won't apprear.
The title of the video says "complete website" but it's just the design.. how do you then transfer this design into code and publish ?
5:27
great
Thank you very much
For the testimonial maybe could be created as the Symbols ( in Sketch ) like object in programming so that when you change the value in one instance of a testomonial all testimonial change their variable ( but not the text and image ) but maybe that's to advanced.
Great tutorial, thanks.
Designers are getting creative throwing around elements that are not positioned according to the grid, sometimes outside the section they are added to, without giving any thought to how a developer would implement them.
please share the link of other steps? i mean how to execute or preview it in prototype tab.. (sorry im new to all this, don't know what to call it)
This is cool! Can you please share a tip how to add a real scrollbar to my Figma web presentation. If I have long landing page it is so crucial element. So that my clients will get real web-like feeling when they navigate and scroll.
So far I have not found any good tutorials about scrollbar and Chat GPT was also not very helpful.
sir i use grid and it cover text and shapes, i tried to do bring to front but nothing happening Can you help me?
How is this a website without fuctional buttons that work and additional pages?
Great video , each step very well explained. Learned Figma by just following the tutorial.
That was really a helpful starting man!!. Now i can deep dive into more of it. Thanks buddy
I'm unabe to get the link for th duplicate of the project
thank you for this video❤，it helps me learn more than a course that im joining. may i know that how to get those material from a website what extension that are usinh😊
can you also show how we put it in wordpress(elementor) or in shopify?
Great content here. I came to learn a bit more and get used to Figma, but now I also have some more ui design tricks and insights on my bag. Thank you.
where is 2nd part??
every thing is too small to see and i can't tell what to put or click
nice one
how can I find the next tutorial?
Better one shot doesn't exist❤
Nice video!!! Thanks 🙂