Excellent overview! That's a lot of info condensed into a snackable bite! Like a tasty protein bar!!! :D
@FigmaBites12 күн бұрын
Thanks, Jake!
@jayreambonanza199114 күн бұрын
I was able to pull off a scroll animation that I initially thought impossible to do. Thanks to this video!
@FigmaBites14 күн бұрын
Glad to hear it!
@SisiBisi-zh1cj23 күн бұрын
Thank you so much
@FigmaBites23 күн бұрын
You are welcome!
@ToxicQT23 күн бұрын
Even at 1080p this is hard to see the text on my phone
@FigmaBites23 күн бұрын
I could see that.
@SisiBisi-zh1cj25 күн бұрын
Thank you so much
@FigmaBites25 күн бұрын
You are welcome
@lauranixon2028 күн бұрын
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?
@FigmaBites28 күн бұрын
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Ай бұрын
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Ай бұрын
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Ай бұрын
I wish you could apply properties to multiple selections. Now that would be handy.
@FigmaBitesАй бұрын
I can imagine them adding that.
@misso5514Ай бұрын
So useful. Thank you! 👏
@FigmaBitesАй бұрын
Glad it was helpful!
@thepersonsawyersmithАй бұрын
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Ай бұрын
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Ай бұрын
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Ай бұрын
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Ай бұрын
The Last tip was amazing❤
@FigmaBitesАй бұрын
Right?!?
@jakebarlow7431Ай бұрын
@@FigmaBites that last tip just changed my life!
@FigmaBitesАй бұрын
@@jakebarlow7431 I know, right?!?
@tatsumoАй бұрын
Very useful handsome guy. <3 Thanks!
@FigmaBitesАй бұрын
Thanks!
@oZenakosАй бұрын
Thanks for sharing nice little tricks
@FigmaBitesАй бұрын
Thanks for the comment and happy learning!
@tanyacequi6556Ай бұрын
Some much better method than getting rid of auto-layout and some more tricky stuff. Thanks!
@FigmaBitesАй бұрын
Thanks!
@RaphaelWeis-qt6jpАй бұрын
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.
@alfredosmith61072 ай бұрын
Love the channel!
@FigmaBites2 ай бұрын
Thank you so much, that's nice to hear :)
@alimarsad49672 ай бұрын
🤯🤯
@FigmaBites2 ай бұрын
😻
@jakebarlow74312 ай бұрын
helpful series, esp. now that I'm back into product design and making prototypes!
@FigmaBites2 ай бұрын
Glad to hear it!
@JakeBarlow2 ай бұрын
you've condensed a lot of info in this one! I had to watch it a few times :)
@FigmaBites2 ай бұрын
Yeah these were tough because there is a lot going on with variables. Luckily they are short enough to watch a few times through ;)
@mariocontessotto64922 ай бұрын
I hate rectangles :(
@FigmaBites2 ай бұрын
What does this have to do with the video?
@esbenrose2 ай бұрын
Of ALL the Figma layout videos I've trawled - this is the best - thanks!
@FigmaBites2 ай бұрын
Thank you! I really appreciate hearing that
@ratsuns28282 ай бұрын
Basically remove the hidden button or element from your variant set because it cannot keep track of states
@hatefulcrawdad12 ай бұрын
Essentially
@user-jy8yi9ou5r2 ай бұрын
I love your videos! Short, sweet and to the point, and very well explained! Thank you for making these!
@FigmaBites2 ай бұрын
I’m so glad to hear it! Thanks for watching
@MariaZenkevich3 ай бұрын
Great bite! Is there a way to use string variables to manage content in a file from a central place?
@FigmaBites3 ай бұрын
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.
@HolographicKode3 ай бұрын
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 ?
@FigmaBites3 ай бұрын
I don't think so but I haven't tried that specifically.
@jdanielortega3 ай бұрын
Awesome content Chris, keep it coming!
@FigmaBites3 ай бұрын
Thanks! I appreciate hearing that.
@feelerino4 ай бұрын
thank you
@ytrpaz4 ай бұрын
great amazing.
@FigmaBites4 ай бұрын
Thanks!
@tinawei94894 ай бұрын
This tutorial is so helpful! love all your tutorials, short and on point!!
@FigmaBites4 ай бұрын
Thank you!
@Ravikiranks124 ай бұрын
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..
@FigmaBites4 ай бұрын
Once a branch is merged you can delete it. Best practice is to create a new branch for new changes
@Ravikiranks124 ай бұрын
Thank you🙂@@FigmaBites
@wallawallawilberforc4 ай бұрын
Thanks, super helpful!
@FigmaBites4 ай бұрын
Thanks, glad you found it helpful :)
@David-xq7ef5 ай бұрын
Figma is really a pain. They just have to add a value in px to the sticky option... damn
@FigmaBites5 ай бұрын
It can be for sure. Maybe they will add that option someday, who knows. You should send them that feedback!
@michaelahokas35375 ай бұрын
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?
@FigmaBites5 ай бұрын
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.
@kev165 ай бұрын
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!
@FigmaBites5 ай бұрын
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
@paulperole5 ай бұрын
such a time saver! thanks for this
@user-yu3di7ig8n5 ай бұрын
So helpful!! Thank you
@FigmaBites5 ай бұрын
Glad it helped!
@kamipixeltips94166 ай бұрын
Thanks
@FigmaBites6 ай бұрын
No prob!
@ZettabyteWebDesign6 ай бұрын
Really good video, sadly more than 1 mode seems to have been paywalled recently. May be worth adding a note
@FigmaBites6 ай бұрын
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.
@jsl15352 ай бұрын
Yeah I just noticed it too :( Not sure how to handle multiple themes in the free plan..
@kaylablock14256 ай бұрын
But doesn't that mean that you need to own the component?
@FigmaBites6 ай бұрын
Yes. If you have a different team making components, show them this technique. Or build your own and share it with them.
@davetaylor76646 ай бұрын
great stuff! great explainer for someone trying to get to grips with Autolayout!
@FigmaBites6 ай бұрын
Thanks!
@whennn6 ай бұрын
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
@whennn6 ай бұрын
oh and also add a border to the left part panel. that contains several components. and then good luck doing this lol
@FigmaBites6 ай бұрын
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-qd4oz1cl8n6 ай бұрын
God! I miss the double clicking from Adobre Creative Suite.
@FigmaBites6 ай бұрын
What is this referring to from this video?
@moxgalaxy7 ай бұрын
Figma's like the drunk uncle that you never know what to expect. Iv'e watched very few Figam videos where things matched up and actually worked. Even when you do get something to work you can be sure that it won't work the next day even if you've locked the file!!!
@FigmaBites7 ай бұрын
Ha! It do be like that sometimes. What’s the verdict on this technique, though? It’s based on how it works in the browser but even that can be tricky sometimes
@moxgalaxy7 ай бұрын
The technique is good no doubt @@FigmaBites
@mateuszbieniaszczyk44027 ай бұрын
Thanks! 😀
@FigmaBites7 ай бұрын
You are welcome!
@michaelschultze35957 ай бұрын
I'm still not sure what's going wrong. At 3:30 no "Create Swap ... " is displayed in the layer panel. 🤔
@FigmaBites7 ай бұрын
I'm renaming a layer in the lower portion of the layers panel to "🧩 Swap Me" and then I start setting up an instance swap property.
@michaelschultze35957 ай бұрын
@@FigmaBites My mistake was that I tried it directly at the instance 🙈
@FigmaBites7 ай бұрын
@@michaelschultze3595 happens to the best of us :)
@michaelschultze35957 ай бұрын
Due to my lack of English skills, I unfortunately have to watch the tutorail 3-5 times. BUT - it is by far one of the best tutorials ever. Step by step and also the descriptions around it ... NICE!!!
Пікірлер
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.
So useful. Thank you! 👏
Glad it was helpful!
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.
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?
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
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.
The Last tip was amazing❤
Right?!?
@@FigmaBites that last tip just changed my life!
@@jakebarlow7431 I know, right?!?
Very useful handsome guy. <3 Thanks!
Thanks!
Thanks for sharing nice little tricks
Thanks for the comment and happy learning!
Some much better method than getting rid of auto-layout and some more tricky stuff. Thanks!
Thanks!
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.
Love the channel!
Thank you so much, that's nice to hear :)
🤯🤯
😻
helpful series, esp. now that I'm back into product design and making prototypes!
Glad to hear it!
you've condensed a lot of info in this one! I had to watch it a few times :)
Yeah these were tough because there is a lot going on with variables. Luckily they are short enough to watch a few times through ;)
I hate rectangles :(
What does this have to do with the video?
Of ALL the Figma layout videos I've trawled - this is the best - thanks!
Thank you! I really appreciate hearing that
Basically remove the hidden button or element from your variant set because it cannot keep track of states
Essentially
I love your videos! Short, sweet and to the point, and very well explained! Thank you for making these!
I’m so glad to hear it! Thanks for watching
Great bite! Is there a way to use string variables to manage content in a file from a central place?
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.
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 ?
I don't think so but I haven't tried that specifically.
Awesome content Chris, keep it coming!
Thanks! I appreciate hearing that.
thank you
great amazing.
Thanks!
This tutorial is so helpful! love all your tutorials, short and on point!!
Thank you!
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..
Once a branch is merged you can delete it. Best practice is to create a new branch for new changes
Thank you🙂@@FigmaBites
Thanks, super helpful!
Thanks, glad you found it helpful :)
Figma is really a pain. They just have to add a value in px to the sticky option... damn
It can be for sure. Maybe they will add that option someday, who knows. You should send them that feedback!
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?
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.
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!
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
such a time saver! thanks for this
So helpful!! Thank you
Glad it helped!
Thanks
No prob!
Really good video, sadly more than 1 mode seems to have been paywalled recently. May be worth adding a note
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.
Yeah I just noticed it too :( Not sure how to handle multiple themes in the free plan..
But doesn't that mean that you need to own the component?
Yes. If you have a different team making components, show them this technique. Or build your own and share it with them.
great stuff! great explainer for someone trying to get to grips with Autolayout!
Thanks!
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
oh and also add a border to the left part panel. that contains several components. and then good luck doing this lol
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
God! I miss the double clicking from Adobre Creative Suite.
What is this referring to from this video?
Figma's like the drunk uncle that you never know what to expect. Iv'e watched very few Figam videos where things matched up and actually worked. Even when you do get something to work you can be sure that it won't work the next day even if you've locked the file!!!
Ha! It do be like that sometimes. What’s the verdict on this technique, though? It’s based on how it works in the browser but even that can be tricky sometimes
The technique is good no doubt @@FigmaBites
Thanks! 😀
You are welcome!
I'm still not sure what's going wrong. At 3:30 no "Create Swap ... " is displayed in the layer panel. 🤔
I'm renaming a layer in the lower portion of the layers panel to "🧩 Swap Me" and then I start setting up an instance swap property.
@@FigmaBites My mistake was that I tried it directly at the instance 🙈
@@michaelschultze3595 happens to the best of us :)
Due to my lack of English skills, I unfortunately have to watch the tutorail 3-5 times. BUT - it is by far one of the best tutorials ever. Step by step and also the descriptions around it ... NICE!!!