@parcival
As an Axure user for 8 years, I have been really waiting for variables in Figma. Well done!
@rapidlightning2841
I really love how far prototyping is going, but it also scares me because it got so complicated.
@frankthedsigner558
It is fascinating to see how Figma encourages designers to get more involve in adding logic to their design components. Not only does this make handoff to developers a breeze but motivates designers to think and really understand their designs, and how it needs to function for the platform their designing for.
@TinyLittleMaggie
Love these advanced prototyping functionalities! Small nit - in case anyone's wondering - in this tutorial, I find the variable names for the basket/cart very confusing. Let's say on the World Peas website, we can add watermelons to our Basket by clicking on the "Add to basket" button. (Let's not call anything a "Cart" anymore - not in the UX copy, not in any of the variables/properties) Starting from 9:34, Our goal is to create an interaction like this: if you click on the "Add to basket" button, the appearance of the "Basket" button at the top updates to indicate that there is (at least) one Item in it. Calling the local variable "Has cart" and the Basket button property "hasCart" doesn't make sense to me. (You can't say "The basket has a Cart "; you can only say "The basket has an Item in it".) If you're watching this video and you're like "What does 'Has Cart' mean??", replace it in your mind with "has item", and maybe it will make sense :)
@mrbobcr
This is amazing. And is also a great effort to get designers close to JavaScript concepts and probably have better communication with developers.
@Dsmaxwannabe
You can also make prototype mode semi responsive by creating a window variable and changing it's value on key press in prototype mode to change your designs width
@johnvine6760
Really love the new Variables feature, it feels like a big step on the journey to bringing design and code closer. One small observation: binding visibility into a layer by right clicking on the visibility icon doesn't feel entirely intuitive. Right click always feels like a great go-to option but maybe not the first, most intuitive choice?
@shahiferdous
Wooo!! I think this might be the first step where Figma evolves into a no code app development platform 🎉🎉
@daria_bondar
Looks a bit complicated but we'll see how it goes. For those saying that it's dev work and a designer doesn't need this level of complexity: I quite disagree. Realistic prototype is required for a proper user testing plus it helps tremendously to demonstrate how something should work. Remember that not everyone works on simple things like websites. My current project is a very complex market research platform with lots of calculations and interactions. A realistic prototype of a feature within it will help 1) the client to understand how the feature exactly works 2) me to check if the whole experience is intuitive, reasonable, and just good enough. That said, I agree with the comments that the way it's implemented doesn't look intuitive at first sight. For complex designs, it probably will be a bit of a headache
@frcike
I remember that day, when I tried figma for the first time. I have no idea what date it was. But I was quite early. And her dress was so nice. It was love from the first sight. And it just keep growing.
@marcoc7388
THIS IS AWESOME! I hope you include animation options for variable prototype interaction soon. :hand-pink-waving:
@imvikasraj
I was right when I decided to choose UX design as my full time career after studying computer engineering! The line between design and development are going to be thinner and thinner going forward. It’s interesting on how prototyping has come along way. I remember how painful it was for me to iterate on my invision prototypes!
@NeskensCavallini
This is really cool - But I'm curious about how Figma handles the various screen variations during the handoff process for developers. Will they need to constantly run variables to see the different cases and screens? This is a new feature for Figma, but it's not for the industry. As an Axure user, I'm aware that Axure generates exported technical documentation that supports each variation, connections and interactions. Does Figma offer a similar feature? How will developers quantify their effort based on the screens? How will they become familiar with all the variations?
@pepa007
OK we need a couple more things: 1. Component instance variables = values that live only inside an instance of a component, 2. onChange trigger on variables, and/or 3. toggling component variants based on logic on top of bound variable. Oh and 4., we need this on instances nested in other symbols, not just standalone instances. Example use case: Want to create tabs. Need numeric instance variable activeTab storing index of active tab (alternatively string variable storing the label of active tab). Clicking individual tab in the tabs component changes the activeTab index to given number. (note all this is possible with "local variables", but would be needed on component level.). Final step: toggling individual tab variant based on activeTab value. Meaning if activeTab value changes from 2 to 3, tab no. 3 registers that activeTab == 3 and toggles its variant from default to active. At the same time, tab no. 2 needs to be observing changes to activeTab value, then finds out activeTab != 2 anymore, and toggles its variant from active to default.
@RydvanskyAndrew
No way!!!! yeeeesss!!! finally!!!!! I've been waiting fo it for 10 years
@kingako
quite complicated to learn. I wish you guys in figma continued easy and neat toolkit
@pungpor
This is great! I need to refresh my knowledge about writing if/else conditions. It's not just a design; it's going to be an app development. 🇹🇭🎉
@sibisanjay
Finally Axure found a prototyping competetior. Way to go Figma!
@mageKnightz
The fact that they correctly named it "Local Variables" for variables in the file gives me some hope that there are some plans for GLOBAL variables down in the road... :D
@tanbarc