Figma Bites
Figma Bites
  • 45
  • 134 092
Copy and Paste Connectors and Sticky Notes from Figjam to Figma | Figma Bites
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 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.
⏳ When do new videos come out? ⏳
We’re planning to release a new video every other week on Tuesdays. We can’t promise to hit this 100% of the time but will do our best to go no longer than 1 month between videos if things get busy.
Переглядів: 228

Відео

Design Specs are Easier with Dev Mode | Figma Bites
Переглядів 322Місяць тому
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
Переглядів 5002 місяці тому
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
Переглядів 6403 місяці тому
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
Переглядів 1,6 тис.4 місяці тому
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. You can find the file used in this tutorial here: www.figma.com/community/file/1350141305603257175/variables-in-prototypes-string ABOUT FIGMA BITES Figma Bites is a video series t...
Learn how to use Number Variables in Figma Prototypes | Figma Bites,
Переглядів 2 тис.5 місяців тому
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
Переглядів 7 тис.6 місяців тому
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. You can find the file I used in this video here: www.fig...
Figma Variable Best Practices | Figma Bites
Переглядів 2 тис.8 місяців тому
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
Переглядів 9559 місяців тому
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
Переглядів 62810 місяців тому
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
Переглядів 2,3 тис.10 місяців тому
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 тис.Рік тому
In this video we cover the basics of auto layout. Figma recently launched a bunch of great new features during their Config conference in June. One of these updates was another improvement to the Auto Layout feature set. If this is your first time using Auto Layout, this video will help you understand how it works and when to use it. If you've used Auto Layout before, these 5 minutes will give ...
Intro to Find and Replace | Figma Bites
Переглядів 375Рік тому
In this video we introduce you to Figma's "Find and Replace" features. 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...
Treat your design files like a product | Figma Bites
Переглядів 2 тис.Рік тому
On our menu today is… a menu? We want to show you ways to make design files easy to browse and navigate. Because we share Figma files and prototypes directly, it’s important to think about how the people viewing the file for the first time find their way around. Figma gives us a few good ways to add way-finding to our files but it will take a bit of intentional practice to make it an every day ...
Smart Animate and Figma Prototypes | Figma Bites
Переглядів 884Рік тому
Today I want to share a secret family recipe called “Smart Animate”. This feature gives you a tool for adding polish to your prototypes by automatically animating changes between frames. Smart animate is a powerful animation feature in Figma that allows us to create smooth transitions between frames or objects. It uses the elements’ position, size, rotation, style, and opacity to create these a...
You'll never need to detach a Figma component again | Figma Big Bite
Переглядів 18 тис.Рік тому
You'll never need to detach a Figma component again | Figma Big Bite
Select locked layers easily with this handy shortcut | Figma Bites
Переглядів 1,7 тис.Рік тому
Select locked layers easily with this handy shortcut | Figma Bites
Prototyping with Tokens | Figma Big Bite
Переглядів 1,9 тис.Рік тому
Prototyping with Tokens | Figma Big Bite
How to Prototype in Figma | Figma Bites
Переглядів 1,4 тис.Рік тому
How to Prototype in Figma | Figma Bites
Fix Nested Interactive Components in Prototypes | Figma Bites
Переглядів 6 тис.Рік тому
Fix Nested Interactive Components in Prototypes | Figma Bites
Power Moves | Figma Bites
Переглядів 420Рік тому
Power Moves | Figma Bites
Component Properties Buffet | Figma Bites
Переглядів 656Рік тому
Component Properties Buffet | Figma Bites
Copy and Paste Buffet | Figma Bites
Переглядів 398Рік тому
Copy and Paste Buffet | Figma Bites
Auto Layout Buffet | Figma Bites
Переглядів 474Рік тому
Auto Layout Buffet | Figma Bites
How to create mockups using Figma | Figma Big Bite
Переглядів 1,3 тис.Рік тому
How to create mockups using Figma | Figma Big Bite
Interactive Components | Figma Bites
Переглядів 8 тис.2 роки тому
Interactive Components | Figma Bites
Boolean Operators | Figma Bites
Переглядів 2 тис.2 роки тому
Boolean Operators | Figma Bites
Copy and Paste Extras | Figma Bites
Переглядів 3492 роки тому
Copy and Paste Extras | Figma Bites
Intro to Variants (Slightly Outdated) | Figma Bites
Переглядів 4052 роки тому
Intro to Variants (Slightly Outdated) | Figma Bites
Intro to Components (Slightly Outdated) | Figma Bites
Переглядів 6752 роки тому
Intro to Components (Slightly Outdated) | Figma Bites

