I've successfully transitioned my carousel galleries with multiple nested components to a single component that uses variables+conditionals. In just one component, well two if you include the main component that holds the images.
Great to see this new feature although the demo still doesn't solve one of the most common needs... SELECTING A SINGLE ITEM FROM A LIST. How can you create an interactive component (such as a group of radio buttons, or a navigation menu) that can select a single item from a list of 12 items without needing to create 132 connections?
Hi Figma, thanks for the updates. Where can I find the Miggi's example Figma files? I am stuck at 34:12 so I want to expand the collapsed interactions to see the whole interactions. How was he able to assign the string type variable, "load_percent" to a number type variable, "load_value"? That's the part that's confusing.
Except from some rare contexts I don't really see how this solves an endless amount of linked frames for the most part. 90% of the times I don't make counters and stuff like that. I make common interaction patterns that we all know is the bread and butter of UI design. They need to make working with interaction simulation much easier. Also, prototyping needs to be more stable. Every time I hit that prototype play icon I expect to see linked frames skipping left and right, up and down, when clicked. They don't stick to the same position. Same if it's 100% view or zoomed, each click change results in the frame changing position, either alot or slightly. Figma is great for operating DS's and for collaboration but for UI prototyping it still sucks on a daily. I miss XD every time I need to prototype something but I'm forced to use Figma now due to the project. I gave these variables a try and it didn't work, it didn't connect to my existing color tokens, it didn't find any of the established names in the token section, it didn't work basically. Bugs bugs bugs. There's Figma for'ya.
Another thing I noticed is that I'm not able to build in simple hover states with variables based on a component from our design system. I now have to detach the parent component in order to apply those.
Has anyone been able to successfully copy and paste the prototype interactions like the demo? I tried following the Figma documentation by using CMD+Control+C, but it doesn't seem to work.
Copying and pasting the prototype doesn't work for me, it copies the button and pastes it inside my component, I clicked on the left too, but it doesn't work for me, someone please help me
It is buggy. Create a second interaction. You will see a burger menu next to each interaction when you add more than one. Clicking on burger menu lets you select it as described in the video.
After working a while with variables, it really strikes me that there is just a global scoping context form them. You just can't use them in components or variants :/
The loop back demo is such a clusterfuck. How can they demo this with a straight face? And how can there not be "local" component specific (instance) variables that can be set via actions? I can probably solve my "group selection" problem a little bit easier now using the loop back hack, but this still feels like a giant missed opportunity to fix prototyping in Figma. Luckily for them, no one else seems to get it right either...
No local component instance variables is a huge drawback... Playing with the variables there is also a lot of limitations on the logic. It doesn't seem that a conditional +1 iteration can exist alongside a value reset either.
Wow :) Figma can do now coding :) visually kinda .. why not open up a coding window to edit code directly? If the designers really don't want to touch code and do developer's job, then is this visual coding with variables so much of a departure from coding? A desinger would have to learn a little bit of coding after all no matter what to make the prototyping more complex and effective. Perhaps one day AI will do both design and code so the creator (desinger+developer) would only have to give prompts to the AI tool to prototype and create apps.
These are cool but SOOO BUGGY right now. Can't set Change To as a later action after Set Variable. Can't assign transition types on instances that are tied to variables. Changing the size of an object based on variables ignores Constraints. But the biggest one thats driving me nuts is that I can't assign Variable to an instance unless that instance is NOT nested in another component (seriously??) These features need way more time in the oven.
I don't know why figma is developing these features. Figma is not a final product. You can save much time just by communicating directly to developers rather than multiple clicks for prototypes.
Thank you so much dear Ricky and dear Miggi. This video was awesome because you explained the premise so well.
Miggy is a true story teller. And for Ricky, that's a remarkable moment of her career. Congrats !
Miggy you are my life savor! Thank you Figma team for these videos!
Great work, bridging the gap between design and dev!
Maybe this will finally make more designers care about prototyping and creating more sophisticated experiences
This is actually game changing! So keen to play with this.
Thank you so much for these features! Excited to see them expand in the future.
Hi Miggi, please publish your demo file to the community. Thank you so much
Did this file get posted? I don't see him looking at the cart total
I've successfully transitioned my carousel galleries with multiple nested components to a single component that uses variables+conditionals. In just one component, well two if you include the main component that holds the images.
This is actually game changing! OMG
Figma teaching us all to become developers year by year lol
true af lol 🤣🤣
Cuz that's easier than making designers out of developers.
@@Underhills Do you think? development is harder than design IMO. It's just a lot of devs are aesthetically challenged.
@@vickyb56830:15
😊
What about text input / text strings?! Would love to be able to support keyboard inputs to set a variable.
Amazing spekers and features ... love it
Thanks Ricky for the conditionals!!
Navigrate. Confishionals. Love it.
Great to see this new feature although the demo still doesn't solve one of the most common needs... SELECTING A SINGLE ITEM FROM A LIST.
How can you create an interactive component (such as a group of radio buttons, or a navigation menu) that can select a single item from a list of 12 items without needing to create 132 connections?
It's really amazing how they can release these features without catering for this super common case!
But variables let you build that with 1 click and 0 connections.
Loving the Zelda Tears of the Kingdom references at 39:00 😊
Hi Figma, thanks for the updates. Where can I find the Miggi's example Figma files? I am stuck at 34:12 so I want to expand the collapsed interactions to see the whole interactions. How was he able to assign the string type variable, "load_percent" to a number type variable, "load_value"? That's the part that's confusing.
UXPin and other platforms have had this for YEARS, glad Figma has finally caught up.
Awesome! but can you give some example of using color variable?
Got it!
I dont have smart animation in my gallery, when i use variable button's
Except from some rare contexts I don't really see how this solves an endless amount of linked frames for the most part. 90% of the times I don't make counters and stuff like that. I make common interaction patterns that we all know is the bread and butter of UI design. They need to make working with interaction simulation much easier. Also, prototyping needs to be more stable. Every time I hit that prototype play icon I expect to see linked frames skipping left and right, up and down, when clicked. They don't stick to the same position. Same if it's 100% view or zoomed, each click change results in the frame changing position, either alot or slightly. Figma is great for operating DS's and for collaboration but for UI prototyping it still sucks on a daily. I miss XD every time I need to prototype something but I'm forced to use Figma now due to the project. I gave these variables a try and it didn't work, it didn't connect to my existing color tokens, it didn't find any of the established names in the token section, it didn't work basically. Bugs bugs bugs. There's Figma for'ya.
Another thing I noticed is that I'm not able to build in simple hover states with variables based on a component from our design system. I now have to detach the parent component in order to apply those.
21:17 this is what i learned first day at C language class😮
Has anyone been able to successfully copy and paste the prototype interactions like the demo? I tried following the Figma documentation by using CMD+Control+C, but it doesn't seem to work.
Yeah btw it’s just CMD+C. And you have to play around with the interaction a little bit to select it properly when copying and/or pasting.
You have to make sure you click that one little space that makes the selection turn blue first before you copy
Wow Awesome! really would like to play with it.
anyone has link to the calculator's file in community? I can't find it anywhere
Copying and pasting the prototype doesn't work for me, it copies the button and pastes it inside my component, I clicked on the left too, but it doesn't work for me, someone please help me
It is buggy. Create a second interaction. You will see a burger menu next to each interaction when you add more than one. Clicking on burger menu lets you select it as described in the video.
After working a while with variables, it really strikes me that there is just a global scoping context form them.
You just can't use them in components or variants :/
The loop back demo is such a clusterfuck. How can they demo this with a straight face? And how can there not be "local" component specific (instance) variables that can be set via actions? I can probably solve my "group selection" problem a little bit easier now using the loop back hack, but this still feels like a giant missed opportunity to fix prototyping in Figma. Luckily for them, no one else seems to get it right either...
No local component instance variables is a huge drawback... Playing with the variables there is also a lot of limitations on the logic. It doesn't seem that a conditional +1 iteration can exist alongside a value reset either.
yep
Great
Wow :) Figma can do now coding :) visually kinda .. why not open up a coding window to edit code directly? If the designers really don't want to touch code and do developer's job, then is this visual coding with variables so much of a departure from coding? A desinger would have to learn a little bit of coding after all no matter what to make the prototyping more complex and effective. Perhaps one day AI will do both design and code so the creator (desinger+developer) would only have to give prompts to the AI tool to prototype and create apps.
Bone Thugs! Yeaaah!
Wow
Can I upload this on my channel
Wow
Does anyone remember Macromedia flash?
Now we can't flex our gigantic spider web to devs..which had only 4 interactions
I wish it didn't have a million bugs!
One thing comes to mind. Feature creep.
These are cool but SOOO BUGGY right now. Can't set Change To as a later action after Set Variable. Can't assign transition types on instances that are tied to variables. Changing the size of an object based on variables ignores Constraints. But the biggest one thats driving me nuts is that I can't assign Variable to an instance unless that instance is NOT nested in another component (seriously??) These features need way more time in the oven.
I don't know why figma is developing these features. Figma is not a final product. You can save much time just by communicating directly to developers rather than multiple clicks for prototypes.
Bone Thugs-N-Harmony
Another thing I won’t use.
So basically you copied a lot of Axure's features into Figma.
lots of fancy words, over a decade behind in your approach.
Why the people need to show there support to the pride months, we support many activities but don't show.