Great video showing the power of variable prototyping! I hope to be at this level one day
@FigmaBites10 күн бұрын
You got this!
@flaviaazvdo933311 күн бұрын
Cool, thanks!!
@FigmaBites11 күн бұрын
You bet!
@maddiemaddocks248212 күн бұрын
I keep getting the message "Pasting inside the current selection is not possible" when trying to use the paste to replace (???)
@FigmaBites12 күн бұрын
@@maddiemaddocks2482 you can’t paste into a component instance
@maddiemaddocks248211 күн бұрын
@@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.
@JoskaBorbely18 күн бұрын
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?
@FigmaBites18 күн бұрын
@@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.
@JoskaBorbely18 күн бұрын
@@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
@FigmaBites18 күн бұрын
@@JoskaBorbely hmmm, can you share the file with me? I’d be happy to take a look
@jakebarlow743126 күн бұрын
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.
@FigmaBites26 күн бұрын
I agree!
@khimchongchung762227 күн бұрын
thank you. this is great
@FigmaBites27 күн бұрын
@@khimchongchung7622 right? Glad you liked it
@leilabbas_28 күн бұрын
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.
@FigmaBites28 күн бұрын
@@leilabbas_ I’m so glad you found my channel and enjoyed the tutorial! Thanks for letting me know
@midejumoАй бұрын
Jesus Saves, and He loves you all.
@FigmaBitesАй бұрын
Amen, brother
@midejumoАй бұрын
Unrelated: Your facial air is so so fascinating!
@FigmaBitesАй бұрын
Thanks, I appreciate the comment
@levitikon1Ай бұрын
Very well explained
@FigmaBitesАй бұрын
@@levitikon1 thanks!
@jakebarlow7431Ай бұрын
Excellent overview! That's a lot of info condensed into a snackable bite! Like a tasty protein bar!!! :D
@FigmaBitesАй бұрын
Thanks, Jake!
@jayreambonanza1991Ай бұрын
I was able to pull off a scroll animation that I initially thought impossible to do. Thanks to this video!
@FigmaBitesАй бұрын
Glad to hear it!
@SisiBisi-zh1cj2 ай бұрын
Thank you so much
@FigmaBites2 ай бұрын
You are welcome!
@ToxicQT2 ай бұрын
Even at 1080p this is hard to see the text on my phone
@FigmaBites2 ай бұрын
I could see that.
@SisiBisi-zh1cj2 ай бұрын
Thank you so much
@FigmaBites2 ай бұрын
You are welcome
@lauranixon202 ай бұрын
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?
@FigmaBites2 ай бұрын
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?
@teegees2 ай бұрын
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?
@FigmaBites2 ай бұрын
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
@scottshirk18572 ай бұрын
I wish you could apply properties to multiple selections. Now that would be handy.
@FigmaBites2 ай бұрын
I can imagine them adding that.
@misso55142 ай бұрын
So useful. Thank you! 👏
@FigmaBites2 ай бұрын
Glad it was helpful!
@thepersonsawyersmith2 ай бұрын
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.
@JonathanK9302 ай бұрын
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?
@FigmaBites2 ай бұрын
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
@FigmaBites2 ай бұрын
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.
@bearduo2 ай бұрын
The Last tip was amazing❤
@FigmaBites2 ай бұрын
Right?!?
@jakebarlow74312 ай бұрын
@@FigmaBites that last tip just changed my life!
@FigmaBites2 ай бұрын
@@jakebarlow7431 I know, right?!?
@tatsumo2 ай бұрын
Very useful handsome guy. <3 Thanks!
@FigmaBites2 ай бұрын
Thanks!
@oZenakos2 ай бұрын
Thanks for sharing nice little tricks
@FigmaBites2 ай бұрын
Thanks for the comment and happy learning!
@tanyacequi65562 ай бұрын
Some much better method than getting rid of auto-layout and some more tricky stuff. Thanks!
@FigmaBites2 ай бұрын
Thanks!
@RaphaelWeis-qt6jp3 ай бұрын
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.
@alfredosmith61073 ай бұрын
Love the channel!
@FigmaBites3 ай бұрын
Thank you so much, that's nice to hear :)
@alimarsad49673 ай бұрын
🤯🤯
@FigmaBites3 ай бұрын
😻
@jakebarlow74313 ай бұрын
helpful series, esp. now that I'm back into product design and making prototypes!
@FigmaBites3 ай бұрын
Glad to hear it!
@JakeBarlow3 ай бұрын
you've condensed a lot of info in this one! I had to watch it a few times :)
@FigmaBites3 ай бұрын
Yeah these were tough because there is a lot going on with variables. Luckily they are short enough to watch a few times through ;)
@mariocontessotto64923 ай бұрын
I hate rectangles :(
@FigmaBites3 ай бұрын
What does this have to do with the video?
@esbenrose4 ай бұрын
Of ALL the Figma layout videos I've trawled - this is the best - thanks!
@FigmaBites4 ай бұрын
Thank you! I really appreciate hearing that
@ratsuns28284 ай бұрын
Basically remove the hidden button or element from your variant set because it cannot keep track of states
@hatefulcrawdad14 ай бұрын
Essentially
@user-jy8yi9ou5r4 ай бұрын
I love your videos! Short, sweet and to the point, and very well explained! Thank you for making these!
@FigmaBites4 ай бұрын
I’m so glad to hear it! Thanks for watching
@MariaZenkevich4 ай бұрын
Great bite! Is there a way to use string variables to manage content in a file from a central place?
@FigmaBites4 ай бұрын
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.
@HolographicKode4 ай бұрын
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 ?
@FigmaBites4 ай бұрын
I don't think so but I haven't tried that specifically.
@jdanielortega5 ай бұрын
Awesome content Chris, keep it coming!
@FigmaBites5 ай бұрын
Thanks! I appreciate hearing that.
@feelerino5 ай бұрын
thank you
@ytRap0075 ай бұрын
great amazing.
@FigmaBites5 ай бұрын
Thanks!
@tinawei94895 ай бұрын
This tutorial is so helpful! love all your tutorials, short and on point!!
@FigmaBites5 ай бұрын
Thank you!
@Ravikiranks125 ай бұрын
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..
@FigmaBites5 ай бұрын
Once a branch is merged you can delete it. Best practice is to create a new branch for new changes
@Ravikiranks125 ай бұрын
Thank you🙂@@FigmaBites
@wallawallawilberforc6 ай бұрын
Thanks, super helpful!
@FigmaBites6 ай бұрын
Thanks, glad you found it helpful :)
@David-xq7ef6 ай бұрын
Figma is really a pain. They just have to add a value in px to the sticky option... damn
@FigmaBites6 ай бұрын
It can be for sure. Maybe they will add that option someday, who knows. You should send them that feedback!
@michaelahokas35376 ай бұрын
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?
@FigmaBites6 ай бұрын
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.
@kev166 ай бұрын
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!
@FigmaBites6 ай бұрын
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
@paulperole7 ай бұрын
such a time saver! thanks for this
@user-yu3di7ig8n7 ай бұрын
So helpful!! Thank you
@FigmaBites7 ай бұрын
Glad it helped!
@kamipixeltips94167 ай бұрын
Thanks
@FigmaBites7 ай бұрын
No prob!
@ZettabyteWebDesign7 ай бұрын
Really good video, sadly more than 1 mode seems to have been paywalled recently. May be worth adding a note
@FigmaBites7 ай бұрын
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.
@jsl15353 ай бұрын
Yeah I just noticed it too :( Not sure how to handle multiple themes in the free plan..