Latest videos

Learn Framer in 3 Days - Day 1
Learn Framer in 3 Days - Day 1 121gamers 2 Views • 27 days ago

My Framer Plugins 👉 https://insertframe.io/
My Framer Course 👉 https://ultimateframercourse.com/

In this Framer Tutorial series, I teach how to build & publish your first Framer website in 3 days.

See you in part 2!

Webflow vs Framer: Which is right for you in 2025?
Webflow vs Framer: Which is right for you in 2025? 121gamers 1 Views • 27 days ago

Things have changed in 2025. Here’s the key differences between these web design tools, to help you figure out which one is right for you.

FREE TRAINING: 3 Steps to Build a Thriving Web Design Career 👉
https://bit.ly/3Tiua2G

🚀 Launch a thriving career in web design with our proven 3-step plan. Discover more about Web Career Ignite 👉 https://bit.ly/4lvxu7n

Learn to build custom websites the easy way with Webflow. Enroll in Webflow Masterclass 👉 https://bit.ly/3Yx0TEe

Master Framer and build stunning sites at lightning speed. Enroll in Framer Masterclass 👉 https://bit.ly/3RgA43m


📱 Find us on SOCIAL MEDIA
Ran's Instagram 👉 https://www.instagram.com/ransegall/
Ran's X (Twitter) 👉 https://twitter.com/ransegall
Flux Academy's Instagram 👉 https://www.instagram.com/flux.academy/
Flux Academy's TikTok 👉 https://www.tiktok.com/@fluxacademy

framer tutorial: building a responsive site from scratch
framer tutorial: building a responsive site from scratch 121gamers 1 Views • 27 days ago

✔︎ Framer University: https://frameruni.link/yt
✔︎ Create a free Framer account: https://framer.university/free-account

In this video, I'm going to teach you how to build a fully responsive Framer website from complete scratch using a site structure developed by top Framer experts. For the practice project, we're rebuilding a few sections from the Framer landing page, with an animated gradient background, parallax scroll effects, and advanced bento grids.

→ Remix the tutorial project: https://framer.university/reso....urces/framer-website

0:00 - Introduction
1:54 - Structure Setup
10:47 - Building Sections: Hero
43:10 - Building Sections: Social Proof
44:47 - Building Sections: Advanced Grid
58:02 - Responsive Navigation
1:13:03 - Layout Template
1:16:49 - Intro Anims
1:19:16 - Additional Resources

Follow me on:
X: https://twitter.com/learnframer
Instagram: https://instagram.com/framer.university

Stacks and Relative Positioning in Framer (Fundamentals Lesson 6)
Stacks and Relative Positioning in Framer (Fundamentals Lesson 6) 121gamers 0 Views • 27 days ago

Stacks allow us to create rows or columns of elements that automatically align, distribute, and space themselves within the available space. Which not only means less tedious scaling and repositioning for us on the canvas — but also lets us build bulletproof layouts that can flex and adapt when things change size in browser.

Stacks not only unlock relative positioning — but also new sizing options that can make elements fill their parent — or make a parent frame automatically fit its children.

In this lesson, we’re going to look at how Stacks and Relative positioned layers work, how they make our lives easier, and of course when to use them.

If you’re already familiar with auto-layout in Figma or Flexbox in CSS, you’ve got a head start — but either way, you’re in the right place because we’re going to start with the basics.

00:00 Intro
00:09 What stacks do and why they matter
00:20 Stacks and relative positioning
00:37 Turning frames into stacks
01:12 Relative positioning behavior in stacks
01:55 Common use cases for stacks
02:25 Fitting stacks to content
03:02 Creating stacks from scratch or wrapping layers
03:55 Default stretching behavior for new stacks
04:16 Stack properties: direction and distribution
05:26 Adjusting gaps between elements
05:55 Aligning elements on the cross axis
06:11 Using padding effectively
06:44 Wrapping elements in stacks
07:02 Applying stack layouts to breakpoint frames
07:45 Wrap up

🌞 Start for free:
https://framer.link/yt
📚 Learn more at: https://framer.link/yt-academy
💎 Join the Community: https://framer.link/yt-community
🎉 Follow on X: https://framer.link/yt-x

How To Frame a 2x4 Wall Corner
How To Frame a 2x4 Wall Corner 121gamers 1 Views • 27 days ago

My Favorite Tool: https://amzn.to/3NIFJuO
Tools We Recommend: https://www.amazon.com/shop/benjaminsahlstrom

In this video I discuss different options for framing corners with 2x4s.

