Jesse Showalter
Jesse Showalter
  • 722
  • 19 754 150
Mastering Framer Components | Variants & Variables
In this comprehensive tutorial, we delve into mastering Framer components, focusing on Variants and Variables. Learn why using components can enhance reusability and consistency in your projects. We'll guide you through the process of creating components, understanding and using variants, and implementing variables for your components. We'll also cover interactive variants, states, and working from the Primary to affect everything else. Join us as we rebuild an accordion using nested components. This tutorial is designed to elevate your Framer skills and enhance your design projects. Don't forget to like, share, and subscribe for more tutorials like this.
... Remember to Subscribe goo.gl/6vCw64
------------------------------------------------------------------------------------
🤝 //////////// Become a UI Designer in 30 Days:
30dayui.com
🏆 //////////// Join my free member's community to get access to perks:
designchamps.io/
------------------------------------------------------------------------------------
🎨 ////////// I Design in Figma
psxid.figma.com/ixbomhqzoiy0
🖥️ ////////// I Build websites in Framer
framer.link/jesse
🖥️ ////////// I Prototype Magic in ProtoPie
www.protopie.io/plans?ref=jesse
📅 ////////// I run my life with Notion
affiliate.notion.so/tokendsfahjf
🎵 ////////// Take your films to the next level with music from Musicbed. Sign up for a free account to listen for yourself: fm.pxf.io/c/1372011/1347628/16252
0:00 Intro
0:35 Basics
3:36 Variants & States
7:47 Variable Properties
12:06 Nested Components
14:09 Accordion
19:06 Outro
zhlédnutí: 1 479

Video

