- 39
- 560 642
Darren Northcott - Figma, UX & UI
Приєднався 6 лют 2009
I am a UX director at a small marketing firm and I use Figma on the daily. So here I'm posting Figma stuff I've learned along the way.
I offer exclusive tutorials and content on my Patreon . Join me and let’s learn together!
I offer exclusive tutorials and content on my Patreon . Join me and let’s learn together!
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
#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
Teşekkür ederim. Aradığım çözümü sadece burada bulabildim. Harikasın!
Sir, can you put the video for this concept again? From scratch in this concept.
Thank you! Thank you! Thank you!
you made it very simple. thank you!!!
Itd be great if you could show how you got the search component...
thank you! 😍
wish i'd have seen this earlier T-T
Sorry sir, your voice's interrupting
to fix color change in instance swap You have to set the same layer names in icons
thanks man.. its very helpful, but don't use shortcut without explanation and display, ex shift + E
I think you forgot to mention that you set the "Clip content" for the frames with items.
2:19 if you've already designed a basic nav bar and are looking for guidance on the interactive work
God bless you! This idiots
Thanks Bro! you salve me 😛
Thank you. Thank you. Thank you. Such a great tutorial. I've been scratching my head about this for weeks.
Чувак, у тебя не голосовые связки, а две толстенные мясные котлеты!! Спасибо за видео
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?
THANK YOU!!! watched so many videos and couldn't get any of them to work
thank u so much!!! love your voice btw
Thank you😊
Can you created one from scratch? I want to follow along
Great video! Thank you so much
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!!!
Any idea if it's not a highlighted option
I really love your video, do you teach any courses?
Thank you
Exactly the funcionality I needed - thank you :)
I don't see that option fix position on constrains menu how can I see it
thanks! you've rescued my project:)
@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!
Amazing watching this at 2024 it was really helpful
❤❤❤❤❤ best tuto ever
You’re amazing bro 😎👏
thanks , its helped me a lot I was frustrated before .
just perfect, thank you
Loved this. So easy to follow. Thx a ton :)
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.
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?
would its suposte to change automatically by change the dimensions of the width in the frame? Jesus, what a useless video, thanks for nothing.
Even after fixing it it getting fixed to frame and not bottom of it.. Anyone know how ti fix it?
Such a helpful no-frills video. Thank you for sharing!
Great content!
"Fix positon when scrolling" is not there in my work space
you must go to the "prototype" section, select "position” and put "Fixed (stay in place)"
Thank you so much man
this is awesome! Thank you for the content. Would love an update for 2024 since some of these features are missing now
Thank you, this was superb info
Another drag (not scroll) parallax effect video.
Hey, i did this and worked but now the screen doesnt scroll down to the bottom
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!
Invalid names but why????