Darren Northcott - Figma, UX & UI
Darren Northcott - Figma, UX & UI
  • 39
  • 560 642
Create A Fully Working PIN Screen Using Variables - Figma Tutorial 2023
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
Переглядів: 2 407

Відео

Make A Full Width Responsive Grid That Fills The Container: Figma Tutorial 2023
Переглядів 2 тис.Рік тому
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 : ua-cam.com/channels/QEhFXU03U2StqK6c-lFNew.html 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 #...
Make a quiz using variables in Figma - Config 2023
Переглядів 10 тис.Рік тому
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 : ua-cam.com/channels/QEhFXU03U2StqK6c-lFNew.html 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 #p...
Figma Intro To Variables - Config 2023 Update
Переглядів 8 тис.Рік тому
In this tutorial we walk through how to start using variables in Figma! Subscribe : ua-cam.com/channels/QEhFXU03U2StqK6c-lFNew.html 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 #fig...
Interactive Fixed/Sticky Header On Scroll: Figma Tutorial For Beginners 2023
Переглядів 7 тис.Рік тому
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 : ua-cam.com/channels/QEhFXU03U2StqK6c-lFNew.html 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,1 тис.Рік тому
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 : ua-cam.com/channels/QEhFXU03U2StqK6c-lFNew.html Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Download Figma: bit.ly/41F6yaS #uid...
Advanced Auto Layout Techniques - Figma Tutorial For Beginners And Pros
Переглядів 4,3 тис.Рік тому
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 : ua-cam.com/channels/QEhFXU03U2StqK6c-lFNew.html Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Download Figma: bit.l...
Stacking Fixed AND Sticky Headers - Figma Tutorial
Переглядів 7 тис.Рік тому
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 : ua-cam.com/channels/QEhFXU03U2StqK6c-lFNew.html Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Download Figma: bit.ly/41F6yaS #figmatutorial Fig...
14 Fancy Toggles For Figma - UI File Download
Переглядів 235Рік тому
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 : ua-cam.com/channels/QEhFXU03U2StqK6c-lFNew.html Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Download Figma: bit.ly/41F6yaS #figma #figmatutorial #download #ui #u...
Figma Update: Component State Management - May 2023
Переглядів 4,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 : ua-cam.com/channels/QEhFXU03U2StqK6c-lFNew.html Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Download Figma: bit.ly/41F6yaS #figma #...
Dynamic Profile Badge - Figma Tutorial / Hack Using Variables
Переглядів 938Рік тому
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 : ua-cam.com/channels/QEhFXU03U2StqK6c-lFNew.html Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Download Figma: bit.ly/41F6yaS #figm #figmatutorial ...
User Flows 101 - UX Basics for Beginners or Professionals
Переглядів 933Рік тому
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 : ua-cam.com/channels/QEhFXU03U2StqK6c-lFNew.html 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
Переглядів 3,5 тис.Рік тому
In this quick tutorial we animate a MailChimp style popout button that raises up on hover using autolayout, smart animate and layers. Subscribe : ua-cam.com/channels/QEhFXU03U2StqK6c-lFNew.html 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
Переглядів 13 тис.Рік тому
In this tutorial we use Figma to create an infinite scrolling carousel using a couple prototyping hacks and auto layout. Subscribe : ua-cam.com/channels/QEhFXU03U2StqK6c-lFNew.html Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Download Figma: bit.ly/41F6yaS #figma #figmatutorial #tutorial #carousel #ux ui #design #figmahack #mobile
Figma Update: Where did FIX POSITION go?? - Quick Tip
Переглядів 34 тис.Рік тому
If you're wondering where the Fix Position feature went after the latest update, I've got you covered! Subscribe : ua-cam.com/channels/QEhFXU03U2StqK6c-lFNew.html Patreon: www.patreon.com/DarrenNorthcott Sign Up for Updates, Tips & Tricks : northcott.substack.com/ Download Figma: bit.ly/41F6yaS #figma #figmatips #ux #ui #design #figmaupdate #figmatutorial
Multi-Select Dropdown With Tags - Figma Tutorial 2023
Переглядів 5 тис.Рік тому
Multi-Select Dropdown With Tags - Figma Tutorial 2023
Create An Animated Mask In Figma: 2023 Tutorial
Переглядів 3,6 тис.Рік тому
Create An Animated Mask In Figma: 2023 Tutorial
Create A Sticky Sidebar On Scroll: Figma 2023 Tutorial
Переглядів 23 тис.Рік тому
Create A Sticky Sidebar On Scroll: Figma 2023 Tutorial
Sticky Header on Scroll! Figma Update 2023
Переглядів 51 тис.Рік тому
Sticky Header on Scroll! Figma Update 2023
Advanced Interactive Accordion Component: Figma 2023 Tutorial
Переглядів 4,1 тис.Рік тому
Advanced Interactive Accordion Component: Figma 2023 Tutorial
Animated Product Tile In Figma! (2023 UI Tutorial)
Переглядів 2 тис.Рік тому
Animated Product Tile In Figma! (2023 UI Tutorial)
Create A Parallax Animation Based On Mouse Position (on hover): Figma Tutorial
Переглядів 6 тис.Рік тому
Create A Parallax Animation Based On Mouse Position (on hover): Figma Tutorial
Create An Interactive Search Bar & Button: Figma Tutorial
Переглядів 56 тис.Рік тому
Create An Interactive Search Bar & Button: Figma Tutorial
Create A Dynamic 3D Text Component with Variables - Figma Tutorial
Переглядів 4,5 тис.Рік тому
Create A Dynamic 3D Text Component with Variables - Figma Tutorial
Create A Fixed / Sticky Bottom Nav Bar That Animates Between Screens - Figma Tutorial
Переглядів 110 тис.Рік тому
Create A Fixed / Sticky Bottom Nav Bar That Animates Between Screens - Figma Tutorial
Create An Animated Component That Follows The Cursor - Figma Tutorial
Переглядів 8 тис.Рік тому
Create An Animated Component That Follows The Cursor - Figma Tutorial
Create An Animated Mesh Gradient INSIDE Text - Figma Tutorial
Переглядів 5 тис.Рік тому
Create An Animated Mesh Gradient INSIDE Text - Figma Tutorial
Getting Started With Auto Layout in Figma - Beginner Tutorial
Переглядів 613Рік тому
Getting Started With Auto Layout in Figma - Beginner Tutorial
Create an Animated Toggle Switch in Figma - Beginner Tutorial
Переглядів 761Рік тому
Create an Animated Toggle Switch in Figma - Beginner Tutorial
Create A Scalable Timeline Component Using Auto Layout - Figma Tutorial
Переглядів 6 тис.Рік тому
Create A Scalable Timeline Component Using Auto Layout - Figma Tutorial

