Office hours: Advanced prototyping

Learn about the new advanced prototyping features shipped at Config 2023 by building an e-commerce experience! Follow along and use this file to build your prototype: www.figma.com/community/file/...
Check out the playground file here: www.figma.com/community/file/...
0:00 Introduction
0:34 Resources and keyboard shortcuts
4:05 Basics of advanced prototyping
10:15 Building it together
42:52 Wrap up
44:40 Q&A
56:07 Closing
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

[@MoritzFischer]

Thank you so much for this amazing demo and sharing the Figma templates. So helpful! Thank you 🙏

[@oleksandrashumakova1320]

That is awesome! Something that we were waiting for so long! Thanks, great tutorial! Kind of visual programming :)

[@baturesolomon4687]

I'm having trouble with prototyping. I'm confident this video will help me out. Cheers

[@geekdeelino]

Thanks for sharing this, was helpful 😊

[@blbriggs67]

Thank you for this! Learned some new things I don't know how I would have learned otherwise (visibility with booleans!!). I wonder about making scrolling appear real - I'm thinking something combining a click interaction on a scrollbar setting show/hide states of elements stored in an autolayout. The inability to reach nested components is a challenge,

[@enterpriseux]

is there a plan to allow to apply variables to objects coordinates Y/X ? Currently its only working for width / height

[@fedeostan]

Hi! Amazing video! Super clear and easy to understand. I have a question dough. Why is that in the minute 42 when we add the interaction to the minus button we add to the total instead of subtract?

[@Nastia_bilberry]

I still have trouble understanding how this feature can help in designs other than e-commerce. I don't see any organic ways to integrate it to my fintech prototypes

[@matrixtomato]

yeah, I am also facing the same issues, all tutorials from figma are only addressing the Cart counter use case, Would love to see others use cases

[@syednouman7053]

Thinking same

[@BrianChristensen-yp9yw]

I expect responses like this. This is a training problem. When you teach people to use a tool to get a specific result they'll be able to replicate and get the same result. This is helpful but because they haven't been taught the fundementals of how each piece works they will have difficulty being creative with it. It is far better to spend more time talking about how each piece actually functions and showing that function of the individual piece. After you've done that you can show an example or much better you can show several differing examples of what can be accomplished with the building blocks they now know.

[@abdullahwasi_]

@@BrianChristensen-yp9yw Agreed, I didn't really understand until I scratched an old prototype made manually and remade it from scratch with variables.

[@derp812]

What? It has millions of different uses

[@imamrt6]

That's very helpful.

[@22browneye]

This is really complicated to remember, is there any way to set a stone for all the use cases ?

[@postcardposting]

thank you

[@luciaalejandramartosreano6208]

Hi. Thank you so much. For any reason, my cart get hided after I add an item. Would anyone could help me please?

[@nicholasdavidson2699]

Would be great to see how variables could be used besides e-com carts, carousels, and loaders..It's all I've seen so far.

[@mrrrksmith]

I repeated everything exactly. But for some reason, the number in the basket does not work correctly. For some reason +2 is added instead of +1. Although the set variable clearly says +1. What is the problem?

[@atkatsom8745]

Someone managed to make a desktop menu nav with menu items that have hover state AND highlights current page as well? On paper all these variables are interesting but in practice so far I found they kinda miss the mark on the "rapid" part of rapid prototyping and make everything super abstract and complicated.

[@madalinaburciu9913]

Hey, I've managed to do the menu nav like you described. You need two main components (the navigation bar, and the menu items) the menu item component will have 3 variants (default, hover and active/selected) and prototype only the hover effect. Use the default menu item variant in your component navigation bar and link it to the corresponding page. For your navigation bar, you can either reveal the nested components from the component's properties (to have them handy on the side) or select each individual one when you need it. On the corresponding page, select (either from the nested components, or directly on the design) the menu item you'd like to change the variant to "active/selected". Hope that makes sense :)

[@BaptisteDemarest]

Is it just me or the linked Figma file isn't the same than the one presented in the video ? It's also on Advances Prototyping but without the cart flow.

[@kavineesh12]

Yes the file is different so it is tough to practice the same

[@blackshirtdesign]

So how exactly do we do this "count" thing in a shopping cart when there are a ton of products? Figma allows us ONLY FOUR MODES. So what is the alternative? We built a complex and really sweet counter with plus/minus. BUT it changes every other counter on the page too...this is because there is no way to set a mode on our many products. What is the solution?

[@AlexisMorin]

Should designers code? 🤔

[@tofuComputer]

This is a very poor tutorial that is difficult to follow. Why? Because too much time is spent showing vs doing one step at a time. Please learn some teaching techniques.

[@yasirarafat4188]

You can't say like that. It was wonderful tutorial.