0:00 - 2x4 Corner Framing Intro
0:07 - Ways To Frame Corner
1:19 - The Best Way To Frame 2x4 Corner
2:00 - SUBSCRIBE!!!

Thanks for watching and subscribing! As an Amazon affiliate I earn from qualifying purchases. Thank you for your support!
Was this video helpful to you? Send a tip:https://www.paypal.me/bensahlstrom
Become a Patron: https://www.patreon.com/bensahlstrom

Learn Framer for Beginners in 2024 | Framer Tutorial
Learn Framer for Beginners in 2024 | Framer Tutorial 121gamers 0 Views • 27 days ago

⚡️ Join my monthly newsletter for exclusive goodies:
https://mizko.net/newsletter

---

⚡ Get 3 FREE months on a Pro annual subbie!
https://mizko.net/framer

⚡️ Timestamps:
00:00 - Introduction to Framer
02:07 - Framer ecosystem
04:59 - Framer dashboard overview
06:35 - Portfolio design we will be building
07:05 - Framer workspace overview
14:20 - Let's start building
25:00 - Framer Collections (CMS)
36:40 - Building responsive views in Framer
41:48 - Framer effects

---

Become a highly-demanded Product (UX/UI) designer with me:

Master Figma with my Ultimate Figma Design Masterclass (6,800+ students)
👉 https://thedesignership.com/co....urses/the-ultimate-f

Practical UX Research & Strategy Masterclass (700+ students)
👉 https://thedesignership.com/co....urses/practical-user

Shipfaster UI - Advanced Figma Design System (3,000+ designers)
👉 https://thedesignership.com/pr....oducts/figma-design-

Outline - Figma Wireframe Kit (500+ designers)
👉 https://www.thedesignership.co....m/products/outline-w

Follow me on IG (Daily updates):
👉 https://instagram.com/themizko

---

Follow and learn with me:

Become a legendary designer: https://thedesignership.com
Personal portfolio: https://mizko.net
Instagram: https://instagram.com/themizko
LinkedIn: https://linkedin.com/in/mizko

Complete Website in Framer: Beginner Tutorial
Complete Website in Framer: Beginner Tutorial 121gamers 2 Views • 27 days ago

In this Framer beginner tutorial we build a responsive and animated website from scratch—in 30 minutes.

🔴 learn about the future of creative work:
https://timgabe.com/newsletter
🔴 Working File: https://timgabe.com/resources/....framer-complete-webs

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!

Build a Pro Website in Minutes with Framer (2025 No-Code Guide)
Build a Pro Website in Minutes with Framer (2025 No-Code Guide) 121gamers 2 Views • 27 days ago

Framer is changing how websites are built in 2025. In this tutorial, Hassan from AllAboutAI walks you through how to build a professional website quickly with Framer, no coding required!

🚀 You’ll learn:
• What Framer is and why it’s growing 400% in user adoption
• How to design and publish websites faster than ever
• Framer vs Webflow, WordPress, and Wix — real-world comparisons
• The secret workflow top designers use to save 70% in development costs
• Key tips to optimize speed, SEO, and responsive design

By the end of this video, you’ll know exactly how to use Framer to build websites in days instead of months, while saving thousands in development costs.

💡 All stats & comparisons are based on 2025 industry data from verified market reports.

#vibecoding #framer #nocode #websitebuilder #ai #webdesign #framertutorial #webflow #wordpress #aitools #techtutorial #nocodetools #webdevelopment
Subscribe to Our Channel |
https://www.youtube.com/@allab....outaicom?sub_confirm

Don't forget to:
👍 Like this video if you found it helpful
🔔 Subscribe to AllAboutAI for more insights and updates
💬 Share your experiences in the comments below

Stay updated with our latest content and join the conversation on our social media channels!
🤝Join our community | https://www.facebook.com/groups/allaboutaicom
🌐 Website | https://www.allaboutai.com
👍 Facebook | https://www.facebook.com/allaboutaicom
🐦 Twitter | https://www.x.com/allaboutaicom
📸 Instagram | https://www.instagram.com/allaboutai_official/
🎶 TikTok | https://www.tiktok.com/@allaboutaicom
🧑🏼‍💼LinkedIn | https://www.linkedin.com/company/allaboutai-com/
📌 Linktree | https://linktr.ee/allaboutaicom

Using Hover and Press Effects in Framer (Animation Lesson 2)
Using Hover and Press Effects in Framer (Animation Lesson 2) 121gamers 2 Views • 27 days ago