КОМЕНТАРІ

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

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

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

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

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

    Thank you! Thank you! Thank you!

  • @elaro.9
    @elaro.9 11 днів тому

    you made it very simple. thank you!!!

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

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

  • @elaro.9
    @elaro.9 11 днів тому

    thank you! 😍

  • @floea925
    @floea925 13 днів тому

    wish i'd have seen this earlier T-T

  • @RahaPlus
    @RahaPlus 16 днів тому

    Sorry sir, your voice's interrupting

  • @jakubbulanda5735
    @jakubbulanda5735 18 днів тому

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

  • @edrianhadinata1303
    @edrianhadinata1303 23 дні тому

    thanks man.. its very helpful, but don't use shortcut without explanation and display, ex shift + E

  • @tomashudolin7197
    @tomashudolin7197 Місяць тому

    I think you forgot to mention that you set the "Clip content" for the frames with items.

  • @herzetty
    @herzetty Місяць тому

    2:19 if you've already designed a basic nav bar and are looking for guidance on the interactive work

  • @sarathewhiteowl
    @sarathewhiteowl Місяць тому

    God bless you! This idiots

  • @raidi9568
    @raidi9568 Місяць тому

    Thanks Bro! you salve me 😛

  • @2rockintwins
    @2rockintwins Місяць тому

    Thank you. Thank you. Thank you. Such a great tutorial. I've been scratching my head about this for weeks.

  • @user-it5qj9bh5f
    @user-it5qj9bh5f Місяць тому

    Чувак, у тебя не голосовые связки, а две толстенные мясные котлеты!! Спасибо за видео

  • @DeekshithSuresh-eo4oe
    @DeekshithSuresh-eo4oe Місяць тому

    that absolute position button is responsive to the 'Hillside home' autolayout frame screen? suppose if page is resposive, absolute position button will be responsive too?

  • @esterterblanche1351
    @esterterblanche1351 Місяць тому

    THANK YOU!!! watched so many videos and couldn't get any of them to work

  • @emibian
    @emibian Місяць тому

    thank u so much!!! love your voice btw

  • @sedhulakshmisaneesh2638
    @sedhulakshmisaneesh2638 Місяць тому

    Thank you😊

  • @myriamcerqueira3997
    @myriamcerqueira3997 Місяць тому

    Can you created one from scratch? I want to follow along

  • @elysianclub_de
    @elysianclub_de Місяць тому

    Great video! Thank you so much

  • @melissasamaniego5801
    @melissasamaniego5801 Місяць тому

    Stopped using figma for a while and now need it in my job so bingewatching lots of tutorials! Thanks so much for this tutorial -- super clear and informative! Hope you post more tutorials down the line!!!

  • @ericbarajas7442
    @ericbarajas7442 Місяць тому

    Any idea if it's not a highlighted option

  • @user-qh8ko6ch2j
    @user-qh8ko6ch2j 2 місяці тому

    I really love your video, do you teach any courses?

  • @igualdad5505
    @igualdad5505 2 місяці тому

    Thank you

  • @The_Jaganath
    @The_Jaganath 2 місяці тому

    Exactly the funcionality I needed - thank you :)

  • @alevel79
    @alevel79 2 місяці тому

    I don't see that option fix position on constrains menu how can I see it

  • @andreybershak437
    @andreybershak437 2 місяці тому

    thanks! you've rescued my project:)

  • @adamw9394
    @adamw9394 2 місяці тому

    @DarrenNorthcott quick question! Can you now convert this final animated button into actual html and css button that can run in a web page? I am new to Figma :) Thank you!

  • @Sportlovers18
    @Sportlovers18 2 місяці тому

    Amazing watching this at 2024 it was really helpful

  • @mehdi2368
    @mehdi2368 2 місяці тому

    ❤❤❤❤❤ best tuto ever

  • @bayoibiyemi5268
    @bayoibiyemi5268 2 місяці тому

    You’re amazing bro 😎👏

  • @susmitanag9782
    @susmitanag9782 2 місяці тому

    thanks , its helped me a lot I was frustrated before .

  • @sylestra
    @sylestra 2 місяці тому

    just perfect, thank you

  • @khushrav22
    @khushrav22 2 місяці тому

    Loved this. So easy to follow. Thx a ton :)

  • @richardsilcock7791
    @richardsilcock7791 2 місяці тому

    I just happen to come across this and legit never knew about canvas stacking settings... Crazy that it's not 'First on top' is not defaulted... Thanks for the video, it just saved me so much trouble.

  • @lessqqmorepewpew7843
    @lessqqmorepewpew7843 2 місяці тому

    good tutorial, thinking about it though - did you even need to create the open and closed state initally if your accordian stack did it anyway?

  • @humbertoventura1344
    @humbertoventura1344 3 місяці тому

    would its suposte to change automatically by change the dimensions of the width in the frame? Jesus, what a useless video, thanks for nothing.

  • @asteria-ie3yg
    @asteria-ie3yg 3 місяці тому

    Even after fixing it it getting fixed to frame and not bottom of it.. Anyone know how ti fix it?

  • @paulochikoti-bandua5119
    @paulochikoti-bandua5119 3 місяці тому

    Such a helpful no-frills video. Thank you for sharing!

  • @andres1814ap
    @andres1814ap 3 місяці тому

    Great content!

  • @Akr9836
    @Akr9836 3 місяці тому

    "Fix positon when scrolling" is not there in my work space

    • @tamilakovalenko9661
      @tamilakovalenko9661 2 місяці тому

      you must go to the "prototype" section, select "position” and put "Fixed (stay in place)"

  • @prickeshlanth3334
    @prickeshlanth3334 3 місяці тому

    Thank you so much man

  • @Chiron952
    @Chiron952 3 місяці тому

    this is awesome! Thank you for the content. Would love an update for 2024 since some of these features are missing now

  • @olcaystabel9961
    @olcaystabel9961 3 місяці тому

    Thank you, this was superb info

  • @ekyas
    @ekyas 3 місяці тому

    Another drag (not scroll) parallax effect video.

  • @saralopes-tq3cj
    @saralopes-tq3cj 3 місяці тому

    Hey, i did this and worked but now the screen doesnt scroll down to the bottom

  • @josh_ux
    @josh_ux 3 місяці тому

    Thank you so much for making this tutorial! I was dying trying to figure out how to make this work with auto layout. Thanks again!

  • @chloebarneveld2386
    @chloebarneveld2386 3 місяці тому

    Invalid names but why????