Framer 3D Transforms
zhlédnutí 3,7KPřed měsícem
In this video, we take a deep dive into the world of 3D Transforms in Framer. We'll explore how to create stunning visual effects and animations in your projects, and how to leverage the power of Framer's 3D capabilities to enhance your design workflow. Whether you're a beginner just starting out or an experienced designer looking to learn something new, this video is a must-watch. Don't forget...
Design with CSS Grid Layout
zhlédnutí 4,4KPřed měsícem
Join us in this detailed tutorial as we dive into the world of Penpot CSS Grid Layout. We'll start with the basics, exploring the fundamental aspects of the grid system in Penpot. Then, we'll move onto the advanced features, showing you how to leverage these tools to create complex and visually appealing designs. Finally, we'll build a Bento Layout from scratch, demonstrating the power and vers...
My Design Tech Stack
zhlédnutí 8KPřed měsícem
In this video, I will be discussing and demonstrating my current tech stack. This includes a variety of tools such as Figma, Framer, Protopie, Nucleo, Jitter, and Notion, among others. These tools help me streamline my workflow, increase productivity, and manage various aspects of my projects. I will also be sharing how I use the Notion Calendar and Tidycal to keep track of all my meetings. Tun...
How Freelancers Can Get Paid for High-Fi Prototypes
zhlédnutí 3,5KPřed měsícem
In this video, we explore how freelancers can leverage the power of ProtoPie - a high fidelity prototyping tool that's a notch above Figma, Principle, and After Effects for complex interactions and device functionality. We delve into its ease of use, cost-effectiveness, and the value it can bring to your freelance work. Learn how ProtoPie can enhance your portfolio, help you charge higher rates...
Master Spacing in UI Design 💪
zhlédnutí 26KPřed měsícem
Join us in this video as we delve into the art of mastering spacing in UI design. We'll share key tips and strategies, such as embracing the 8pt grid for consistent and precise spacing, understanding the basics of spacing, and how to effectively use white space. This video will provide you with the knowledge you need to create a harmonious and visually appealing user interface. Don't miss out o...
Zeplin + Figma | Is this the dream team?
zhlédnutí 4,6KPřed 2 měsíci
Join us as we dive into the world of design delivery, exploring the differences and benefits of two major tools: Figma Dev mode and Zeplin Figma. We'll discuss collaboration, process creation, and the idea of a single source of truth. You'll learn how to use Figma and Zeplin together to optimize your workflow and unite your team. We'll also help you determine which toolset is right for your spe...
Learn Bubble.io in 30 Minutes
zhlédnutí 20KPřed 2 měsíci
Let me guide you through the basics of Bubble.io a powerful platform for building web applications without coding. Learn how to create stunning layouts, implement CRUD functionality, and integrate plugins for community and payment features. Whether you're a beginner or an experienced developer, this video will provide you with valuable insights and practical tips to help you build your own app ...
Framer Crash Course
zhlédnutí 23KPřed 2 měsíci
In this tutorial, we'll cover the basics of using Framer, a powerful tool for designing and building websites without coding. We'll start by setting up site styles, then move on to building a landing page from scratch. You'll learn how to create dynamic components and make your website responsive for all devices. We'll also dive into the exciting world of animations, showing you how to bring yo...
Multiple Revenue Streams for Creatives w/John D. Saunders
zhlédnutí 1,3KPřed 2 měsíci
In this CZcams video, John D Saunders discusses multiple revenue streams for creatives. He explores various strategies and methods to generate income outside of traditional avenues. From affiliate marketing to freelance work, John shares valuable insights and tips to help creatives diversify their revenue streams and maximize their earning potential. ... Remember to Subscribe goo.gl/6vCw64 🤝 //...
Amateur vs Pro UI Design | with examples
zhlédnutí 36KPřed 3 měsíci
In this video, we explore what separates top-tier UI design that attracts clients and lucrative positions from junior-level designs that struggle to gain traction. We'll examine a range of UI design samples, crafted by both novices and professionals, to guide you on your journey towards becoming a first-rate designer. From login & signup interfaces to dashboards and web apps, join us as we delv...
The top 5 Framer features that you should know
zhlédnutí 24KPřed 3 měsíci
The top 5 Framer features that you should know
How to Master Figma and Design 10X FASTER!
zhlédnutí 30KPřed 3 měsíci
How to Master Figma and Design 10X FASTER!
Raising your Rates & Getting Better Clients w/John D. Saunders
zhlédnutí 830Před 3 měsíci
Raising your Rates & Getting Better Clients w/John D. Saunders
Figma Dev Mode 🤯
zhlédnutí 38KPřed 3 měsíci
Figma Dev Mode 🤯
From Full-time to Freelance w/John D. Saunders
zhlédnutí 1,6KPřed 3 měsíci
From Full-time to Freelance w/John D. Saunders
This is The Future of Design | Dan Mall
zhlédnutí 2KPřed 4 měsíci
This is The Future of Design | Dan Mall
AI tools for UI Designers 🛠
zhlédnutí 83KPřed 4 měsíci
AI tools for UI Designers 🛠
Why You're Actually Afraid of Design Systems with Dan Mall
zhlédnutí 1,6KPřed 4 měsíci
Why You're Actually Afraid of Design Systems with Dan Mall
Building a Design System w/Dan Mall
zhlédnutí 2,7KPřed 4 měsíci
Building a Design System w/Dan Mall
Do We Need a Design System? Dan Mall
zhlédnutí 4,8KPřed 4 měsíci
Do We Need a Design System? Dan Mall
Web & UI Design Trends for 2024
zhlédnutí 81KPřed 5 měsíci
Web & UI Design Trends for 2024
Color Theory in UI Design
zhlédnutí 15KPřed 5 měsíci
Color Theory in UI Design
Building Responsive UI Components in Figma
zhlédnutí 29KPřed 5 měsíci
Building Responsive UI Components in Figma
Feedback and Bug Reports with Jam
zhlédnutí 1,1KPřed 5 měsíci
Feedback and Bug Reports with Jam
SALES | The most important skill that most designers don't have
zhlédnutí 2,2KPřed 5 měsíci
SALES | The most important skill that most designers don't have
Sitemaps for Websites with Octopus.do
zhlédnutí 8KPřed 6 měsíci
Sitemaps for Websites with Octopus.do
Relume AI Website Builder | $3,000 an hour
zhlédnutí 338KPřed 7 měsíci
Relume AI Website Builder | $3,000 an hour
Build a Landing Page without Code | Wix Studio for Beginners
zhlédnutí 14KPřed 7 měsíci
Build a Landing Page without Code | Wix Studio for Beginners
Build a Six-Figure Freelance Business | Steal My Process
zhlédnutí 7KPřed 7 měsíci
Build a Six-Figure Freelance Business | Steal My Process

