- Видео 41
- Просмотров 695 010
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!
Animated dark mode toggle switch in Figma
In this quick #figma #tutorial we make an animated toggle switch that controls your frames layer modes!
#figmatutorial #ui #ux #animation
#figmatutorial #ui #ux #animation
Просмотров: 241
Видео
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
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?
thanks man - clear cut and informative!
Did you do that expanding nav video?
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.
Omggggggg thank you!!!!
Can you share the file? I'm trying but doesnt work for me.
for someone that just need make something is fixed or not just go to prototype and there is scrool behavior
Very poor audio
And what about the expanding menu?
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
Homie sounds like homelander giving a Figma lesson!
Thanks bro 🎉
Nice one
Awesome video. Helped me a lot
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
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.
great video
there's no longer fix position when scrolling ☹
Is there any way to make it scroll upward after the that last section?
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
Your voice 🗿
Thanks
This was easy to create. Thank you. I'll like to see how you expanded this
incredibly helpful, thank you so much!
For all searching constraints ruclips.net/user/shortsH8TwXD7R_Go?si=3xIM2Uog6mBVgF10
5:26 Cant find Absolute Position 5:37 Cant find Fix Position when Scrolling Please advise?
go to prototype
under prototype chose position
when i made it it popped to right . How can i make the search bar pop to left ?
Just what I was looking for, thank you !!!!
Amaze! This update incentivized my sub. :)
yeah, I made it. Took me a while , because I'm a fucking retard, but woohooo. Thanks
couldent heat you properly. spit out whatever in your mouth.
Thank you bro
Thanks so much for the amazing tutorial, and your efforts! 👏
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?
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
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
You sound sick :(
So fun. Nice work
need to talk more about design fundementals and make some projects real like mobile app or website page ? thanks for great efforts
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
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?
THANKS A LOT BROTHER, YOU HELPED ME A LOT
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.
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