Darren Northcott - Figma, UX & UI
Darren Northcott - Figma, UX & UI
  • Видео 41
  • Просмотров 695 010

Видео

Create A Fixed Bottom Nav Bar / Expanding Menu That Animates Between Screens - Figma Tutorial 2024
Просмотров 39728 дней назад
Howdy! In this #tutorial I've updated the sticky bottom nav to include the expanded menu as well as accounting for #figma #ui 3 layout and positioning. It's a bit longer because I cover some crazy buggy behaviour figma has around #animating static elements. But in it we create a sticky bottom navigation bar that animates between screens AND include the animated slide out menu that works no matt...
Create A Fully Working PIN Screen Using Variables - Figma Tutorial 2023
Просмотров 3,5 тыс.Год назад
In this tutorial we will create a fully working PIN screen that uses the numbers you enter and tests for errors and success using Figma variables. #figmatutorial #variables #ux #ui #uxdesign #figma #figmavariables #fintech
Make A Full Width Responsive Grid That Fills The Container: Figma Tutorial 2023
Просмотров 2,7 тыс.Год назад
In this tutorial we make a responsive grid that fills the container when there is only a single item on a row using auto layout wrap and minimum width. Subscribe : ruclips.net/channel/UCQEhFXU03U2StqK6c-lFNew Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Try Figma for Free: bit.ly/41F6yaS #figmatutorial @autolayout #minwidth #tutorial #ux ...
Make a quiz using variables in Figma - Config 2023
Просмотров 13 тыс.Год назад
In this tutorial we will go through how to use the new variables feature in Figma to make a fully functioning quiz, in only 4 screens! Subscribe : ruclips.net/channel/UCQEhFXU03U2StqK6c-lFNew Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Try Figma for Free: bit.ly/41F6yaS #figma #figmatutorial #config2023 #variables #ux #ui #uidesign #prod...
Figma Intro To Variables - Config 2023 Update
Просмотров 8 тыс.Год назад
In this tutorial we walk through how to start using variables in Figma! Subscribe : ruclips.net/channel/UCQEhFXU03U2StqK6c-lFNew Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Try Figma for Free: bit.ly/41F6yaS Figma file available to Patrons: www.patreon.com/posts/introduction-to-85004214?Link& #config2023 #ux #ui #design #uxdesign #figmau...
Interactive Fixed/Sticky Header On Scroll: Figma Tutorial For Beginners 2023
Просмотров 9 тыс.Год назад
In this short tutorial we go over how create a header that sticks to the top on scroll, but is also interactive and expands. Subscribe : ruclips.net/channel/UCQEhFXU03U2StqK6c-lFNew Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Try Figma for Free: bit.ly/41F6yaS #ui #ux #figma #figmatutorial #productdesign #uxdesign #uidesign #prototyping
The Importance of Whitespace in UI & UX Design
Просмотров 2,9 тыс.Год назад
In this video we will talk about the importance of proper whitespace in UI design and touch on a couple of standard spacing options to see how they can improve a design for readability and usability. Subscribe : ruclips.net/channel/UCQEhFXU03U2StqK6c-lFNew Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Download Figma: bit.ly/41F6yaS #uidesi...
Advanced Auto Layout Techniques - Figma Tutorial For Beginners And Pros
Просмотров 6 тыс.Год назад
In this Figma tutorial we look at how you can wrap your content in nested auto layout containers, play with sizing, orientation, negative spacing and more to make your designs more fluid, consistent and organized. Subscribe : ruclips.net/channel/UCQEhFXU03U2StqK6c-lFNew Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Download Figma: bit.ly/4...
Stacking Fixed AND Sticky Headers - Figma Tutorial
Просмотров 9 тыс.Год назад
In this quick tutorial we go over how to stack a sticky header under a fixed one, like browser chrome, or any other persistent element using autolayout and sticky on scroll positioning. Subscribe : ruclips.net/channel/UCQEhFXU03U2StqK6c-lFNew Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Download Figma: bit.ly/41F6yaS #figmatutorial Figma ...
14 Fancy Toggles For Figma - UI File Download
Просмотров 254Год назад
I put together 14 unique and fully animated toggles you can grab off gumroad from only $5, Patreon members get it included! Get it Now: northcott.gumroad.com/l/vxcec Subscribe : ruclips.net/channel/UCQEhFXU03U2StqK6c-lFNew Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Download Figma: bit.ly/41F6yaS #figma #figmatutorial #download #ui #ux #...
Figma Update: Component State Management - May 2023
Просмотров 6 тыс.Год назад
In this tutorial I will show you to use the new Component State Management feature from Figma to help maintain states across screens, as well as reset a component state between frames or screens. Subscribe : ruclips.net/channel/UCQEhFXU03U2StqK6c-lFNew Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Download Figma: bit.ly/41F6yaS #figma #fig...
Dynamic Profile Badge - Figma Tutorial / Hack Using Variables
Просмотров 1,1 тыс.Год назад
In this tutorial I show you a quick Figma hack to help you create better profile badge components that don't require editing a bunch of layers every time you want to change the name. Subscribe : ruclips.net/channel/UCQEhFXU03U2StqK6c-lFNew Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Download Figma: bit.ly/41F6yaS #figm #figmatutorial #fi...
User Flows 101 - UX Basics for Beginners or Professionals
Просмотров 1,1 тыс.Год назад
In this UX tips video, I talk about the basics of user flows, how they are helpful, how they are made, and what to use to make them. Subscribe : ruclips.net/channel/UCQEhFXU03U2StqK6c-lFNew Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Download Figma: bit.ly/41F6yaS #ux #userflows #tips #uxtips #tutorial #uxtutorial #figma #figjam
Make An Animated Popout Button - Figma 2023 Tutorial
Просмотров 4,6 тыс.Год назад
In this quick tutorial we animate a MailChimp style popout button that raises up on hover using autolayout, smart animate and layers. Subscribe : ruclips.net/channel/UCQEhFXU03U2StqK6c-lFNew Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Download Figma: bit.ly/41F6yaS #figmatutorial #figma #button #ux #ui #design #productdesign
Create An Infinite Scrolling Carousel: Figma Tutorial
Просмотров 18 тыс.Год назад
Create An Infinite Scrolling Carousel: Figma Tutorial
Figma Update: Where did FIX POSITION go?? - Quick Tip
Просмотров 43 тыс.Год назад
Figma Update: Where did FIX POSITION go?? - Quick Tip
Multi-Select Dropdown With Tags - Figma Tutorial 2023
Просмотров 7 тыс.Год назад
Multi-Select Dropdown With Tags - Figma Tutorial 2023
Create An Animated Mask In Figma: 2023 Tutorial
Просмотров 4,6 тыс.Год назад
Create An Animated Mask In Figma: 2023 Tutorial
Create A Sticky Sidebar On Scroll: Figma 2023 Tutorial
Просмотров 28 тыс.Год назад
Create A Sticky Sidebar On Scroll: Figma 2023 Tutorial
Sticky Header on Scroll! Figma Update 2023
Просмотров 58 тыс.Год назад
Sticky Header on Scroll! Figma Update 2023
Advanced Interactive Accordion Component: Figma 2023 Tutorial
Просмотров 5 тыс.Год назад
Advanced Interactive Accordion Component: Figma 2023 Tutorial
Animated Product Tile In Figma! (2023 UI Tutorial)
Просмотров 2,5 тыс.Год назад
Animated Product Tile In Figma! (2023 UI Tutorial)
Create A Parallax Animation Based On Mouse Position (on hover): Figma Tutorial
Просмотров 8 тыс.Год назад
Create A Parallax Animation Based On Mouse Position (on hover): Figma Tutorial
Create An Interactive Search Bar & Button: Figma Tutorial
Просмотров 79 тыс.Год назад
Create An Interactive Search Bar & Button: Figma Tutorial
Create A Dynamic 3D Text Component with Variables - Figma Tutorial
Просмотров 6 тыс.Год назад
Create A Dynamic 3D Text Component with Variables - Figma Tutorial
Create A Fixed / Sticky Bottom Nav Bar That Animates Between Screens - Figma Tutorial
Просмотров 141 тыс.Год назад
Create A Fixed / Sticky Bottom Nav Bar That Animates Between Screens - Figma Tutorial
Create An Animated Component That Follows The Cursor - Figma Tutorial
Просмотров 10 тыс.Год назад
Create An Animated Component That Follows The Cursor - Figma Tutorial
Create An Animated Mesh Gradient INSIDE Text - Figma Tutorial
Просмотров 6 тыс.Год назад
Create An Animated Mesh Gradient INSIDE Text - Figma Tutorial
Getting Started With Auto Layout in Figma - Beginner Tutorial
Просмотров 717Год назад
Getting Started With Auto Layout in Figma - Beginner Tutorial