Komentáře

  • @maskedvillainai
    @maskedvillainai Před 2 hodinami

    You just have an opinion on how to make money as an entrepreneur. None of anything in this video remotely related to the evolution or challenges we face in making experiences for customers [ANY BRAND OR PRODUCT HIRING US TO DO SO]. Redefining human behavior is the answer. Data is more important than ever to understand. The tech. Not the pixels. Understanding ML, not Ai. Knowing how to read code, not to avoid it via “no code”. This is what matters now.

  • @maskedvillainai
    @maskedvillainai Před 2 hodinami

    It’s not about that sorry. Real design knows how to do one thing above all: reduction of humanity via synthetic humanity. It’s what we want after all.

  • @NguyenNguyen-nw1nf
    @NguyenNguyen-nw1nf Před 3 hodinami

    thanks

  • @sabunwala915
    @sabunwala915 Před 4 hodinami

    Thank you buddy. U r way too good. God bless. May u rise, shine and smile for ever. Have a good, healthy and a content fulll life. Hemant. India. Delhi.

  • @Silvercp28
    @Silvercp28 Před 8 hodinami

    You and about 330,000 will not make $3,000 or $5,000 an hour. Please, reason why he is on CZcams himself 😂

  • @moazelsawaf2000
    @moazelsawaf2000 Před dnem

    Thank you so much ❤

  • @barrybadr1nath557
    @barrybadr1nath557 Před dnem

    Are you using the free version or one with the payment option? With the free plan, you cannot keep up with everything you’re teaching.

    • @JesseShowalter
      @JesseShowalter Před dnem

      You should be able to do most things with a free plan as with a paid plan

  • @ThuanSuBa
    @ThuanSuBa Před dnem

    Really cool video, hope I can find it sooner!! __ Summary by AskTube Chrome extension (BETA) The 60 30 10 Rule: A Guideline for Balanced Color Use in Mobile UI Design. Learn how to use color effectively in your mobile UI design projects, creating a mature, seamless, and non-distracting user experience. This video explores the 60 30 10 rule, a guideline for balancing color usage in UI design, and provides examples of its application. Introduction to the 60 30 10 Rule 📊 00:00 The 60 30 10 rule is a guideline for using color in mobile UI design, ensuring a mature, seamless, and non-distracting user experience. Understand how to use color effectively in your UI design projects. Understanding the 60 30 10 Rule 📝 01:27 The 60 30 10 rule consists of three blocks of color: 60% neutral or base color, 30% primary or secondary color, and 10% call-to-action color. Applying the 60 30 10 Rule in UI Design 🎨 02:46 A design example demonstrates how the 60 30 10 rule can improve the color usage in a UI design, creating a more mature and seamless design. Real-World Examples of the 60 30 10 Rule 📈 03:52 Explore various examples of the 60 30 10 rule in action, showcasing different design approaches and color palettes. Breaking the Rule and Creating Beautiful Designs 🎯 04:32 Discover how designers can creatively break the 60 30 10 rule to create unique and visually appealing designs. Conclusion and Final Thoughts 🙏 05:55 Recap the importance of balanced color usage in mobile UI design and the relevance of the 60 30 10 rule in creating a seamless user experience.

  • @AE_804
    @AE_804 Před 2 dny

    Who watch this video in 2024 like👇

  • @blacklightentertainment758

    Naa bro your content is just amazing, it’s like you personally want the best for us❤

  • @3litepker
    @3litepker Před 3 dny

    Tried the first two so far and they suck. They're super superficial and basic designs even when you specify exactly what you want.

    • @JesseShowalter
      @JesseShowalter Před dnem

      It’s still rough but AO is getting better every day

  • @BrooksMorrow-gm8hj
    @BrooksMorrow-gm8hj Před 3 dny

    Thank you for creating the video - likes Unequivocally !!!!

  • @gabrielceslov3618
    @gabrielceslov3618 Před 4 dny

    So many steps just to build something so simple. I understand Flash was propriety software, but I could have done all this in Flash in less than half hour. Including the animation and music.

    • @JesseShowalter
      @JesseShowalter Před dnem

      Learning curves are hard, no platform will ever compete with the one you know

  • @sc2419
    @sc2419 Před 4 dny

    Only thing I hate about Framer, is the localization pricing ... outrageous!

  • @ashokseebaruth
    @ashokseebaruth Před 4 dny

    💯

  • @JosephDicdican
    @JosephDicdican Před 4 dny

    Kudos to this great content, it is straight to the point, easy to understand. And gives good practices specially on the CSS Flexbox. Totally agree on that! 🍻

  • @kishorekumar8216
    @kishorekumar8216 Před 5 dny

    thanks for providing a clear explanation of components jesse. lots of love from India ❤

  • @ysnerbdj
    @ysnerbdj Před 5 dny

    Why I don't have constrains

  • @user-gt7kb9kp3j
    @user-gt7kb9kp3j Před 5 dny

    Eisai ligo baklavas

  • @AJ-vy4yu
    @AJ-vy4yu Před 5 dny

    Nitpick: the intro song is too loud or your voice is too low volume. My ears went boom. But other than that great video😀

  • @white_men_sek4878
    @white_men_sek4878 Před 5 dny

    comming from designing UI/UX for games as a game designer, your videos provide good tips and tricks how to handle or watch for in general for UI/UX topics

  • @UnleashTheCharge
    @UnleashTheCharge Před 5 dny

    From which website every ui ux designer get their needed materials in best pixels

  • @Freddyfoxburg
    @Freddyfoxburg Před 5 dny

    May be this helps for your perfect font pairings : Cottorway pro with Open sans, Quinn display font with any sanserif.

  • @Aestheticdesignz
    @Aestheticdesignz Před 5 dny

    Is there any figma plug-in? Like figma to webflow!...?

  • @aouadicharaf1038
    @aouadicharaf1038 Před 6 dny

    ❤❤❤

  • @millidesignux
    @millidesignux Před 6 dny

    Thank you for such a great tutorial and for showing us how to create our own sections from scratch! Massively helpful for understanding how to make your designs responsive and I managed to follow along and complete everything myself 😊Only part I couldn't replicate was the 3D scroll at the end, when I entered 15 in the X area, I don't see a 3D effect on my image, it just scales up and down? But this was so so helpful though as a complete beginner and thank you very much again! 🙏🏼

    • @millidesignux
      @millidesignux Před 6 dny

      Also when I try to expand my nav bar on mobile/desktop versions, it appears as a scrollable container, not just part of the page, how can I fix this? Thanks! 🙏🏼

  • @SamiraSattarSimin
    @SamiraSattarSimin Před 7 dny

    thank you so much..this was really helpful. All this time my spacing was messed up

  • @lienchase2301
    @lienchase2301 Před 7 dny

    How to Penpot a website to Webflow? I am trying out Penpot until realizing it doesn't seem to be integrated with any other apps.

  • @daveo_123
    @daveo_123 Před 7 dny

    I’ve been doing some bubble dev and I wish I watched this before starting. As someone without web design experience I learned this as I went with a lot of rework. This was a great foundation

  • @Ocean_ofthoughts
    @Ocean_ofthoughts Před 7 dny

    Can we use this color rule in Reports, social media posts, or other places?

    • @JesseShowalter
      @JesseShowalter Před 7 dny

      Can be used as a general Rule of thumb in most places

  • @SenseiVraj
    @SenseiVraj Před 7 dny

    Nicely done work bro I loved it please make full video on it to understand full Framer.

    • @JesseShowalter
      @JesseShowalter Před 7 dny

      I’m doing a full 6 part live series soon, stay tuned

  • @mhe311324
    @mhe311324 Před 8 dny

    Does Superhuman take an existing email like outlook and integrate to respond etc. as it was still located in outlook.

  • @mimkaf7
    @mimkaf7 Před 8 dny

    The best explanation of auto layout I’ve seen in youtube👌🏼

  • @bane00147
    @bane00147 Před 9 dny

    hi good morning how can i use relume to copy an entire website and make some changes where i see fit ?

  • @anathomas6504
    @anathomas6504 Před 9 dny

    This man is forever hustling. I’m working towards gaining the confidence I need to be like him. He’s an inspiration to a long term unemployed, career switcher. ❤ his course is amazing btw guys.

  • @ekoflexofficial3903

    i like your video but i HATE your thumbnail. i just hate it. why do you need to do a crazy face to make people click? Your content is great you don't need to do this. look the face of the guy from framer university (ie: Framer Trick: Convert 2D Elements into Interactive 3D): just a normal and a honest face look. very sorry for the comment but you don't need this clickbait face. Thanks for your content anyway.

  • @PrasunOnYoutube
    @PrasunOnYoutube Před 9 dny

    Can you do a similar video of choosing ui colours for light and dark mode

  • @LWHITEBMG
    @LWHITEBMG Před 9 dny

    Hey Jesse! Please reply lol I would appreciate the clarity. I love your content, as a new UX designer I've improved tremendously since watching your videos. I have a question regarding Framer, can I design, build a website and transfer a website all within framer? Or do I have to use figma first then transfer it over to Webflow then Framer?

    • @JesseShowalter
      @JesseShowalter Před 7 dny

      Framer is a self contained platform. You can love from Figma to Framer or just design and develop straight in Framer

  • @jswanson859
    @jswanson859 Před 9 dny

    Good information. Thanks for sharing. I have a question and maybe an idea for a future video. Can you build a Framer site and then add code for payments or other functions that need very secure functions? I'm thinking of building a site in Framer and then passing it off to a developer for more of these high security options. I know I could also dig into the Framer site to find this out but since you amke such great videos, I'd love to see your thoughts and process. Thanks.

    • @JesseShowalter
      @JesseShowalter Před 7 dny

      Yes you can, you can insert custom code and create code components

    • @jswanson859
      @jswanson859 Před 4 dny

      @@JesseShowalter Fantastic! Thanks for responding.

  • @observer3359
    @observer3359 Před 9 dny

    Dude stop disappearing

  • @magicja
    @magicja Před 9 dny

    What is the path of least resistance? That is what I care about. Boxes, circles, trialngles....oh my!

  • @carlmccormick4499
    @carlmccormick4499 Před 9 dny

    Decent video fella nice one!

  • @BrahimBrahim-pw2te
    @BrahimBrahim-pw2te Před 9 dny

    boycott wix

  • @janinasaumer7695
    @janinasaumer7695 Před 9 dny

    Really great and helpful video :) Now it's easy to start prototyping!

  • @alstroemerialigtu
    @alstroemerialigtu Před 10 dny

    Great tutorial! Thanks :)

  • @asmahabib3504
    @asmahabib3504 Před 11 dny

    AI tools have transformed my design workflow, making it faster and more innovative. Exploring these top tools has significantly boosted my creativity and productivity. Highly recommend giving them a try! #jedaai #ai

  • @Dogvibes1868
    @Dogvibes1868 Před 12 dny

    such a great tutorial, really awesome content and education! the poor sound quality made it very difficult for me to keep watching however. The plosives are so rough I feel like my ears are pounding. Wish you could have edited the sound more.

  • @UriyahGonzalez
    @UriyahGonzalez Před 12 dny

    Everything is clear. Brief and clear. No water. Thank you)

  • @telagathotiveeraiah8805

    nice video jesse

  • @fahadkhalid4671
    @fahadkhalid4671 Před 13 dny

    😮