Figma Bites
Figma Bites
  • 49
  • 164 320
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.
Переглядів: 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
Power Moves | Figma Bites
Переглядів 4262 роки тому
Power Moves | Figma Bites
Component Properties Buffet | Figma Bites
Переглядів 6872 роки тому
Component Properties Buffet | Figma Bites
Copy and Paste Buffet | Figma Bites
Переглядів 4062 роки тому
Copy and Paste Buffet | Figma Bites
Auto Layout Buffet | Figma Bites
Переглядів 4872 роки тому
Auto Layout 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

КОМЕНТАРІ

  • @1980nikolov
    @1980nikolov 19 годин тому

    Stupid question: How did you edit the images? I am almost ashamed of the privmitiv workaround I had to use 😹

    • @FigmaBites
      @FigmaBites 19 годин тому

      Edit them how, exactly? I'm not sure I follow.

  • @1980nikolov
    @1980nikolov 19 годин тому

    Another crazy good video!

  • @lina_useche
    @lina_useche 22 години тому

    You saved my life! Thanks!!

    • @FigmaBites
      @FigmaBites 22 години тому

      @@lina_useche wow, that’s a big deal. Glad I saved a life with these tutorial vids! Appreciate you

  • @davebiscuits
    @davebiscuits День тому

    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.

    • @FigmaBites
      @FigmaBites День тому

      @@davebiscuits not sure, have example of what you are trying to do?

    • @davebiscuits
      @davebiscuits Годину тому

      @ 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?

    • @FigmaBites
      @FigmaBites Годину тому

      @@davebiscuits so clicking a button would start and stop some sort of animation in a separate component in the page?

    • @davebiscuits
      @davebiscuits 27 хвилин тому

      @@FigmaBites Correct

  • @1980nikolov
    @1980nikolov 2 дні тому

    Insane! Thank you!

  • @FigmaBites
    @FigmaBites 2 дні тому

    Video 4 here: ua-cam.com/video/VXpyZf5nMq0/v-deo.html

  • @FigmaBites
    @FigmaBites 2 дні тому

    Video 3 is here: ua-cam.com/video/RN3LWTPq68E/v-deo.html

  • @FigmaBites
    @FigmaBites 2 дні тому

    2nd video here: ua-cam.com/video/ZEW3jx9i10w/v-deo.html

  • @1980nikolov
    @1980nikolov 2 дні тому

    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!

  • @jakebarlow7431
    @jakebarlow7431 3 дні тому

    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.

    • @FigmaBites
      @FigmaBites 3 дні тому

      @@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 :)

  • @eikodo8432
    @eikodo8432 3 дні тому

    Thx dude n you save my day ! You take a suscriber !

  • @teegees
    @teegees 3 дні тому

    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.

  • @IlyaHawx
    @IlyaHawx 3 дні тому

    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!

    • @FigmaBites
      @FigmaBites 3 дні тому

      @@IlyaHawx glad you enjoyed!

  • @1980nikolov
    @1980nikolov 4 дні тому

    Great explanation! Thank you very much!

  • @avgenjy
    @avgenjy 17 днів тому

    This is soo cute lol, also thank you for this

    • @FigmaBites
      @FigmaBites 17 днів тому

      @@avgenjy thanks! Glad you enjoyed it

  • @teegees
    @teegees 19 днів тому

    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.

  • @adicostea
    @adicostea 25 днів тому

    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

    • @FigmaBites
      @FigmaBites 25 днів тому

      @@adicostea fair, I have been zooming a little more recently. I’ll keep that in mind

  • @greg7371
    @greg7371 Місяць тому

    "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

    • @FigmaBites
      @FigmaBites Місяць тому

      @@greg7371 it can def be hard to find

  • @jakebarlow7431
    @jakebarlow7431 Місяць тому

    Nice one, Chris!

  • @soma808
    @soma808 Місяць тому

    Man I was looking for a component button. Feels so strange that they hid that away.

    • @FigmaBites
      @FigmaBites Місяць тому

      Yeah, that one took a minute. But the shortcut helps :)

  • @soma808
    @soma808 Місяць тому

    A nice bite on sections would be good too.

    • @FigmaBites
      @FigmaBites Місяць тому

      @@soma808 yep, I should do a sections one

  • @soma808
    @soma808 Місяць тому

    Yay! Thanks!!!

  • @emilyqalandarova8899
    @emilyqalandarova8899 Місяць тому

    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? 🤣

    • @FigmaBites
      @FigmaBites Місяць тому

      @@emilyqalandarova8899 glad you are learning! And yep, I said “Brototypes” for fun and to keep with the alliteration I always end with

    • @emilyqalandarova8899
      @emilyqalandarova8899 Місяць тому

      @@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. 💅

    • @FigmaBites
      @FigmaBites Місяць тому

      @@emilyqalandarova8899 yes! Share em with your network too ;)

  • @matthewjackson8709
    @matthewjackson8709 Місяць тому

    Can’t wait for you to cover the new figma UI. Hard to find some of theses things now

    • @FigmaBites
      @FigmaBites Місяць тому

      @@matthewjackson8709 the next video will be an overview !

  • @wge621
    @wge621 Місяць тому

    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!!

    • @FigmaBites
      @FigmaBites Місяць тому

      I love hearing that and I'm glad you were able to learn something new. Happy designing!

  • @jakebarlow7431
    @jakebarlow7431 2 місяці тому

    Thanks for advancing the concept of contexts here! Also, I don't have the new Figma UI either, LOL!

    • @FigmaBites
      @FigmaBites 2 місяці тому

      @@jakebarlow7431 thanks for the comment, Jake!

  • @KevTrep
    @KevTrep 2 місяці тому

    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?

    • @FigmaBites
      @FigmaBites 2 місяці тому

      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.

    • @KevTrep
      @KevTrep 2 місяці тому

      @@FigmaBites Thank you, this seemed to do the trick!!!

    • @FigmaBites
      @FigmaBites 2 місяці тому

      @@KevTrep glad to hear it!

  • @RakeshVermaPlus
    @RakeshVermaPlus 2 місяці тому

    Your semantic colors collection has a type size variable.

    • @FigmaBites
      @FigmaBites 2 місяці тому

      Thanks for the heads up

  • @shifatmasud
    @shifatmasud 2 місяці тому

    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 ❤

  •  3 місяці тому

    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!

    • @FigmaBites
      @FigmaBites 3 місяці тому

      Thanks for watching! Happy learning :)

  • @Ali_UX_Desinger
    @Ali_UX_Desinger 3 місяці тому

    God bless yaa man, this simple thing you did help me with my most complex project.

    • @FigmaBites
      @FigmaBites 3 місяці тому

      @@Ali_UX_Desinger glad to hear it!

  • @samirkha
    @samirkha 3 місяці тому

    I know this was easy. I love it. It was helpful

  • @Visionary_E
    @Visionary_E 3 місяці тому

    Great video showing the power of variable prototyping! I hope to be at this level one day

  • @flaviaazvdo9333
    @flaviaazvdo9333 3 місяці тому

    Cool, thanks!!

  • @maddiemaddocks2482
    @maddiemaddocks2482 3 місяці тому

    I keep getting the message "Pasting inside the current selection is not possible" when trying to use the paste to replace (???)

    • @FigmaBites
      @FigmaBites 3 місяці тому

      @@maddiemaddocks2482 you can’t paste into a component instance

    • @maddiemaddocks2482
      @maddiemaddocks2482 3 місяці тому

      @@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.

  • @JoskaBorbely
    @JoskaBorbely 3 місяці тому

    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?

    • @FigmaBites
      @FigmaBites 3 місяці тому

      @@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.

    • @JoskaBorbely
      @JoskaBorbely 3 місяці тому

      @@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

    • @FigmaBites
      @FigmaBites 3 місяці тому

      @@JoskaBorbely hmmm, can you share the file with me? I’d be happy to take a look

  • @jakebarlow7431
    @jakebarlow7431 4 місяці тому

    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.

  • @khimchongchung7622
    @khimchongchung7622 4 місяці тому

    thank you. this is great

    • @FigmaBites
      @FigmaBites 4 місяці тому

      @@khimchongchung7622 right? Glad you liked it

  • @leilabbas_
    @leilabbas_ 4 місяці тому

    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.

    • @FigmaBites
      @FigmaBites 4 місяці тому

      @@leilabbas_ I’m so glad you found my channel and enjoyed the tutorial! Thanks for letting me know

  • @midejumo
    @midejumo 4 місяці тому

    Jesus Saves, and He loves you all.

  • @midejumo
    @midejumo 4 місяці тому

    Unrelated: Your facial air is so so fascinating!

    • @FigmaBites
      @FigmaBites 4 місяці тому

      Thanks, I appreciate the comment

  • @levitikon1
    @levitikon1 4 місяці тому

    Very well explained

    • @FigmaBites
      @FigmaBites 4 місяці тому

      @@levitikon1 thanks!

  • @jakebarlow7431
    @jakebarlow7431 5 місяців тому

    Excellent overview! That's a lot of info condensed into a snackable bite! Like a tasty protein bar!!! :D

  • @jayreambonanza1991
    @jayreambonanza1991 5 місяців тому

    I was able to pull off a scroll animation that I initially thought impossible to do. Thanks to this video!

  • @SisiBisi-zh1cj
    @SisiBisi-zh1cj 5 місяців тому

    Thank you so much

  • @ToxicQT
    @ToxicQT 5 місяців тому

    Even at 1080p this is hard to see the text on my phone

    • @FigmaBites
      @FigmaBites 5 місяців тому

      I could see that.

  • @SisiBisi-zh1cj
    @SisiBisi-zh1cj 5 місяців тому

    Thank you so much

  • @lauranixon20
    @lauranixon20 5 місяців тому

    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?

    • @FigmaBites
      @FigmaBites 5 місяців тому

      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?

  • @teegees
    @teegees 5 місяців тому

    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?

    • @FigmaBites
      @FigmaBites 5 місяців тому

      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

  • @scottshirk1857
    @scottshirk1857 5 місяців тому

    I wish you could apply properties to multiple selections. Now that would be handy.

    • @FigmaBites
      @FigmaBites 5 місяців тому

      I can imagine them adding that.