Tim Gabe
Tim Gabe
  • 96
  • 4 489 435
Design Better Than 99% of UI Designers
In this video we cover 7 key guidelines the top 1% UI designers use to design amazing websites again and again.
🔴 Framer Zero To Hero Course: timgabe.com/framer-course
Timecodes
0:00 - Intro
0:21 - Guideline 1
2:59 - Guideline 2
5:38 - Guideline 3
6:56 - Guideline 4
7:52 - Guideline 5
9:22 - Guideline 6
11:52 - Guideline 7
Переглядів: 184 387

Відео

From Figma To 3D Website (Using Framer & Spline)
Переглядів 54 тис.7 місяців тому
In this beginner tutorial we'll go from Figma to an animated Spline 3D Website in my favourite web design tool Framer. 🔴 Framer Course Waitlist: timgabe.com/framer-course 💜 Working Files: timgabe.com/resources/scrollable-3d-website Timecodes 00:00 - Intro to tutorial. 00:17 - Starting with converting Figma designs to a Framer website. 00:25 - Exporting from Figma to Framer using the Framer plug...
Framer Parallax Trick (Loop & Scroll Speed Tutorial)
Переглядів 9 тис.7 місяців тому
In this Framer Tutorial you will learn how to create a parallax scroll effect using some underrated settings and techniques. 🔴 Working File: timgabe.com/resources/sneaky-parallax-effect Timecodes 0:00 - Introduction 0:45 - Starting the creation of the frame in Framer. 1:15 - Positioning and sizing image frames. 1:51 - Discussing the removal of animations for initial setup. 2:30 - Adding and con...
3 Tricks For Amazing Button Animations (Framer Tutorial)
Переглядів 11 тис.7 місяців тому
In this Framer beginner tutorial, we're creating amazing button interactions with just a few simple techniques. 🔴 Working File: timgabe.com/resources/easy-button-animations Timecodes 0:00 - Introduction to the buttons 0:39 - Starting the first button with a text field 1:02 - Adjusting the background fill and gradient 1:23 - Matching the gradient colors to an example 1:54 - Adding radius and bor...
Nested Components in Framer (Beginner Tutorial)
Переглядів 14 тис.8 місяців тому
In this Framer Beginner Tutorial we're creating nested components to achieve next level stuff in Framer. 🔴 Working File: timgabe.com/resources/nested-tab-component Timecodes 0:00 - Introduction to the tutorial on creating nested components in Framer. 0:17 - Explaining the purpose of combining components. 0:53 - Starting the recreation of the tab component. 1:58 - Creating a hover state for the ...
Figma vs Framer in 100 Seconds
Переглядів 21 тис.8 місяців тому
How does Figma compare to Framer? In this video we learn the differences and when to use which tool, in just 100 seconds. 🔴 Framer Course: timgabe.com/framer-course
I Made The Biggest Movie Ever Into A Website
Переглядів 4,3 тис.8 місяців тому
Making an epic Hollywood Blockbuster into an equally epic website using modern web design tricks... In this video, we'll give it a try! 🔴 Learn To Create Websites Like This: timgabe.com/framer-course
Easy Scroll Animation For Beginners (Framer Tutorial)
Переглядів 8 тис.8 місяців тому
In this Framer Tutorial for Beginners we will learn easy ways to create impressive scroll animations. 🔴 Working File: timgabe.com/resources/easy-parallax-effect Timecodes 0:00 - Introduction 0:07 - Overview of What You'll Learn 0:12 - Explaining the Animation Sequence 0:39 - Setting up the Initial Structure 0:49 - Adding Elements to the Section 1:03 - Layer Organization 1:14 - Importance of Non...
5 Tricks For Epic Hero Animations (Framer Tutorial)
Переглядів 11 тис.9 місяців тому
In this Framer Tutorial we talk about 5 powerful tricks that will help you create next-level hero animations. 🔴 Working File: timgabe.com/resources/cinematic-hero-animation Timecodes 0:00 - Introduction and Overview 0:36 - Importance of Hero Sections 1:12 - Setting Up in Framer 1:48 - Brief Overview of Five Tricks 2:24 - First Trick Introduction 3:00 - Importing Image to Photoshop 3:36 - Select...
Webflow vs Framer in 100 Seconds
Переглядів 64 тис.9 місяців тому
Webflow vs Framer. Which one is the better choice for you? In this video, we'll compare the two softwares based on the 4 most searched questions-in 100 seconds. 🔴 Free Framer & Figma Resources: timgabe.com 🔴 My Upcoming Framer Course: timgabe.com/framer-course
Crash Course on Framer CMS (Beginner Tutorial)
Переглядів 23 тис.9 місяців тому
This Framer CMS tutorial for beginners will teach you the tricks used to build editable portfolios, eCommerce pages, blogs and much more. 🔴 Working File: timgabe.com/resources/cms-for-timgabe-com Timecodes 0:00 - Introduction to Framer CMS 0:19 - Designing Content for CMS 0:37 - Components of a Card 1:02 - Adding Hover State to Card 1:56 - Placeholder Image & Video 2:20 - Hover State Conditiona...
Can You Copy 6 Websites in 66 Seconds?
Переглядів 20 тис.10 місяців тому
Copying 6 websites in 66 seconds sounds like a joke. But with Framer, I assure you it's not. If you're interested in creating websites, this tool and their newest Copy HTML To Framer Feature will totally blow your mind. 🔴 Join My Framer Course Waitlist: timgabe.com/framer-course 🔴 Learn Framer For Free: timgabe.com/ Links to websites: blogger-site.webflow.io/ solveig-template.webflow.io/ fintri...
Sticky Scroll Explained in 3 Minutes (Framer Tutorial)
Переглядів 31 тис.10 місяців тому
Sticky Scroll Explained in 3 Minutes (Framer Tutorial)
Framer Scroll Animations For Beginners
Переглядів 171 тис.10 місяців тому
Framer Scroll Animations For Beginners
Framer Components For Beginners (Netflix Carousel)
Переглядів 14 тис.10 місяців тому
Framer Components For Beginners (Netflix Carousel)
Card Layouts in Framer (Grid Tutorial)
Переглядів 18 тис.10 місяців тому
Card Layouts in Framer (Grid Tutorial)
Framer Breakpoints in 7 Minutes (Beginner Tutorial)
Переглядів 21 тис.11 місяців тому
Framer Breakpoints in 7 Minutes (Beginner Tutorial)
Master Stacks, Position & Sizing (Framer For Beginners)
Переглядів 33 тис.11 місяців тому
Master Stacks, Position & Sizing (Framer For Beginners)
Award Winning Website in Framer (Loop Effect Tutorial)
Переглядів 14 тис.11 місяців тому
Award Winning Website in Framer (Loop Effect Tutorial)
Get Started: Figma Variables in 3 Minutes
Переглядів 15 тис.Рік тому
Get Started: Figma Variables in 3 Minutes
I used Framer AI to create a website… in 5 minutes
Переглядів 24 тис.Рік тому
I used Framer AI to create a website… in 5 minutes
Master Carousels in Framer (Slideshow, Ticker & Carousel)
Переглядів 72 тис.Рік тому
Master Carousels in Framer (Slideshow, Ticker & Carousel)
Create Any Carousel in Figma (Beginner Tutorial)
Переглядів 107 тис.Рік тому
Create Any Carousel in Figma (Beginner Tutorial)
Designers Are Leaving Webflow... Here's Why
Переглядів 194 тис.Рік тому
Designers Are Leaving Webflow... Here's Why
Complete Website in Framer: Beginner Tutorial
Переглядів 137 тис.Рік тому
Complete Website in Framer: Beginner Tutorial
The Secret Trick For Amazing Animations in Figma
Переглядів 19 тис.Рік тому
The Secret Trick For Amazing Animations in Figma
The UI/UX Wireframe Hack Schools Don’t Teach
Переглядів 24 тис.Рік тому
The UI/UX Wireframe Hack Schools Don’t Teach
Make Your Figma Scroll Animation Real in 4 Minutes (Using Framer)
Переглядів 17 тис.Рік тому
Make Your Figma Scroll Animation Real in 4 Minutes (Using Framer)
4 Easy Tips For Stunning Landing Pages (Figma Tutorial)
Переглядів 18 тис.Рік тому
4 Easy Tips For Stunning Landing Pages (Figma Tutorial)
Master Figma’s Sticky Scroll in 4 Minutes
Переглядів 52 тис.Рік тому
Master Figma’s Sticky Scroll in 4 Minutes

