Darren Northcott - Figma, UX & UI
Darren Northcott - Figma, UX & UI
  • Видео 39
  • Просмотров 485 602
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
Просмотров: 1 848

Видео

Make A Full Width Responsive Grid That Fills The Container: Figma Tutorial 2023
Просмотров 1,7 тыс.9 месяцев назад
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
Просмотров 8 тыс.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 : 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 тыс.10 месяцев назад
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
Просмотров 6 тыс.11 месяцев назад
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
Просмотров 1,7 тыс.11 месяцев назад
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
Просмотров 3,3 тыс.11 месяцев назад
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
Просмотров 5 тыс.11 месяцев назад
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
Просмотров 21311 месяцев назад
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
Просмотров 3,8 тыс.11 месяцев назад
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
Просмотров 80411 месяцев назад
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
Просмотров 872Год назад
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
Просмотров 2,8 тыс.Год назад
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
Просмотров 10 тыс.Год назад
In this tutorial we use Figma to create an infinite scrolling carousel using a couple prototyping hacks and auto layout. 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 #tutorial #carousel #ux ui #design #figmahack #mobile
Figma Update: Where did FIX POSITION go?? - Quick Tip
Просмотров 30 тыс.Год назад
If you're wondering where the Fix Position feature went after the latest update, I've got you covered! 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 #figmatips #ux #ui #design #figmaupdate #figmatutorial
Multi-Select Dropdown With Tags - Figma Tutorial 2023
Просмотров 4,6 тыс.Год назад
Multi-Select Dropdown With Tags - Figma Tutorial 2023
Create An Animated Mask In Figma: 2023 Tutorial
Просмотров 3 тыс.Год назад
Create An Animated Mask In Figma: 2023 Tutorial
Create A Sticky Sidebar On Scroll: Figma 2023 Tutorial
Просмотров 20 тыс.Год назад
Create A Sticky Sidebar On Scroll: Figma 2023 Tutorial
Sticky Header on Scroll! Figma Update 2023
Просмотров 47 тыс.Год назад
Sticky Header on Scroll! Figma Update 2023
Advanced Interactive Accordion Component: Figma 2023 Tutorial
Просмотров 3,3 тыс.Год назад
Advanced Interactive Accordion Component: Figma 2023 Tutorial
Animated Product Tile In Figma! (2023 UI Tutorial)
Просмотров 1,7 тыс.Год назад
Animated Product Tile In Figma! (2023 UI Tutorial)
Create A Parallax Animation Based On Mouse Position (on hover): Figma Tutorial
Просмотров 5 тыс.Год назад
Create A Parallax Animation Based On Mouse Position (on hover): Figma Tutorial
Create An Interactive Search Bar & Button: Figma Tutorial
Просмотров 44 тыс.Год назад
Create An Interactive Search Bar & Button: Figma Tutorial
Create A Dynamic 3D Text Component with Variables - Figma Tutorial
Просмотров 3,7 тыс.Год назад
Create A Dynamic 3D Text Component with Variables - Figma Tutorial
Create A Fixed / Sticky Bottom Nav Bar That Animates Between Screens - Figma Tutorial
Просмотров 92 тыс.Год назад
Create A Fixed / Sticky Bottom Nav Bar That Animates Between Screens - Figma Tutorial
Create An Animated Component That Follows The Cursor - Figma Tutorial
Просмотров 7 тыс.Год назад
Create An Animated Component That Follows The Cursor - Figma Tutorial
Create An Animated Mesh Gradient INSIDE Text - Figma Tutorial
Просмотров 4,5 тыс.Год назад
Create An Animated Mesh Gradient INSIDE Text - Figma Tutorial
Getting Started With Auto Layout in Figma - Beginner Tutorial
Просмотров 567Год назад
Getting Started With Auto Layout in Figma - Beginner Tutorial
Create an Animated Toggle Switch in Figma - Beginner Tutorial
Просмотров 678Год назад
Create an Animated Toggle Switch in Figma - Beginner Tutorial
Create A Scalable Timeline Component Using Auto Layout - Figma Tutorial
Просмотров 4,9 тыс.Год назад
Create A Scalable Timeline Component Using Auto Layout - Figma Tutorial

