- 49
- 164 320
Figma Bites
United States
Приєднався 11 лют 2021
Figma Bites is a video series that aims to teach you how to speed up your Figma workflow. Created by Chris Michel (@hatefulcrawdad).
How to use video in Figma Prototypes (Figma UI3) | Figma Bites
In this video you'll learn how to use video in your Figma prototypes. Videos have a couple special interaction details you can use. To help illustrate these interactions, you'll create an ingredients list UI with video preview steps.
===
You can get the file used in this video here:
www.figma.com/community/file/1438613221506662389/video-in-figma-prototypes
===
I got all the videos used in this tutorial at pexels.com:
www.pexels.com/video/chef-making-beef-burger-5907168/
www.pexels.com/video/cheeseburger-sandwich-with-ketchup-8879537/
www.pexels.com/video/family-making-dinner-together-7652913/
www.pexels.com/video/woman-making-patties-8477333/
===
ABOUT FIGMA BITES
===
Figma Bites is a video series that aims to teach you how to speed up your Figma workflow.
📺 Who is the Audience? 📺
Any UX Designer or person using Figma is the perfect audience for this series. These short videos will give you actionable tidbits of information that you can start using in your Figma workflow today.
👔 Why this format? 👔
We’re all busy working on making the world better for our users and making changes to our workflow can take us out of that focus. Our hope is that these short videos will be easily digestible when you’ve only got a few minutes to learn something new. The topics will be small enough to learn quickly and add to your workflow without trying to boil the ocean.
===
You can get the file used in this video here:
www.figma.com/community/file/1438613221506662389/video-in-figma-prototypes
===
I got all the videos used in this tutorial at pexels.com:
www.pexels.com/video/chef-making-beef-burger-5907168/
www.pexels.com/video/cheeseburger-sandwich-with-ketchup-8879537/
www.pexels.com/video/family-making-dinner-together-7652913/
www.pexels.com/video/woman-making-patties-8477333/
===
ABOUT FIGMA BITES
===
Figma Bites is a video series that aims to teach you how to speed up your Figma workflow.
📺 Who is the Audience? 📺
Any UX Designer or person using Figma is the perfect audience for this series. These short videos will give you actionable tidbits of information that you can start using in your Figma workflow today.
👔 Why this format? 👔
We’re all busy working on making the world better for our users and making changes to our workflow can take us out of that focus. Our hope is that these short videos will be easily digestible when you’ve only got a few minutes to learn something new. The topics will be small enough to learn quickly and add to your workflow without trying to boil the ocean.
Переглядів: 254
Відео
Learn Your Way Around Figma UI3 | Figma UI3 Overview | Figma Bites
Переглядів 774Місяць тому
In this video you'll get a quick overview of what changed in the UI3 update from Figma. This was a controversial update made better by the fact that they moved away from floating panels. Overall, it was mostly a shift in where tools and file actions live plus a bunch of refinements to the properties panel. ABOUT FIGMA BITES Figma Bites is a video series that aims to teach you how to speed up yo...
How to create Figma variables with multiple modes | Figma Bites
Переглядів 6042 місяці тому
In this video we walk through how to use modes for creating variables that can hold more complex contexts. Let's say your desktop and mobile designs have differing colors between light mode and dark mode. It can be confusing at first but once you see how to use modes like this, you only need one design mock to support many use cases. ABOUT FIGMA BITES Figma Bites is a video series that aims to ...
Level up your Figma productivity with split tabs | Figma Bites
Переглядів 3693 місяці тому
In this video we show you how to use split tabs in the Figma desktop app. This feature can help you increase your productivity by putting more things in view at once. ABOUT FIGMA BITES Figma Bites is a video series that aims to teach you how to speed up your Figma workflow. 📺 Who is the Audience? 📺 Any UX Designer or person using Figma is the perfect audience for this series. These short videos...
Copy and Paste Connectors and Sticky Notes from Figjam to Figma | Figma Bites
Переглядів 5574 місяці тому
In this video we share a handy tip with you about copy and pasting helpful elements from Figjam to Figma. Sometimes you want the power of both tools and this is one way to get that. You can make workflow in Figma and add sticky notes to explain your design or keep track of notes. ABOUT FIGMA BITES Figma Bites is a video series that aims to teach you how to speed up your Figma workflow. 📺 Who is...
Design Specs are Easier with Dev Mode | Figma Bites
Переглядів 5925 місяців тому
In this video we see you how to use Dev Mode to make developer handoff easier than ever before! Learn to add measurements, annotations, comments, and more. ABOUT FIGMA BITES Figma Bites is a video series that aims to teach you how to speed up your Figma workflow. 📺 Who is the Audience? 📺 Any UX Designer or person using Figma is the perfect audience for this series. These short videos will give ...
How to use Multi-edit in Figma | Figma Bites
Переглядів 7226 місяців тому
In this video we share an overview of all the ways you can use multi-edit in Figma. ABOUT FIGMA BITES Figma Bites is a video series that aims to teach you how to speed up your Figma workflow. 📺 Who is the Audience? 📺 Any UX Designer or person using Figma is the perfect audience for this series. These short videos will give you actionable tidbits of information that you can start using in your F...
Learn how to use Color Variables in Figma Prototypes | Figma Bites
Переглядів 1,4 тис.7 місяців тому
In this video we build on the previous three videos in this series and teach you how to create color variables in your Figma prototypes. You'll learn how to create color variables and how to change them based on conditional login in your prototype interactions. You can copy the file used in this tutorial, here: www.figma.com/community/file/1361769410135055417/variables-in-prototypes-color ABOUT...
Learn to Harness the Power of String Variables in Prototypes | Figma Bites
Переглядів 3,3 тис.8 місяців тому
In this video you'll learn how to create string variables and use them for more than just strings of text. By using string variables with variants and instances, you can create prototypes that feel a lot more dynamic. This is video 3 of 4 in the variables in prototypes series. Video 4 here: ua-cam.com/video/VXpyZf5nMq0/v-deo.html You can find the file used in this tutorial here: www.figma.com/c...
Learn how to use Number Variables in Figma Prototypes | Figma Bites,
Переглядів 4 тис.9 місяців тому
In this video, we’ll walk through how to create number variables and use them for prototyping a simple kiosk menu. You'll learn to apply number variables, create expressions to make dynamic variables, and conditionals to change variables based on test results. This is video 2 of a 4 part series covering variables in Prototypes. Subscribe and hit that notification bell if you want to follow alon...
Learn how to use Boolean Variables in Prototypes | Figma Bites
Переглядів 14 тис.10 місяців тому
In this video, we’ll walk through how to create boolean variables and use them for prototyping a simple kiosk menu. Boolean is a programming term that refers to data that can only be “true” or “false”. This is video 1 of a 4 part series covering variables in Prototypes. Subscribe and hit that notification bell if you want to follow along. Here's the 2nd video: ua-cam.com/video/ZEW3jx9i10w/v-deo...
Figma Variable Best Practices | Figma Bites
Переглядів 2,3 тис.Рік тому
For our second course on variables, we’re serving up best practices. Stick around to learn about the difference between styles and variables, naming conventions, collections, and scope. ABOUT FIGMA BITES Figma Bites is a video series that aims to teach you how to speed up your Figma workflow. 📺 Who is the Audience? 📺 Any UX Designer or person using Figma is the perfect audience for this series....
Get Dark Mode for Free with Figma Variables (Intro to Variables) | Figma Bites
Переглядів 1,3 тис.Рік тому
In this video we serve up and intro to Figma variables. As of the release of this video variables is in Open Beta. This means some of the features might change but the overall concept shouldn't. I'll explain what variables are, how you create, manage, and apply them. Once you understand that, you'll be well on your way to getting dark mode for free. Variables work for much more than color. You ...
Cooking with Figma Bites | Commercial
Переглядів 851Рік тому
Welcome to Figma Bites, a video series that aims to teach you to speed up your Figma workflow. These bite-sized videos are perfect for improving how you work in Figma. ABOUT FIGMA BITES Figma Bites is a video series that aims to teach you how to speed up your Figma workflow. 📺 Who is the Audience? 📺 Any UX Designer or person using Figma is the perfect audience for this series. These short video...
Prototyping a Double Sticky Nav | Figma Bites
Переглядів 3,3 тис.Рік тому
In this video we share our secret family recipe for a double sticky nav. We recently had a need to make a Figma prototype that had a fixed navigation on top of the screen, some content, and a filter bar. The filter bar needed to stick under the fixed header once they touched. We'll walk you through the steps needed to make a navigation like this in a frame made with Auto Layout. ABOUT FIGMA BIT...
Intro to Auto Layout | 2023 Update | Figma Bites
Переглядів 7 тис.Рік тому
Intro to Auto Layout | 2023 Update | Figma Bites
Intro to Find and Replace | Figma Bites
Переглядів 430Рік тому
Intro to Find and Replace | Figma Bites
Treat your design files like a product | Figma Bites
Переглядів 2,8 тис.Рік тому
Treat your design files like a product | Figma Bites
Smart Animate and Figma Prototypes | Figma Bites
Переглядів 1,1 тис.Рік тому
Smart Animate and Figma Prototypes | Figma Bites
You'll never need to detach a Figma component again | Figma Big Bite
Переглядів 22 тис.Рік тому
You'll never need to detach a Figma component again | Figma Big Bite
Select locked layers easily with this handy shortcut | Figma Bites
Переглядів 1,8 тис.Рік тому
Select locked layers easily with this handy shortcut | Figma Bites
Prototyping with Tokens | Figma Big Bite
Переглядів 2,4 тис.2 роки тому
Prototyping with Tokens | Figma Big Bite
How to Prototype in Figma | Figma Bites
Переглядів 1,4 тис.2 роки тому
How to Prototype in Figma | Figma Bites
Fix Nested Interactive Components in Prototypes | Figma Bites
Переглядів 7 тис.2 роки тому
Fix Nested Interactive Components in Prototypes | Figma Bites
Component Properties Buffet | Figma Bites
Переглядів 6872 роки тому
Component Properties Buffet | Figma Bites
How to create mockups using Figma | Figma Big Bite
Переглядів 1,5 тис.2 роки тому
How to create mockups using Figma | Figma Big Bite
Interactive Components | Figma Bites
Переглядів 9 тис.2 роки тому
Interactive Components | Figma Bites
Stupid question: How did you edit the images? I am almost ashamed of the privmitiv workaround I had to use 😹
Edit them how, exactly? I'm not sure I follow.
Another crazy good video!
Gassin' me up!
You saved my life! Thanks!!
@@lina_useche wow, that’s a big deal. Glad I saved a life with these tutorial vids! Appreciate you
I've been struggling to find a way to use string variables with animation. Is it possible? For example, using a button to trigger a separate component that's set up as an animation sequence.
@@davebiscuits not sure, have example of what you are trying to do?
@ outside of the one I said above, no not really. A simple idea would be having a button trigger a rotating block animation that was built via a component with smart animate?
@@davebiscuits so clicking a button would start and stop some sort of animation in a separate component in the page?
@@FigmaBites Correct
Insane! Thank you!
You bet!
Video 4 here: ua-cam.com/video/VXpyZf5nMq0/v-deo.html
Video 3 is here: ua-cam.com/video/RN3LWTPq68E/v-deo.html
2nd video here: ua-cam.com/video/ZEW3jx9i10w/v-deo.html
I can't thank you enough! One request: it would be great to introduce the Next Video connected to this one in the comments, so that we can jump directly there. Thank you again!
I'll do that.
I'll be saving this to my reference library. That's a lot to take in, and it's great how you got it down so concisely. I can only imagine how much time you spent figuring this all out.
@@jakebarlow7431 thanks! It is a lot to cover. I was balancing keeping it short, skipping over things I already have in other vids, and trying to confuse. It didn’t take too long to figure out :)
Thx dude n you save my day ! You take a suscriber !
Glad you enjoyed!
It is impractical to require an actual video file. For small animations or clips I suppose it’s fine, but what we all want is to input a URL to a video, and have the video stream inside the container.
Wow, I didn't knew videos could keep their playback state if to use smart animate, nor they can trigger interactions on hitting a certain timeframe/end of the video. Thank you, that's helpful!
@@IlyaHawx glad you enjoyed!
Great explanation! Thank you very much!
Glad it was helpful!
This is soo cute lol, also thank you for this
@@avgenjy thanks! Glad you enjoyed it
This update made Figma’s UX worse for me... what problems does this update even solve? It just caused more problems. The floating tools on the bottom for example. They could have done simple things like a shortcut to hide selection outlines like in Adobe illustrator which is sorely missing.
many folks are watching your videos on laptops and since you're using a larger display is very hard to follow your choices done in the side panel
@@adicostea fair, I have been zooming a little more recently. I’ll keep that in mind
"Canvas stacking".. damn i would never find that alone. In a similar case I was thinking that auto layout was making my scrolling effect impossible so I start to convert most of my auto-layout group into frame in order to better manage their stacking position. I u see what I mean. God damn it
@@greg7371 it can def be hard to find
Nice one, Chris!
Thanks, Jake
Man I was looking for a component button. Feels so strange that they hid that away.
Yeah, that one took a minute. But the shortcut helps :)
A nice bite on sections would be good too.
@@soma808 yep, I should do a sections one
Yay! Thanks!!!
@@soma808 wooooo!
thank you! I have been wondering how to make these kinds of interactions!!! Now I need to rewatch it a few times to truly understand. P.S. Did you know you said "Brototypes" at the very end? 🤣
@@emilyqalandarova8899 glad you are learning! And yep, I said “Brototypes” for fun and to keep with the alliteration I always end with
@@FigmaBites HA - I love it! I'm a Figma Bites first timer, so now I know I want to watch way more to witness wondrous wordplay. 💅
@@emilyqalandarova8899 yes! Share em with your network too ;)
Can’t wait for you to cover the new figma UI. Hard to find some of theses things now
@@matthewjackson8709 the next video will be an overview !
oh my god thank you so much!!! I've been using Figma for years but variables always confused me. this was so clear, I really, really appreciate it!!
I love hearing that and I'm glad you were able to learn something new. Happy designing!
Thanks for advancing the concept of contexts here! Also, I don't have the new Figma UI either, LOL!
@@jakebarlow7431 thanks for the comment, Jake!
When I right-click the eyeball icon in order to get the variable tied to visibility, nothing happens. Does this feature still work for you in Figma? Have they moved it somewhere?
I still see it. But I think it might only show up when you have a boolean variable created. I'm not sure if this has changed in the new UI because I still don't have it.
@@FigmaBites Thank you, this seemed to do the trick!!!
@@KevTrep glad to hear it!
Your semantic colors collection has a type size variable.
Thanks for the heads up
Just build a state machine in figma. Gonna be really helpful. Steps: 1. Utilize atomic design system structure. 2. Design interactive components. 3. Use key/gamepad interaction with smart animation. 4. Create local variable same as default varient name. (Input) 5. Connect variable to varient. 6. Design trigger area. (Listener) 7. Add if/else condition with interaction to trigger area. 8. Finalize your interactive components (prototype token). 9. Design viewport & insert interactive components. (You can utilize sections to let figma memorize your interaction flow.) 10. Play, test & Iterate ❤
This is GREAT for those extreme wide monitors :D. I found very useful using the prototype in responsive mode, specially for those mobile first designs. Thanks!
Thanks for watching! Happy learning :)
God bless yaa man, this simple thing you did help me with my most complex project.
@@Ali_UX_Desinger glad to hear it!
I know this was easy. I love it. It was helpful
Great video showing the power of variable prototyping! I hope to be at this level one day
You got this!
Cool, thanks!!
You bet!
I keep getting the message "Pasting inside the current selection is not possible" when trying to use the paste to replace (???)
@@maddiemaddocks2482 you can’t paste into a component instance
@@FigmaBites Aaaah.... I thought we were supposed to select the text of the duplicated slot & paste to replace. I kept backing up to rewatch snippets but I guess I missed something.
Great info! Quick question since I saw it happen at the beginning - when you picked that button to swap into the dialogue box it got distorted. Does this mean for components you already made (lets say somewhere else in the design system) you'd have to make a custom local component for this everytime?
@@JoskaBorbely what you saw there was just me showing a placeholder example of custom content. You should be able to fix any stretching by adjusting the auto layout settings and horizontal and vertical resizing settings. I believe that content was set to “fill” for both. You would only be making custom local components for content you are creating that isn’t already part of the design system. I hope that answers your question. If not, let me know.
@@FigmaBites Yes, thank you that works for buttons, the issue I'm running into is when I have a component set of logos that have different sizes, when the component swaps with the slot it is working as expected but when I toggle a variant it then distorts
@@JoskaBorbely hmmm, can you share the file with me? I’d be happy to take a look
I love these sorts of hacks, but also wish Figma would just make interoperability between the apps a little better. Connectors and sticky notes, at the least, should be accessible right inside of Figma.
I agree!
thank you. this is great
@@khimchongchung7622 right? Glad you liked it
Wow! Thank you so much for this valuable tutorial. I found the channel when was searching the tutorial for auto-layout, but found this treasure lesson. It's necessary for my UI for games.
@@leilabbas_ I’m so glad you found my channel and enjoyed the tutorial! Thanks for letting me know
Jesus Saves, and He loves you all.
Amen, brother
Unrelated: Your facial air is so so fascinating!
Thanks, I appreciate the comment
Very well explained
@@levitikon1 thanks!
Excellent overview! That's a lot of info condensed into a snackable bite! Like a tasty protein bar!!! :D
Thanks, Jake!
I was able to pull off a scroll animation that I initially thought impossible to do. Thanks to this video!
Glad to hear it!
Thank you so much
You are welcome!
Even at 1080p this is hard to see the text on my phone
I could see that.
Thank you so much
You are welcome
Does that mean that every single time you want to create a dropdown for example, you can't just use a component, you have to take the component and add floaty links to it?
No, you don’t have to use this technique at all. It was a pretty specific issue when there were multiple interactions in the same element. And I think it could’ve been fixed in a different way, too. Are you having a similar issue with your dropdown?
This was a really good demo of something I was wondering about doing! I have a slightly different need for calculating the total price though: 1) imagine if the quantity of each dish maps to a different price. So for example if the quantity of beef is 1, then the price is $10, and if the qty is 2, the price is $15. And if the qty is 3 or more, the price is a flat $21. 2) same with pastrami, etc, but the pricing structure may be different So for the total, I’d want to take into account all the different pricing structures. Is this possible? If so, how would one set this up?
Thanks for the comment. I’d have to play with it to know if it would work for sure but it sounds doable. You would need to set up a bunch of conditionals checking for the quantity of the item and changing the math inside of those. That same conditional would need to be repeated in a few places for total and whatnot. I’d say take a stab at it and let me know what issues you encounter. Feel free to share a link to your file once you get going
I wish you could apply properties to multiple selections. Now that would be handy.
I can imagine them adding that.