Let’s start with the basics — how to make things feel alive when visitors interact with them. Hover and press effects are small touches that make a big difference — by giving visitors tangible feedback that makes it super clear if something is clickable in the first place — and if they’ve clicked it successful. In this lesson, we’ll walk through how to create these two effects in Framer in just a couple of clicks.

Grab the remix link here:
https://www.framer.com/academy..../lessons/framer-anim

00:00 Intro
00:05 Why hover and press effects matter
00:19 Jumping into the Framer project file
00:43 Starting with the hover effect
01:02 Choosing and previewing hover settings
01:36 Adjusting transition with spring physics
02:30 Finalizing hover effect settings
02:54 Previewing the hover effect
03:15 Introducing press effects
03:39 Adding a press effect in Framer
03:55 Scaling for a pressed state
04:15 Matching spring settings to hover
04:26 Previewing the press effect
04:39 Adding rotation to the press effect
05:01 Final preview with rotation and scale
05:56 Wrap-up

Sign up: https://framer.link/yt
Follow: https://framer.link/yt-x
Learn: https://framer.link/yt-academy

Learn Framer for Web Design FAST (Beginner Friendly)
Learn Framer for Web Design FAST (Beginner Friendly) 121gamers 0 Views • 27 days ago

If you’ve ever opened Framer and thought, “what even is a frame or a stack?” — this video is for you.

In this quick beginner tutorial, I’ll walk you through the basics of Framer — from understanding frames and stacks to how they work together to build clean, responsive website layouts (without touching code!).

You’ll learn:
✨ What frames and stacks actually mean
✨ How to structure your Framer canvas like a pro
✨ Simple layout tips to keep your designs consistent
✨ How to make your site responsive the easy way


Join the Patreon community here for weekly exclusive graphic design tutorials and to connect with other creatives!!!
use code: YOUTUBESUBS for 15% off:
https://patreon.com/curatedcollectiveco

---------------------------------------

// WHERE TO FIND ME //

join my community or take my courses:
https://curatedcollectiveco.com/

instagram:
https://www.instagram.com/meganweeksdesign/

pinterest:
https://www.pinterest.com/meganweeksdesignco/

online portfolio:
https://meganweeksdesignco.com/

collaboration or business inquiries:
support@meganweeksdesignco.com

---------------------------------------

// MY FREE GRAPHIC DESIGNER RESOURCES //

GET THE FREE WEBSITE DESIGN PROCESS GUIDE HERE:
https://view.flodesk.com/pages..../6333c1377a59217f232

PRE-WRITTEN EMAILS FOR YOUR GRAPHIC DESIGN BUSINESS:
https://view.flodesk.com/pages..../6438202be83ecbda707

WEBSITE IN A WEEK PROCESS GUIDE:
https://view.flodesk.com/pages..../64c0bb6ad206cffe611

BRAND DESIGN ROADMAP:
https://view.flodesk.com/pages..../645bf9ca2efd35a7e39

FREE LOGO DESIGN QUESTIONNAIRE:
https://view.flodesk.com/pages..../63edbe7c8e06d4dae94

PROJECT MANAGEMENT WORKFLOW:
https://view.flodesk.com/pages..../64aefc19e181ddda00f

HOW TO GO FROM HOURLY FREELANCER TO TRUSTED DESIGNER
GET MY FREE TRAINING VIDEO 💥
https://view.flodesk.com/pages..../62f40298e5ea6b3d8ae

---------------------------------------

// TAKE MY COURSES //

LOGO DESIGN: SIMPLIFIED
https://courses.curatedcollect....iveco.com/courses/lo

DUBSADO DECODED: PROJECT MANAGEMENT
https://courses.curatedcollect....iveco.com/courses/du

GUIDE TO: LANDING GRAPHIC DESIGN CLIENTS
This course has 5 video led modules, a downloadable e-book and you will be able to join my community as well 💕
https://meganweeksdesignco.thi....nkific.com/courses/g

✨ WordPress Website Design Course ✨
https://meganweeksdesignco.thi....nkific.com/courses/w

✨ Custom Branding Process Course ✨
https://meganweeksdesignco.thi....nkific.com/courses/c

NOW OFFERING BRAND + WEB DESIGN COURSES IN A BUNDLE 💥
https://meganweeksdesignco.thi....nkific.com/bundles/b

---------------------------------------

// OTHER HELPFUL LINKS //

Join my email list for more helpful design tips:
https://view.flodesk.com/pages..../61eed0f36114df05454

LIKE MY EMAIL STYLE?! JOIN FLODESK FOR 50% OFF
https://app.flodesk.com/sign-up?ref=80647W

GET DUBSADO (my project management system):
https://www.dubsado.com/?c=meganweeks

