Advanced prototyping with less complexity with variables - Miggi, Ricky R, Garrett M (Config 2023)

Speakers:
Miggi (Miguel Angel Cardona Jr.) - Designer Advocate, Education, Figma
Ricky Rajani - Software Engineer, Figma
Garrett Miller - Product Manager, Prototyping, Figma
Join us for an in-depth session to learn how to build even higher fidelity prototypes with less complexity (read: less interactions!)
Please visit config.figma.com/video-on-dem... to view ASL version of this Config 2023 session.
Figma is free to use. Sign up here: bit.ly/3msp0OV
____________________________________________________
Find us on ⬇️
Twitter: / figma
Instagram: / figma
LinkedIn: / figma
Figma forum: forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #Config2023

[@uploadsadlibitum6264]

Figma teaching us all to become developers year by year lol

[@dududu5788]

true af lol 🤣🤣

[@Underhills]

Cuz that's easier than making designers out of developers.

[@vickyb5683]

​@@Underhills Do you think? development is harder than design IMO. It's just a lot of devs are aesthetically challenged.

[@LarryStevenSaxon-mz6yj]

​@@vickyb56830:15 😊

[@Benfry57]

Maybe this will finally make more designers care about prototyping and creating more sophisticated experiences

[@EnesKab]

Miggy is a true story teller. And for Ricky, that's a remarkable moment of her career. Congrats !

[@Emuepic]

This is actually game changing! So keen to play with this.

[@Mary55113]

Thank you so much dear Ricky and dear Miggi. This video was awesome because you explained the premise so well.

[@MehboobRiaz]

Great work, bridging the gap between design and dev!

[@jordanroywhite]

Thank you so much for these features! Excited to see them expand in the future.

[@vaanresvaanica]

Hi Miggi, please publish your demo file to the community. Thank you so much

[@cjohndesign]

Did this file get posted? I don't see him looking at the cart total

[@theado3183]

Miggy you are my life savor! Thank you Figma team for these videos!

[@exgeeinteractive]

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.

[@madhumia1196]

This is actually game changing! OMG

[@LukasFigely]

Amazing spekers and features ... love it

[@MariaReyddsign]

Thanks Ricky for the conditionals!!

[@markusgaderbauer8409]

Got it!

[@ShabirGilkar]

Wow Awesome! really would like to play with it.

[@Mattc0m]

What about text input / text strings?! Would love to be able to support keyboard inputs to set a variable.

[@TheCds777]

Navigrate. Confishionals. Love it.

[@MikeDenton-ze5ps]

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?

[@MrMartinjo]

It's really amazing how they can release these features without catering for this super common case!

[@Drjhwatson]

But variables let you build that with 1 click and 0 connections.

[@djashawe88923]

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.

Great

[@richardsilcock7791]

UXPin and other platforms have had this for YEARS, glad Figma has finally caught up.

[@A22by7]

Loving the Zelda Tears of the Kingdom references at 39:00 😊

[@kaushikmitra6402]

Awesome! but can you give some example of using color variable?

[@Underhills]

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.

[@gospoda2]

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.

[@sauravchhangani]

21:17 this is what i learned first day at C language class😮

[@GurdevSambali]

Bone Thugs! Yeaaah!

[@HolographicKode]

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.

[@Des0war0ich0netAgentNoMiss]

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 :/

[@omotayoyohan3217]

Wow

[@user-ff8nw4mu6j]

anyone has link to the calculator's file in community? I can't find it anywhere

[@MrMartinjo]

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...

[@deeawn6051]

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.

[@Leafjade]

yep

[@alaliphotographics]

Wow Can I upload this on my channel

[@MrBelisa11]

I dont have smart animation in my gallery, when i use variable button's

[@SubinSyd]

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.

[@sbpate6]

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.

[@jacquelinetse]

You have to make sure you click that one little space that makes the selection turn blue first before you copy

[@BrunoFelicio]

One thing comes to mind. Feature creep.

[@miguelbernuy834]

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

[@KeshaLukin]

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.

[@Goose-wedding]

I wish it didn't have a million bugs!

[@neerajnegi8747]

Now we can't flex our gigantic spider web to devs..which had only 4 interactions

[@andrewstrasser]

Does anyone remember Macromedia flash?

[@minkim5651]

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.

[@kevinmcgrath9109]

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.

[@bradmacdonald6591]

Bone Thugs-N-Harmony

[@Victor.Seferidis]

Another thing I won’t use.

[@nofavors]

So basically you copied a lot of Axure's features into Figma.

[@heartsbox]

lots of fancy words, over a decade behind in your approach.

[@whomi2379]

Why the people need to show there support to the pride months, we support many activities but don't show.