КОМЕНТАРІ

  • @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 11 днів тому

    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 11 днів тому

    thank you. this is great

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

      @@khimchongchung7622 right? Glad you liked it

  • @leilabbas_
    @leilabbas_ 13 днів тому

    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 13 днів тому

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

  • @midejumo
    @midejumo 26 днів тому

    Jesus Saves, and He loves you all.

  • @midejumo
    @midejumo 26 днів тому

    Unrelated: Your facial air is so so fascinating!

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

      Thanks, I appreciate the comment

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

    Very well explained

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

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

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

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

  • @SisiBisi-zh1cj
    @SisiBisi-zh1cj Місяць тому

    Thank you so much

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

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

  • @SisiBisi-zh1cj
    @SisiBisi-zh1cj Місяць тому

    Thank you so much

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

    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 Місяць тому

      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 Місяць тому

    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 Місяць тому

      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 Місяць тому

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

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

      I can imagine them adding that.

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

    So useful. Thank you! 👏

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

      Glad it was helpful!

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

    awesome! the second part didn't work because I have a object inside an object and when I add the 84px nav padding I can't get the object it is inside of to allow for that spacing :( But really helpful.

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

    Thanks Chris for these videos! Love learning from them. I am wondering if you can also share another that covers selecting images in numeric sequences, for example, in social media photo app sites, you can select a sequence of images to post, and it will reset the order if you start over, or deselect images in the album rolls by showing a numeric order. How can you recreate that in Figma using variables?

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

      Thanks for the comment! I’ll see if I can work up a quick example for you. I probably won’t do another bite about variables in prototypes for awhile. But I can make a file that shows it working probably

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

      Well I played around with it for awhile and I think this particular interaction is too complex for the current state of Figma prototyping. That said, I think it could be possible with a long string of variables and conditionals but I couldn't get it to work during my attempts.

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

    The Last tip was amazing❤

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

      Right?!?

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

      @@FigmaBites that last tip just changed my life!

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

      @@jakebarlow7431 I know, right?!?

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

    Very useful handsome guy. <3 Thanks!

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

    Thanks for sharing nice little tricks

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

      Thanks for the comment and happy learning!

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

    Some much better method than getting rid of auto-layout and some more tricky stuff. Thanks!

  • @RaphaelWeis-qt6jp
    @RaphaelWeis-qt6jp 2 місяці тому

    But then don't we have a new component that we have to store and manage in the page, that has only one instance ? It feels weird to me, I wouldn't know what to do with it.

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

    Love the channel!

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

      Thank you so much, that's nice to hear :)

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

    🤯🤯

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

    helpful series, esp. now that I'm back into product design and making prototypes!

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

    you've condensed a lot of info in this one! I had to watch it a few times :)

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

      Yeah these were tough because there is a lot going on with variables. Luckily they are short enough to watch a few times through ;)

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

    I hate rectangles :(

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

      What does this have to do with the video?

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

    Of ALL the Figma layout videos I've trawled - this is the best - thanks!

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

      Thank you! I really appreciate hearing that

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

    Basically remove the hidden button or element from your variant set because it cannot keep track of states

  • @user-jy8yi9ou5r
    @user-jy8yi9ou5r 3 місяці тому

    I love your videos! Short, sweet and to the point, and very well explained! Thank you for making these!

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

      I’m so glad to hear it! Thanks for watching

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

    Great bite! Is there a way to use string variables to manage content in a file from a central place?

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

      Thanks! And yeah. There are a few options. You can use variables that are published as part of team library and then every new file can have that library on to get access to the variables. You could also use a Google Sheet and some community plugins possibly.

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

    Is it possible to drag and drop content or another component onto a slot/placeholder subcomponent of a component and have the swap happen automatically ?

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

      I don't think so but I haven't tried that specifically.

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

    Awesome content Chris, keep it coming!

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

      Thanks! I appreciate hearing that.

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

    thank you

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

    great amazing.

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

    This tutorial is so helpful! love all your tutorials, short and on point!!

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

    Great stuff, thanks for sharing. Can we delete the branch file once its reviewed and merged? is there any use keeping it or will it effect if we delete it? because i see once merged we cannot make edits to it. Please share. Thanks..

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

      Once a branch is merged you can delete it. Best practice is to create a new branch for new changes

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

      Thank you🙂@@FigmaBites

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

    Thanks, super helpful!

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

      Thanks, glad you found it helpful :)

  • @David-xq7ef
    @David-xq7ef 5 місяців тому

    Figma is really a pain. They just have to add a value in px to the sticky option... damn

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

      It can be for sure. Maybe they will add that option someday, who knows. You should send them that feedback!

  • @michaelahokas3537
    @michaelahokas3537 6 місяців тому

    That was a really useful intro. One question I have is, when the layout changed and the tiles wrapped, the last tile ended up a different size. Is it possible to have the tile width adapt but keep all three tiles the same width?

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

      Not easily. You could possibly trick it with invisible placeholder component or something. Since these are set to a min/max width and "fill container", they will automatically fill that max width when they can.

  • @kev16
    @kev16 6 місяців тому

    That was great. I noticed in the demo you added each sandwich in the order they appeared. With your boolean method can you change the order or add multiple sandwiches to the cart? Thanks!

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

      Unfortunately no. If you wanted multiple you would have to include those cards in the right side and so some conditional logic to make a 2nd one show up. I will be showing how to increment numbers in an upcoming one

  • @paulperole
    @paulperole 6 місяців тому

    such a time saver! thanks for this

  • @user-yu3di7ig8n
    @user-yu3di7ig8n 6 місяців тому

    So helpful!! Thank you

  • @kamipixeltips9416
    @kamipixeltips9416 6 місяців тому

    Thanks

  • @ZettabyteWebDesign
    @ZettabyteWebDesign 7 місяців тому

    Really good video, sadly more than 1 mode seems to have been paywalled recently. May be worth adding a note

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

      Ah, that's not fun. I do mention that the feature set is in beta during the video. I may add a note to the next one.

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

      Yeah I just noticed it too :( Not sure how to handle multiple themes in the free plan..

  • @kaylablock1425
    @kaylablock1425 7 місяців тому

    But doesn't that mean that you need to own the component?

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

      Yes. If you have a different team making components, show them this technique. Or build your own and share it with them.

  • @davetaylor7664
    @davetaylor7664 7 місяців тому

    great stuff! great explainer for someone trying to get to grips with Autolayout!

  • @whennn
    @whennn 7 місяців тому

    lol this is the easy way, now trying doing it while the the bar is a component, and it has more components under it. AND also u have 2 columns PC , meaning the bar is to 1 side while on the other side (righ or left) u have something else like a map. think of similar to airbnb

    • @whennn
      @whennn 7 місяців тому

      oh and also add a border to the left part panel. that contains several components. and then good luck doing this lol

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

      This sounds like a completely different UI than what I was showing. Your prototype would definitely be harder but not impossible from the sounds of it. Do you have a link to a file? I’m happy to try it out

  • @user-qd4oz1cl8n
    @user-qd4oz1cl8n 7 місяців тому

    God! I miss the double clicking from Adobre Creative Suite.

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

      What is this referring to from this video?