SITEGROUND (my favorite website hosting for WordPress):
https://www.siteground.com/go/meganwdesignco

---------------------------------------

*I do make a commission on some of the links in this description box. Thank you so much for the support.*

#graphicdesign #framer #webdesign

Framer Tutorial for Beginners (2026)
Framer Tutorial for Beginners (2026) 121gamers 2 Views • 27 days ago

Learning Framer in 2026 has never been easier.

Enroll in the Ultimate Framer Masterclass (on sale) 👇
https://ultimateframercourse.com/

Duplicate this project in Framer:
https://framer.link/JLPgQk4

In this Framer tutorial, I share a crash course on the fundamentals of Framer. Learn sizing, positioning, layout, breakouts and more in this Framer tutorial.

TIMESTAMPS
00:00 - Intro
00:21 - Fundamentals
02:40 - Sizing
05:18 - Styling
06:23 - Adding content
07:45 - Adding an image
08:29 - Adding a button
09:05 - Layout
17:10 - Components
22:46 - Effects
26:29 - Breakpoints
30:40 - Publishing
31:47 - Outro

CONNECT WITH ME
💬 X - https://x.com/theryanhayward
📸 Instagram - / theryanhayward
🤝 LinkedIn - / theryanhayward

ABOUT RYAN
Ryan is your new Framer teacher. Ryan builds products & education for Framer.

Happy building,
Ryan ✌️

Framer Tutorial : Designing a site from scratch
Framer Tutorial : Designing a site from scratch 121gamers 4 Views • 27 days ago

Remix link : https://framer.com/projects/ne....w?duplicate=UrEwKrQo
New to Framer and want to create a stunning portfolio? This beginner-friendly crash course walks you through everything you need to know to get started with Framer! From setting up your account to designing a sleek, professional portfolio, I’ve got you covered. No coding skills required!
In this video, you’ll learn:
✨How to navigate Framer’s intuitive interface
✨Step-by-step guide to building a portfolio from scratch
✨Tips for customizing templates to match your style
✨Adding animations and responsive design for a polished look
✨How to publish your portfolio and share it with the world

Check out my Framer-built portfolio here: https://gracious-screens-348189.framer.app/
Want to showcase your work like a pro? Follow along and build your portfolio today!

TIME STAMPS
0:00 - Intro
1:15 - Introduction to framer
2:10 - framer features
7:40 - Breakpoint setup
9:20 - Stack
17:00 -Designing the portfolio site
1:05:28 - Publishing the design
1:07:28 - outro

follow my other handles :
instagram : https://www.instagram.com/uidesigner.praise/?hl=en
facebook : https://www.facebook.com/praise.onyenwe.1
X : https://x.com/OnyenwePra46037?t=kkGNwx8j9T_6eG_Ksr3fMw&s=09

#framer #beginnerfriendly #webdesign #tutorial

Master No-Code Web Design with Framer - 4-hour Free Course
Master No-Code Web Design with Framer - 4-hour Free Course 121gamers 0 Views • 27 days ago

In this 4-hour free course, you'll learn to create beautiful, modern interfaces. Sponsored by https://framer.com

Start with dark mode and glass designs, then move from Figma to Framer, using stack and grid layouts for responsive websites. Add animations, scroll effects and custom components.

- Final site:
https://significant-nature-656376.framer.app

- Figma template: https://www.figma.com/communit....y/file/1349410423606

- Framer Remix: https://framer.com/projects/new?duplicate=nIehHcqxA4c8HTksIYKC

- Watch on DesignCode with full content: https://designcode.io/framer-web-design-intro

----------
GETTING STARTED

This course is perfect for beginners! No need for prior coding or web design experience. We'll guide you through everything step by step, starting from the basics. However, a little familiarity with computers and understanding the basics of HTML and CSS will be helpful.

Here's how to begin:

- View the final site to get inspired and see what you'll be able to create by the end of this course: https://significant-nature-656376.framer.app

- Sign up at Framer to join the community and start designing: https://www.framer.com.

- Get the Remix link to dive into the design file with ease: https://framer.com/projects/new?duplicate=nIehHcqxA4c8HTksIYKC.

- Download the Figma file to start with ready-made designs: https://www.dropbox.com/scl/fi/r6914i8almfd6jgon1v34/Framer-Course.fig.zip?rlkey=08k2klxw5g7dlj2j9axuqv4x7&dl=0.

Or skip ahead using the Framer template: https://framer.com/projects/new?duplicate=nIehHcqxA4c8HTksIYKC.

