- 172
- 351 359
Nolan Perkins
United States
เข้าร่วมเมื่อ 17 ก.ค. 2020
Hey, I’m Nolan.
I’m a Product Designer who’s been working on startups, in-house products, and clients for over 12 years. Lately, I’ve been building in Public on my TikTok channel.
Thanks for hanging with us 😎
I’m a Product Designer who’s been working on startups, in-house products, and clients for over 12 years. Lately, I’ve been building in Public on my TikTok channel.
Thanks for hanging with us 😎
Making Micro Interactions is so fun | ADVANCED FIGMA PROTOTYPING & UI DESIGN TACTICS
Creating micro-interactions is one of those things that you always want to do, but never get to make it into the final designs. Micro interactions are often overlooked as too costly on time, but when the product IS the brand and the only interaction your users have, you have to push the boundaries when you can. Let's vent a little bit and build out some really cool animations and advanced prototypes in Figma!
As a ux designer, being good at creating demonstrations of your planned animations inside of Figma is a great skill to have. Generally, if you can do it in Figma you can push your devs to do it in code!
Follow along with me by downloading the Figma File: bit.ly/rad-yt-files
------
0:00 What we’re making
0:30 Retro Screensaver
12:55 Record Player
22:15 Stopping the Record with Variables
34:06 Advanced Settings Toggle
40:55 Design Spells
41:23 Screensaver Tweaks
------
Find me on socials:
_radnolanreels
tiktok.com/@radnolan
linkedin.com/in/nolanperk
Join the community: bit.ly/rad-makers
As a ux designer, being good at creating demonstrations of your planned animations inside of Figma is a great skill to have. Generally, if you can do it in Figma you can push your devs to do it in code!
Follow along with me by downloading the Figma File: bit.ly/rad-yt-files
------
0:00 What we’re making
0:30 Retro Screensaver
12:55 Record Player
22:15 Stopping the Record with Variables
34:06 Advanced Settings Toggle
40:55 Design Spells
41:23 Screensaver Tweaks
------
Find me on socials:
_radnolanreels
tiktok.com/@radnolan
linkedin.com/in/nolanperk
Join the community: bit.ly/rad-makers
มุมมอง: 2 490
วีดีโอ
Advanced Prototyping Tutorial in Figma Create a Working Keyboard (seriously)
มุมมอง 3.9K2 หลายเดือนก่อน
Some people rig up prototypes so their inputs fill upon click. But for the perfectionists like me, we're going to build a keyboard input inside of Figma! Follow along with me as we cover Variables, Prototyping logic, wrapped Auto Layout, and more. This is a super fun way to learn advanced prototyping so hope you enjoy! Get the Figma file to follow along: bit.ly/rad-yt-files What should I talk a...
How a UI/UX design influencer makes all their content inside Figma
มุมมอง 6K3 หลายเดือนก่อน
I now have over 525,000 followers across all of my socials. I pretty much only post video content and the only program I use to animate my videos is with Figma. Now where can YOU use this in your workflow? In presentation decks inside of Figma. This video covers the general workflow that I use to create my animations going from idea stage, through to graphic design of the visuals in my video, a...
Making developer's live's easier as a UX Designer #designtutorial #uiux #productdesign
มุมมอง 165K3 หลายเดือนก่อน
They don't teach this in design schools but in my opinion it's a huge disservice. You HAVE to be good at this to be an effective designer. As a ux designer, being good at prepping your design files for development takes you from an average designer to a great one. See, when you setup your files for development in the best way you can, they can develop faster. Them being faster will allow them t...
The most detailed UX Design guide for Tables you'll ever find #figmatutorial #uxdesign #uidesign
มุมมอง 4.1K3 หลายเดือนก่อน
Tables are harddddd to work with in Figma and even harder to design properly. The data in the tables you design needs to tell a story and guide users to action. In this video, I show you the approach I take when designing tables, processing data in a hierarchical way, and how to work with responsive. It's a big big topic so it's my longest video yet haha Make sure to save this for later when yo...
Introduction to Design Systems: Design Tokens #designtutorial #designsystems #productdesign
มุมมอง 3.5K3 หลายเดือนก่อน
Introduction to Design Systems: Design Tokens #designtutorial #designsystems #productdesign
Designing forms are hard if you don't follow this UX Design guide! #uiux #designtutorial #uxdesign
มุมมอง 2.7K3 หลายเดือนก่อน
Designing forms are hard if you don't follow this UX Design guide! #uiux #designtutorial #uxdesign
Making Games inside Figma ADVANCED FIGMA PROTOTYPING WITH VARIABLES #figmaprototype #figmatutorial
มุมมอง 2.3K3 หลายเดือนก่อน
Making Games inside Figma ADVANCED FIGMA PROTOTYPING WITH VARIABLES #figmaprototype #figmatutorial
Template help you design & build websites much faster! #webdesign #wixstudio #designtutorial
มุมมอง 1.3K3 หลายเดือนก่อน
Template help you design & build websites much faster! #webdesign #wixstudio #designtutorial
Google Maps UI Design Teardown THE BEST UX DESIGN FOR MANAGEMENT MODALS #uidesign #designtutorial
มุมมอง 2.6K3 หลายเดือนก่อน
Google Maps UI Design Teardown THE BEST UX DESIGN FOR MANAGEMENT MODALS #uidesign #designtutorial
Best way to design and build websites: The Pattern Page Workflow #webdesign #nocode #wixstudio
มุมมอง 1.3K3 หลายเดือนก่อน
Best way to design and build websites: The Pattern Page Workflow #webdesign #nocode #wixstudio
Level up your UI design skills Start learning Design Systems #productdesign #designsystem #tutorial
มุมมอง 50K4 หลายเดือนก่อน
Level up your UI design skills Start learning Design Systems #productdesign #designsystem #tutorial
Your UX Design Portfolio has to have this #designportfolio #uxportfolio #casestudies #uxcareer
มุมมอง 3.6K4 หลายเดือนก่อน
Your UX Design Portfolio has to have this #designportfolio #uxportfolio #casestudies #uxcareer
How to use Figma Variable Modes FIGMA COMPONENT VARIANTS + VARIABLES #figmatutorial #figmacomponents
มุมมอง 3K4 หลายเดือนก่อน
How to use Figma Variable Modes FIGMA COMPONENT VARIANTS VARIABLES #figmatutorial #figmacomponents
Build along to create an interactive lava lamp hero section #webdesign #microinteractions
มุมมอง 6334 หลายเดือนก่อน
Build along to create an interactive lava lamp hero section #webdesign #microinteractions
Build along to create a unique parallax animation
มุมมอง 4725 หลายเดือนก่อน
Build along to create a unique parallax animation
Build along to create an interactive bento box
มุมมอง 9285 หลายเดือนก่อน
Build along to create an interactive bento box
Figma Variables & Advanced Prototyping In-Depth Follow Along Design | ADVANCED FIGMA TUTORIAL
มุมมอง 10Kปีที่แล้ว
Figma Variables & Advanced Prototyping In-Depth Follow Along Design | ADVANCED FIGMA TUTORIAL
Thank you so very much for this sir
You've always took that for granted and I bet most of us never thought about about the BST of those super rad eye-catching Timelapses. 👏🏽 **Taking a bow**
but yeah, as @FallenBLuue suggested, having the Figma file opened in 2 different Figma accounts (one for editing/zooming and another of Timelapse recording) with a second screen+ElGato, would make your life easier, maybe. 🤙🏾
Great 👏🔥
where are those illustrations from? Super cute, especially the guy with 3-eyed cat
very helpful
Hi friend, could you please display the shortcut keys on screen each time you use them? It would be super helpful for following along. Thanks!
Potential client here.
🙌🔥
Oh my God! That was amazing! Dropping some serious knowledge here! Thank you so much for this! And the Autolayout + variable changing trick to move the screen? GENIUS!
I think this would work better by doing the keyboard as an overlay. That way there is no need to do 2 frames.
Nolan u could make a series or skillshare out this fun presentation figma animation stuff
20:24 It's better to copy and paste the connector line from the FigJam board, it's easier than using the pen tool.
I aggree that it is totally important to train the skill and grow. I am just wondering where this ends. product designers need to learn business, need to learn development processes, research methods. Are constantly under fire during work from all these 3 disciplines, And after a 10-12h working day with 30000 slackmessages, user interview, and trying to find timeslots between calls we need to train our actual craft in our free time just for keeping a job that is not understood by 80% of our working environment in cross functional teams (and is threatened by ai tools) let the burnout begin.
Thanks for Great content but I need diff approach as I am in first make design systems from typography, colors..etc then design with it I feel like strange and limited when I make this
Most developers aren't too focused on notes or hints left in Figma; we're thinking in terms of CSS and components. When designs don’t align with that mindset, it just makes the job harder.
I just would create another account for recording and use my main account for creating :D You just "only" need a second device
You remember number of color is incredible 😮❤
Can I export this to wix after
For anyone interested, I am building a tool for handovers, that will have variations, breakpoints, documentation, screens on the side and an easy upload from figma, if anyone interested give me a shout I van run u a demo
You are a blessing. Thank you for this.
Great Tutorial - Thank you love it
Which tools do you recommend for UX designers that are most useful for current trends and future advancements?
I'm currently doing a UX course and they haven't really covered handovers so this was a really great insight! Thank you :)
Same here, let’s connect
Make this show up to my UI guy, not me :) I so want him to do this, guy is so lazy didn't even group elements... Good job on the video I loved everything
what if we have 5-6 input fields?
Tip: Instead of creating a line and arrow in Figma...Go into a FigJam file > create a line with an arrow > copy that line > paste into your Design file.
Which of your courses contains variables like this one?
I'm a developer who learns it to know how to do a design, these times front-end(moved to full-stack) need to work as whole team 😅
This video is sucha waste of time .... this looks horrible and a mess. Use sections and anotations... terrible
Absolutely love it man 🤍 Love your content, always a fan!!
I've got a great idea i can share and collaborate on. I'm already working on it. Would you be willing to help me get a UX Internship if you implement it? I'm currently sitting in a 2×4 security booth studying to break into the industry. The sooner i don't have to do this third shift security, the better.
Thanks for the video 😁 I was wondering how did you drag the font style of 'Affirmation' and apply it to Excited text at 9:26 Thanks :)
He used a shortcut to apply style. He copied the style/properties of the text "Affirmation" using shortcut Command+Option+C (Mac) or Ctrl+Alt+C (Windows) and applied it on the text "Excited" by using Command+Option+V (Mac) or Ctrl+Alt+V (Windows). This is also used for the style of everything: shape, autolayout, effect, section, ... Enjoy!
What would you advise me if you started learning UI/UX and Figma.
Senior product designer at a top 10 Fortune 500 and I can tell you POs, PMs, BAs, etc. and developers are only interested in my prototypes and life is hell. Just FYI. 😅
07676 Lind Lane
So for the toggle switch interaction , I’ve got something similar but I want to add it to one of my screens ? can you make it a component?
I think I have solved the Record Animation prototype but youtube is not letting me paste the link in comments :( But these are the steps i took : 1. made components just the same way you did 2. create 2 frames one with record 0 and other with record 1 3. Set the drag animation of the pin from frame 1 to 2 with "RESET COMPONENT STATE" <<---very important 4. Take the prototype animation value to delay 0 and Linear 400 5.Same set the drag animation from frame 2 to 1 with "RESET COMPONENT STATE" with same delay 0 and Linear 400 6 And Done!
Thanks for sharing, fyi timesaver - there are a bunch of plugins for quickly drawing lines with arrows like autoflow or figjam connectors for figma etc
Next challenge, get gsap to make work in code
I bought your UI design course and love it! ***Do you offer 1:1 mentoring?*** I DM’d you on Instagram but didn’t get a reply. Please let me know the best way to reach out to you. Today is Sunday, and I have my tea and snacks with me to follow your videos and skill up. Thanks a lot for the amazing content!
Hey, i currently do not offer 1 on 1 mentoring. Thank you so much for the support
Keeping the brain tidy.
100%
Great!
For the record player one, you shouldn’t need the proxy frames, you can just set the playing variable on the frame itself setting it off on a delay, (Ie your frame “on” has an 1ms delay that sets the variable to true and viceversa on the “off” frame. Then for the animation don’t condition each step of the animation, just leave your component as you had it originally, then on the instance put a conditional set to delay(set it to around 10ms so that the playing variable has time to change) that switches to the variant 1st to trigger the animation
How do you export the prototypes in MP4?
oh my god Nolan, just want to say bunch of thank you for this method. It helps me a lot as a product designer, and help engineering to easier to develop the design.. love from Indonesia
Quick question for you and the designers out there, do you really need to design for different screen sizes and devices (For example big Android and a smaller iPhone) Please, I'm in a pickle 🫠
Really depends on the product! Basically, if there needs to be a lot of layout changes for the different sizes of phones, you should demo that. But if it’s just scaling changes or margins around the main content, you shouldn’t need to!
You the best thank you 🙌🏻❤️❤️
Thank you for watching!
Watched the whole video in the middle of the night ... Love it ❤
Yoooo best comment ever. Glad I could keep you awake 🤣
Love it ❤.....hope for more long videos 🔥
More to come! Back at it again now 😎
Thanks for your time; it is an extremely informative video, and I wish to see more.