Комментарии

  • @tonybologni94
    @tonybologni94 10 часов назад

    Do the 5 'search results 223' always populate when you click the icon? Sorry I'm new here. But how does this graphic actually search the rest of the site?

  • @caspianandthegoodtim
    @caspianandthegoodtim День назад

    thanks man - clear cut and informative!

  • @theacrossell
    @theacrossell 14 дней назад

    Did you do that expanding nav video?

  • @UiUxChic
    @UiUxChic 14 дней назад

    The best I’ve seen so far, but poorly explained. Can’t assume we will all have no difficulty following especially when you didn’t explain thoroughly or carry us through from scratch.

  • @mollymccarthy4651
    @mollymccarthy4651 19 дней назад

    Omggggggg thank you!!!!

  • @dariooliva2618
    @dariooliva2618 22 дня назад

    Can you share the file? I'm trying but doesnt work for me.

  • @draggod2785
    @draggod2785 25 дней назад

    for someone that just need make something is fixed or not just go to prototype and there is scrool behavior

  • @vuyellaharile554
    @vuyellaharile554 29 дней назад

    Very poor audio

  • @BilalLoumghari
    @BilalLoumghari Месяц назад

    And what about the expanding menu?

  • @sebs726
    @sebs726 Месяц назад

    Thank you!!! This helped so much, I've been searching for an hour. Really appreciate the mega quick how-to and not padding it out with vlogger BS for half an hour! :D

  • @moeranyc
    @moeranyc Месяц назад

    Homie sounds like homelander giving a Figma lesson!

  • @MuhammadZahraan-pb3zr
    @MuhammadZahraan-pb3zr Месяц назад

    Thanks bro 🎉

  • @PetrKanda
    @PetrKanda Месяц назад

    Nice one

  • @jakaverk7500
    @jakaverk7500 Месяц назад

    Awesome video. Helped me a lot

  • @JacksonRosenbaum
    @JacksonRosenbaum Месяц назад

    I spent so long trying to do this considering it was my first time finally completed it tried to export the carousel to replo and it didn’t work it broke my heart

  • @manuelesposito2521
    @manuelesposito2521 Месяц назад

    The question is can u do that with a conditional logic in prototype. You open one, the others collapse. There must be a smart way. Thank you.

  • @Stedes97
    @Stedes97 Месяц назад

    great video

  • @thatnokgirl
    @thatnokgirl Месяц назад

    there's no longer fix position when scrolling ☹

  • @MorganBurns-n9l
    @MorganBurns-n9l Месяц назад

    Is there any way to make it scroll upward after the that last section?

  • @kobusk95
    @kobusk95 Месяц назад

    Aside from the good tutorial, your voice is soothing to listen to. Thanks for soothing me whilst I stress for a hackathon trying to figure out how Figma works LOL

  • @DYERFF
    @DYERFF 2 месяца назад

    Your voice 🗿

  • @herr_pouya
    @herr_pouya 2 месяца назад

    Thanks

  • @kruzader
    @kruzader 2 месяца назад

    This was easy to create. Thank you. I'll like to see how you expanded this

  • @natalie7536
    @natalie7536 2 месяца назад

    incredibly helpful, thank you so much!

  • @chrisdpenha9515
    @chrisdpenha9515 2 месяца назад

    For all searching constraints ruclips.net/user/shortsH8TwXD7R_Go?si=3xIM2Uog6mBVgF10

  • @phill2
    @phill2 2 месяца назад

    5:26 Cant find Absolute Position 5:37 Cant find Fix Position when Scrolling Please advise?

  • @aliabdelhalim4304
    @aliabdelhalim4304 2 месяца назад

    when i made it it popped to right . How can i make the search bar pop to left ?

  • @pev5713
    @pev5713 2 месяца назад

    Just what I was looking for, thank you !!!!

  • @Elektoos
    @Elektoos 2 месяца назад

    Amaze! This update incentivized my sub. :)

  • @ChristophEckert
    @ChristophEckert 3 месяца назад

    yeah, I made it. Took me a while , because I'm a fucking retard, but woohooo. Thanks

  • @quantumgaming9034
    @quantumgaming9034 3 месяца назад

    couldent heat you properly. spit out whatever in your mouth.

  • @itrend_sa3668
    @itrend_sa3668 3 месяца назад

    Thank you bro

  • @scarlet7658
    @scarlet7658 3 месяца назад

    Thanks so much for the amazing tutorial, and your efforts! 👏

  • @Moritz040-k8j
    @Moritz040-k8j 3 месяца назад

    Hey, nice video! At minute 4:28 you added a line for which you were able to select fill container. This option doesn't appear on my screen.. I was thinking of okay if my mother frame is set to fixed instead of fill container maybe the line as well wouldn't be able to set to fill container. But as I saw on your screen it helped anyways.. How to solve this problem?

    • @zumra3515
      @zumra3515 3 месяца назад

      I have the same problem. My guess is it has to do with the recent updates. It needs to be done in another way now, so maybe try framing the line with the inner search header frame. I'll try that now at least

    • @zumra3515
      @zumra3515 3 месяца назад

      Okay I figured it out, Apparently, you need to frame the line first so that you can place it inside another frame. This rule is applicable for every object in figma i think. Something needs to be framed before connecting it to another frame wether it be a text, image or a shape

  • @NotRustyHere
    @NotRustyHere 3 месяца назад

    You sound sick :(

  • @breschio
    @breschio 3 месяца назад

    So fun. Nice work

  • @s7s_space
    @s7s_space 4 месяца назад

    need to talk more about design fundementals and make some projects real like mobile app or website page ? thanks for great efforts

  • @sinayagubi8805
    @sinayagubi8805 4 месяца назад

    That\s not sticky. that's fixed. if you could scroll past it if you went far enough down the page that would be sticky bottom

  • @rehanjamali5829
    @rehanjamali5829 4 месяца назад

    Yes that is what I have done, but the problem is when there is a navbar and its navItem have to scroll to a specific section of website after being clicked, then the sections comes under the navbar, where our Top padding wont work in Parent Frame Autolayout. What to do?

  • @wisdomquotaza
    @wisdomquotaza 4 месяца назад

    THANKS A LOT BROTHER, YOU HELPED ME A LOT

  • @vitorfaro
    @vitorfaro 4 месяца назад

    Would it be possible to show how it would look in a single dropdown with multiselect, tags and categories? In the example, it would be laundry and food in the same dropdown, but each categorized with their respective items.

  • @tugayungor9229
    @tugayungor9229 4 месяца назад

    Teşekkür ederim. Aradığım çözümü sadece burada bulabildim. Harikasın!

  • @Dhileep0382
    @Dhileep0382 4 месяца назад

    Sir, can you put the video for this concept again? From scratch in this concept.

  • @abitofbrit85
    @abitofbrit85 4 месяца назад

    Thank you! Thank you! Thank you!

  • @elaro.9
    @elaro.9 4 месяца назад

    you made it very simple. thank you!!!

  • @ABESW0RLD
    @ABESW0RLD 4 месяца назад

    Itd be great if you could show how you got the search component...

  • @elaro.9
    @elaro.9 4 месяца назад

    thank you! 😍

  • @floea925
    @floea925 5 месяцев назад

    wish i'd have seen this earlier T-T

  • @RahaPlus
    @RahaPlus 5 месяцев назад

    Sorry sir, your voice's interrupting

  • @jakubbulanda5735
    @jakubbulanda5735 5 месяцев назад

    to fix color change in instance swap You have to set the same layer names in icons