- Framer Desktop App: Enhance your designing workflow by downloading the app or work directly in your browser: https://www.framer.com/downloads/.

- Framer Academy: A treasure trove of documentation at your fingertips. Visit the Framer Academy: https://www.framer.com/academy/topics/start.

- Learn Framer UI: Master the basics of Framer's user interface here: https://www.framer.com/features/design-layout/.

----------
ABOUT FRAMER

Framer is your go-to web design tool for crafting stunning, interactive websites with ease. Designed for a smooth transition for Figma users, it boasts a comprehensive Figma plugin for quick layout imports. With a wealth of preset templates, components, dynamic effects, and even AI-powered tools, Framer is both powerful and accessible, regardless of your experience level.

Dive in and start creating! This course will open up a whole new world of web design possibilities for you. Let's make something amazing together.

0:00:00 Intro to Course
0:03:07 Getting Started
0:07:08 Create your first layout
0:20:55 Framer AI
0:28:21 Basic Layout
0:43:47 Animated Text
1:02:03 Figma to Framer
1:15:16 Adaptive Layout
1:27:22 Breakpoints
1:41:19 Components
1:52:15 Effects
2:03:33 Scroll Speed
2:18:51 Scroll Variants
2:31:04 Copy Components
2:41:04 Grid Layouts
2:52:28 Icon Animation
3:03:31 Code Components
3:15:42 Property Controls
3:25:05 Code Overrides
3:38:25 CMS
3:52:49 Search and Conclusion

----------
FOLLOW MY JOURNEY

Twitter: http://twitter.com/mengto
Instagram: http://instagram.com/mengto
TikTok: https://www.tiktok.com/@mengto.design

#framer #webdesign #nocode

Framer Complete Course 2025
Framer Complete Course 2025 121gamers 1 Views • 27 days ago

This is a Premium Framer Course. This is the video you will ever need to learn Framer completely. In this Framer course, we will learn every feature from scratch by designing a real-time complete website. This tutorial is perfect for beginners who want to learn Framer and start making professional websites without any coding skills. In this course we will cover almost all core concepts of Framer including Layouts, Components, Dynamic Variables, Effects, Animations, Responsive designs, Breakpoints, Light and Dark modes, CMS and more.

📦 Get Resource Zip File (FREE) —
https://averagedesigndude.lemo....nsqueezy.com/buy/ada

👉 Get Final Website Source File —
https://averagedesigndude.lemo....nsqueezy.com/buy/114

👉 Get Esteemed Portfolio Templated (Use 25% off Discount Code K3ODCXOQ) —
https://averagedesigndude.lemo....nsqueezy.com/buy/77d

❤️ Show love by Joining Membership —
https://www.youtube.com/channe....l/UCjaRNaAUC2FRKFbTD

---------------

🎓 Topics we cover in this Course:

00:00:00 Intro
00:02:30 Getting Access To Framer
00:03:51 Framer overview
00:07:45 Frames and positioning explained
00:12:11 Layouts in Framer explained
00:19:08 Getting ready for website design.
00:20:28 Defining color styles with dark and light mode
00:22:56 Defining text styles
00:25:12 Desiging responsive navbar component
00:29:19 Breakpoints explained
00:30:08 Adding Tablet and Phone Breakpoints
00:30:38 Components and variants in Framer ft. Navbar
00:41:19 Variables and dynamic components properties
00:44:58 Hero section design
00:48:11 Adding a ticker
00:49:45 Adding a fixed max width container
00:50:35 Making Navbar Fixed on Top
00:51:47 Trick for max width container
00:53:02 Continuing with website design...
00:55:08 Card design, Icons and Dynamic card component properties
00:58:59 Why we use Layouts?
00:59:31 Continuing with website design...
01:01:37 Grid layout
01:03:15 Continuing with website design...
01:04:01 Button component with hover and pressed state
01:05:51 Dark and Light mode
01:06:44 Continuing with website design...
01:12:08 Fixing Tablet and Phone Design for Responsiveness
01:18:52 Making new contact page and Adding Templates
01:23:12 Adding form to Contact Page
01:29:30 Making Thank you page and adding redirection
01:30:49 Making a work page
01:32:34 Intro to CMS
01:33:47 CMS setup and connection
01:50:01 Adding breakpoints to all pages
02:11:03 Publishing website
02:13:26 Outro

-----------------------------------

🎯 Want to learn more about Figma? Subscribe to my channel.
https://youtube.com/@AverageDesignDude

🚨 Learn more tips and tricks on Figma on my Instagram channel below
https://www.instagram.com/averagedesigndude/

Showing 43 out of 44