Complete Website in Framer: Beginner Tutorial

preview_player
Показать описание
In this Framer beginner tutorial we build a responsive and animated website from scratch—in 30 minutes.

Timestamps
00:35 Styleguide
04:29 Structure
07:05 Design Tweaks
20:07 Responsiveness
26:29 Delightful Animations

#figma #figmatutorial

➡️ QUESTION — Have a question about UI, UX or Product Design? Designing in Figma? Or Anything Else? Post in the comments section of this video—I’m happy to answer!
Рекомендации по теме
Комментарии
Автор

I’m a front-end dev and this blew my mind. It’s the first time I’ve seen a tool that can really do what I do and also do it significantly faster

dandenney
Автор

I've checked a few framer crash course vids so far and yours is by the best in terms of detail and precision as well as providing one with good project setup practice. I can see you approach things in a very systematic way, which is fantastic for a beginner to incorporate from the outset. Thank you!

MrAbbo
Автор

I'm only halfway through but I had to pause and comment that this is gold!

Was thinking how I could create or use my design system in Framer. This answered it all.

And I love how you can use Framer's ready-made sections or components and just tweak them instead of making everthing from scratch.

Great tutorial, my dear friend! 💛

xhongaronga
Автор

Thanks, bro, for this video! I've been learning Framer for the last two weeks and have been having a very hard time making my template responsive. Your video is a big help!

rajnomadheart
Автор

so I'm brand new to web design - like I got the idea to do this 10 days ago. Found webflow, I like it, easy to use and they have the "university" but the ability to zoom out to see things in a clipboard style is just amazing.

JennieLyra
Автор

Really great tutorial mate. Definitely going to go through more of these. As a designer, Framer seems like the perfect tool for building websites visually. I love the examples you included here too — very informative.

BenDixon
Автор

I've been looking at framer tutorials for a few weeks and this is really different. It's exciting to discover you.

anlcemcavl
Автор

Side question, how did you create all those graphics, as they are an important part of web design, it would be great to learn how/where you created them

Daniel-lgm
Автор

I’ve just switched from Wix to Framer today and whilst I was initially VERY overwhelmed and frustrated I am blown away by the functionality of Framer! I’m very thankful to have discovered your channel and I have to say that tutorials such as this are invaluable for people just starting on Framer! The pace you have used and the explanation throughout is absolutely spot on! Thank you bro! 🤜🏼🤛🏼

rbkz
Автор

Very informative! Loved every second, plus it is all free! Thank you Gabe!

Gdhead
Автор

Amazing! Well explained, well performed, well Teached. Make my day welldone keep uploading videos like this.

sabasaba
Автор

GREAT tutorial! So excited to watch more of your tutorials and build my site.

celinda
Автор

2:03 Hey great tutorial! Curious what video you were talking about in the "top right corner", nothing popped up there or in the description

mushroomthump
Автор

Mr Tim Gabe, another ground breaking tutorial.😮your content is absolute exceptional.Clear, practical and can be applied.Thank you, may your channel forever grow🎉🎉🎉🎉🎉

puseletsomaraba
Автор

this just saved my life lol! And im in awe with Framer! thanks!

lizcorrea
Автор

@Tim Gabe, I have a genuine question. At 0:20, when you showed the post with flickering things around it, is it just annoying and distracting for me, or do you agree? I'm still learning and curious. I've watched your other video about how important typography is in design.

reaperpros
Автор

Absolute quality - the tutorial and the working file design! Also thanks for the 'shapefest and pexels' resource tip

MarcusParry
Автор

Hey Tim, really love this, but I'm pulling my hair out on one simple thing... at 4:28 where you have a blank desktop page/frame but I can't seem to make the same. I'm guessing they've removed the option to just make a blank page within a document? The file you supplied already has pages designed, so I can only add a breakpoint, then move it to structure, then delete all its elements/features? Quite laborious! They really need a blank page option!!

Ryan-krbq
Автор

This is such a great tutorial! I'm going to make my own version of what you just did. Thanks for sharing.

jswanson
Автор

Hey Tim, for your client projects do you usually build things in Figma with all the auto layout constraints/restrictions set and then use the Figma to Framer plugin to export it to Framer or do you build it from scratch in Framer like you did in this video?

somanna_bu