Комментарии

  • @Sportlovers18
    @Sportlovers18 2 дня назад

    Amazing watching this at 2024 it was really helpful

  • @mehdi2368
    @mehdi2368 2 дня назад

    ❤❤❤❤❤ best tuto ever

  • @bayoibiyemi5268
    @bayoibiyemi5268 9 дней назад

    You’re amazing bro 😎👏

  • @susmitanag9782
    @susmitanag9782 10 дней назад

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

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

    just perfect, thank you

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

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

  • @richardsilcock7791
    @richardsilcock7791 17 дней назад

    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 17 дней назад

    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 21 день назад

    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 21 день назад

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

  • @paulochikoti-bandua5119
    @paulochikoti-bandua5119 23 дня назад

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

  • @andres1814ap
    @andres1814ap 23 дня назад

    Great content!

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

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

  • @prickeshlanth3334
    @prickeshlanth3334 26 дней назад

    Thank you so much man

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

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

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

    Thank you, this was superb info

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

    Another drag (not scroll) parallax effect video.

  • @saralopes-tq3cj
    @saralopes-tq3cj Месяц назад

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

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

    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 Месяц назад

    Invalid names but why????

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

    Help Darren I don’t get the idea 1:52 how did you do the whole varieynt or what ever component thing HELP

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

    Please just explain how you made the component voor the beer 1:11

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

    Again asking to explain more !!!!

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

    PLEASE post the template ive been looking for this exact layout for days please

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

    honestly trying to follow this and i feel like am going insane

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

    please please post the project file ! i have a deadline next week!!!!!!

    • @user-xy6pd5eg8f
      @user-xy6pd5eg8f 22 дня назад

      DID U FINALLY UNDERSTAND IT? I ALSO HAVE A DUE AND THIS IS ALSO WHAT I NEEDED HUHU

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

    Muchas gracias. Me has salvado :´333333

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

    Great tutorial!!

  • @tati-magic.design
    @tati-magic.design Месяц назад

    Darren your info is really helpful. I watch the Figma official videos that was so out of the topic! Thank you!

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

    greate one

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

    worst tutorial ever 😢😭 not for beginners or noobs

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

    How do i reuse the accordion stack to create an accordion of 5 items

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

    bro types like an 80s secretary mauling the keys

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

    perfect!

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

    My design skills have come a long way from watching your videos. Thanks and I can't wait for more!

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

    bro you need a throat lozenges ? btw best tutorial

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

    can u talk louder next time its super quiet and my volume is all the way

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

    This does not work. Thanks for waisting my time.

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

    Thx!

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

    Thank you sooooo much!!! I was very tired finding a solution to make this example for the content of a dashboard and the fact is that i much prefer auto-layout (i am developer and i use flexbox css and a single frame doesn't cover what i needed... figma should think more in the workflow of CSS less than compare to other existing products... and also web designers should be familiarized with css like you, as i think...) It´s so disgusting only to find examples using simple frames that doesn't change their width when using variants of, in my case the sidebar collapsing-expanding As you say, without auto-layout is easier. But if you know about CSS rules, you will find-out that when you change to position absolute the menu it's the same that in CSS... So, the problem is not so much about how difficult it is to do things with autolayout, but rather about knowing CSS. THANK YOU DARREN

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

    This is more of a dropdown than it is an accordion.

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

    This is why I pay for the internet. Straight to the point. Thanks man big help❤

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

    Going too fast, don't have the time to see where your mouse went that you're already clicking somewhere else

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

    thanks very much

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

    very clear and to the point, THANK YOU!!!

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

    It'll be nice to show all the conditionals tabs so we don't have to assume (for beginners) but good video bro

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

    When I fix one background image it come over the other content as fixed group is above scroll

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

    On point! Helped me a lot, thank you!

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

    thank you!

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

    Great concept, but so poorly explained.

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

      Did it work totally fine for you? Everything's working fine for me but the 'change to' option to make sure the code1Entered switches to 'true' doesn't work, so when I type another number it only changes the #NumberEntered on the #code1, did you make it work?