КОМЕНТАРІ

  • @lucas.glopes
    @lucas.glopes 8 годин тому

    This class was absolute amazing! I was finding it really hard to clearly understand and apply Auto Layout on my projects before this video. Now I have finally understand it and I'm already using, and this feature is so great! Thank you Tim 👊

  • @JayJustFly
    @JayJustFly 14 годин тому

    Yep noob, mostly a logo maker an graphic artist

  • @ImSDpotato
    @ImSDpotato 18 годин тому

    100% better

  • @twentyeight602
    @twentyeight602 День тому

    I like how the red lines up with the chicken

  • @feelcollins4358
    @feelcollins4358 День тому

    This is why designers need more than an hour

  • @murtitjahya6782
    @murtitjahya6782 День тому

    Thank you, this is very interesting. And have changed to dark mode, the results are very nice. Next, how to enter each icon only changes the appearance on the phone, does not change the appearance on desktop and mobile.

  • @Monkeymario.
    @Monkeymario. День тому

    10:58 oh also hack 7: do not use flash its 2024 even if you may still have flash player in your browser consider not using flash in your website cuz not many people have flash know this also was true back then cuz mobile devices didnt have flash player.

  • @Monkeymario.
    @Monkeymario. День тому

    5:55 tbh for me left aligned body text is better

  • @Monkeymario.
    @Monkeymario. День тому

    3:16 its really based on the style of the ui you want id prefer 1xfontsize a lot of people may prefer 1.1x 1.2x or 1.3x but to my eyes and for my style 1x is better

  • @Monkeymario.
    @Monkeymario. День тому

    0:06 *ugly

  • @Monkeymario.
    @Monkeymario. День тому

    0:04 *beatuful

  • @aerozg
    @aerozg День тому

    I hate the Figma components, super annoying and super unintuitive. There is only one specific linear way to make advanced components and every time you have to figure out how to do it. I spent the last hour trying to figure out how to make a bunch of different toggle component variants, with different states (default, focus, hover, disabled, with/without a label, with/without support/hint text below, both in light and dark themes.) They made it so fucking complicated for no fucking reason.

  • @Weoeoeo237
    @Weoeoeo237 2 дні тому

    not useful at all for a beginner i didnt understand shit

  • @azzamziply3039
    @azzamziply3039 2 дні тому

    It doesn't reek of corporate website. They should hire u

  • @diptipatel8
    @diptipatel8 2 дні тому

    It looks way better

  • @diptipatel8
    @diptipatel8 2 дні тому

    That's really cool

  • @paulhetherington3854
    @paulhetherington3854 2 дні тому

    /rpx(2''xt frch < 8''vk) u vfr () X''z''(y'') ray + abv vfr ray < moltxub zfr orb/ /X'' < thrm ~tmp mrk fr: cholmn int=cjx djz avpxjn dmx < fch sfr orb cykal/ /ech in xolmn skubz dvrr < in xfr u frc rchn + mtxub chut/

  • @NNNedlog
    @NNNedlog 2 дні тому

    Thanks a lot for this awesome tutorial

  • @vikkanh
    @vikkanh 2 дні тому

    thx from spain, u help me

  • @aoi_hi
    @aoi_hi 2 дні тому

    Happiness is missing I think 😅

  • @evanskariuki2799
    @evanskariuki2799 3 дні тому

    Just what I needed. Thanks Tim 💯

  • @evanskariuki2799
    @evanskariuki2799 3 дні тому

    Thank you for this Tim. Very concise and clear.

  • @TheStallion1319
    @TheStallion1319 3 дні тому

    Seo ?

  • @Scottyhutch1
    @Scottyhutch1 3 дні тому

    Other than a great design, how can you use this in an actual app? I've created a loading icon and can't seem to export in a animated file.

  • @Doowutchylike
    @Doowutchylike 4 дні тому

    It's cool but is it possible to create the event On Drag to work as On MouseWheel event when it's related to desktop apps and websites designed for desktop...

  • @AxelTinnell
    @AxelTinnell 4 дні тому

    First pin 📍

  • @emeraldezy9675
    @emeraldezy9675 4 дні тому

    The Recent Properties Variants. Kudos for all you do

  • @user-ic9oy2uw5m
    @user-ic9oy2uw5m 4 дні тому

    how can I do Detach instance? in the new Figma

  • @mahamednasr9269
    @mahamednasr9269 4 дні тому

    One Q, How can I get the code after I finish???

  • @samyus_song
    @samyus_song 4 дні тому

    I am not getting this plugin

  • @katrinkjellgren9433
    @katrinkjellgren9433 4 дні тому

    Great video! Left me inspired to get some work done:)

  • @jjonglover0420
    @jjonglover0420 5 днів тому

    hi i tried making something with the same method, but with picture, so basically it must function that you can choose you want to use a photo or not, and if you use a photo, you can choose whethere photo A or photo B. I succeed until making the boolean for "has photo or not" and i already made a variant for photo A and photo B. But when i clicked the whole frame component containing the photo component, it doesnt shown me the <photo variant> option, it only shown the "has photo or not" toggle on the right tab...

  • @abdullahalmamun8264
    @abdullahalmamun8264 5 днів тому

    Thanks

  • @milan_kujundzic
    @milan_kujundzic 5 днів тому

    Probably the biggest load of bullshit I've ever heard in my life ngl. Bro tried so hard to make Webflow look bad but he ended up saying that Webflow is great in all of these things all well just Framer is better. But the fact is that Framer isn't better in any of those. Webflow is simple for simple things and complex for complex things. It has a great and big community. It ships updates quite fast it's just that Framer is younger and smaller and they have a room for updates. Amazing product doesn't change much bro. I hope you're getting paid enough for this lol

  • @maramalkrdy2488
    @maramalkrdy2488 5 днів тому

    i watched the video many times and get amazed with the final result every time. thank you very much

  • @adada1st
    @adada1st 6 днів тому

    I'm really looking forward to your "Framer Zero To Hero Course". You are an excellent teacher, love your style ;)

  • @deeptisharma2297
    @deeptisharma2297 7 днів тому

    What if I want to set a count for my tabs? Like my base count of tabes woulb be five tabs. I will follow the steps you mentioned above. And then I want to set a count. I want to change the number 5 to lets say 3 tabs. How does that work as a component?

  • @hugocondori7262
    @hugocondori7262 7 днів тому

    yes but What im looking for how it works in context Im having a problem with text that hides the options of dropdown :/ I dont how to fix this.

  • @stride0812
    @stride0812 8 днів тому

    isn't that redesigning?

  • @maramalkrdy2488
    @maramalkrdy2488 8 днів тому

    very valuable !

  • @yasmin_siraj
    @yasmin_siraj 8 днів тому

    Thank you a lot, Tim! It's really a very helpful tutorial

  • @levitikon1
    @levitikon1 9 днів тому

    Nicely done

  • @Dave_O_O
    @Dave_O_O 9 днів тому

    How does one make it responsive?

  • @bpfeuty
    @bpfeuty 9 днів тому

    I'm so proud to be the 1% who watch UA-cam tutorials

  • @thewelnessinsider
    @thewelnessinsider 9 днів тому

    can we make a design like mid journey in figma?

  • @alejandroquarato8824
    @alejandroquarato8824 10 днів тому

    Excellent explanation Tim, just one question, what is the difference between scroll animation and scroll transform?

  • @johanstam3602
    @johanstam3602 10 днів тому

    Is it me or ? The baymard site uses a serif body font which is very hard to read.

  • @Djerique
    @Djerique 10 днів тому

    Is there also a workfile for this tutorial available?

  • @israelresendiz5038
    @israelresendiz5038 11 днів тому

    What prompt did you use for the other abstract designs? Thanks so much for the tutorials!

  • @chloeli1845
    @chloeli1845 11 днів тому

    Hi Tim! Thank you for creating this super useful video. I am following your process step by step but on the "Instance Property" part, the "Icon swap" isn't working and it has this warning of "Not use within component". How do I fix that?