A basic Framer tutorial, showcasing how to create a simple landing page in Framer—completely from scratch, and in just about 15 minutes. Try Framer for free here: https://www.framer.com/

Timestamps:
00:00 Introduction
00:23 Drawing a Topbar
01:20 Creating a Stack
02:19 Creating a Component
02:32 Creating a Text Style
04:00 Creating a Link
04:26 Adding a Video
05:01 Adding a Hover State
06:47 Adding Breakpoints (Responsive Workflow)
07:58 Turning Pages into Stacks
08:58 Adding a Content Wrapper with Max Width
12:05 Adding an Overlay
13:19 Adding Appear Effects
14:20 Customizing the Overlay
15:24 Adding Page Links to the Topbar

🌞 Try Framer for free: https://framer.com/
💖 Follow on Twitter: https://twitter.com/framer
💎 Join Discord Community: https://discord.gg/framer

#website #webdesign #framer

source

By Framer

33 thoughts on “Make A Framer Website In Minutes”
  1. Love Framer, this is really a game changer for the no code community. Now we just need a way to integrate with things like memberstack and stripe and we can create our own e-learning or e-commerce platforms. Goodbye Webflow!

  2. I hope there will be more tutorials like this. I wish there was a tutorial video on how to prototype "Scroll", "Carousel", etc. on a web page.

  3. Thanks Benjamin. That was very helpful and I'm pretty impressed by the features you folks added to Framer in the last few months. Now I need to brush up my react.js skills and I want to make sure I can match the necessary level of Accessibility for the page. This is essential to me like using semantic HTML. Next is taking first steps with Motion and get going with page design. It is fun to work with Framer so far. Take care folks.

  4. I really like these kinds of videos! I would love to see a video like this in which you explain how to work with overlapping layouts like you would with negative margins.

  5. These kinds of videos are great! Please make more videos like theses where you show us how you build different layouts and website designs in framer from scratch!

  6. Thanks for sharing the video. Could you make another video making an e-commerce website including CMS & payment with Stripe or Paypal payment system and how to publish it online, thanks))

  7. Awesome tutorial ! I need help with something – when I set my page to auto height, it just becomes tiny , like the size of the top bar – but I definitely have multiple large frames inside of it. Any suggestions?

Leave a Reply

Your email address will not be published. Required fields are marked *