Office hours: Advanced prototyping

Подписаться 545 тыс.

Просмотров 32 тыс.

50% 1

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

Наука

Опубликовано:

3 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 26

@MoritzFischer 10 месяцев назад

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

@oleksandrashumakova1320 10 месяцев назад

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

@baturesolomon4687 10 месяцев назад

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

@blbriggs67 10 месяцев назад

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,

@geekdeelino 10 месяцев назад

Thanks for sharing this, was helpful 😊

@enterpriseux 10 месяцев назад

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

@fedeostan 10 месяцев назад

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?

@22browneye 10 месяцев назад

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

@Nastia_bilberry 10 месяцев назад

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 10 месяцев назад

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 10 месяцев назад

Thinking same

@BrianChristensen-yp9yw 10 месяцев назад

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_ 10 месяцев назад

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

@derp812 10 месяцев назад

What? It has millions of different uses

@imamrt6 10 месяцев назад

That's very helpful.

@nicholasdavidson2699 10 месяцев назад

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 10 месяцев назад

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?

@postcardposting 10 месяцев назад

thank you

@luciaalejandramartosreano6208 10 месяцев назад

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

@atkatsom8745 10 месяцев назад

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 7 месяцев назад

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 10 месяцев назад

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 10 месяцев назад

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

@AlexisMorin 10 месяцев назад

Should designers code? 🤔

@tofuComputer 10 месяцев назад

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.