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!)

____________________________________________________

Find us on ⬇️

____________________________________________________

#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #Config2023

[Mary]

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

[vaanresvaanica]

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

[Benfry]

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 !

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

[Emuepic]

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

[milksliced]

Figma teaching us all to become developers year by year lol

[theado]

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

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

[MikeDenton-zeps]

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?

[LukasFigely]

Amazing spekers and features ... love it

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

[kaushikmitra]

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

[Mattcm]

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

[RichardS]

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

[Aby]

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

[ShabirGilkar]

Wow Awesome! really would like to play with it.

[djashawe]

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.

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