Study Hall: Using variables in prototypes 101

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

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

50% 1

Follow along with the community file: www.figma.com/community/file/...
In this Study Hall, we cover the different ways that variables can be added when creating prototypes, and how you can use them to make them more dynamic and with fewer frames. We cover all of the currently available variable types: Booleans, numbers, text strings, colors, and even discuss how to bind string variables to interactive components.
00:00 Intro
00:20 Booleans
07:43 Numbers
13:49 Strings
18:46 Colors
20:56 Interactive Components
Figma is free for Students and Educators: figma.com/education
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

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@cguiux 11 месяцев назад

Although I initially find it easy to understand when I see it, I struggle to apply it effectively in real-life projects. As a non-coder, I believe there is a learning curve that I need to overcome. I hope to become proficient in these features soon and find them useful in my work. As always, top notch tutorial! Thank you, as I could use this tutorial as a guide whenever am in doubt. 👌👌

@user-ul1bz6rp9k 8 месяцев назад

This is the best variables in prototyping tutorial i have come accross. You are so clear and articulate when you speak and the examples you give are simple enough to understand without getting overwhelmed as its quite a complex new update :) Thank you!

@Freshhsocks 11 месяцев назад

I know it’s powerful but its also complicated. It’s going to take me some practice to wrap my head around this and all of the potential use cases.

@ericmunro7941 11 месяцев назад

This is a massive upgrade, everything I wanted! Now I don't need an extra prototyping tool for presentations. Thank you Figma!!

@saurabhhaldankar8564 11 месяцев назад

Love how the component sets are prototyped with variables. This is going to save a lot of time

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

I'm not in education but I find that features that are new to me are easier to understand in this series of Edu videos. Once I have the fundamentals, I can watch the 'regular' Figma tutorials.

@Phoca_Vitulina 6 месяцев назад

As a designer who started my journey as a developer, this is so awesome! I've been waiting so long for variables in prototypes in figma, and this is just wonderful

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

for example 1, i had no idea you had to right click the eye to access the booleans! I was expecting to see the little nut/cog thing. Thanks for showing us.

@fiordnord 11 месяцев назад

Miggi, great tut! Been waiting for a proper variables explainer! Love it

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

Such a helpful tutorial. Thanks so much, Miggi!

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

Super helpful, thanks for sharing! Also, never knew you could use cmd+R to rename layers 🤯

@arunb2938 11 месяцев назад

Really helpful need more tutorial like this from figma, thank you !

@victorayala_ 27 дней назад

Thank you for explaining this clearly and simply. I owe you a beer!

@creatoratplay 11 месяцев назад

Your tutorials are so helpful! Thank you!!

@austinlin42 8 месяцев назад

So complicated, but so excited to learn this!

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

Is there any way to control a more complex component that has some nested components in it using boolean variables or maybe a combination of boolean and string variables? Quick example: I have an overlay with a list of countries, this overlay is opened by a click on a dropdown field. I need to be able to click on a country in the overlay list and add a nested component inside the dropdown field and i need to be able to add more than one otherwise i could do it without any variables. It's a long shot and maybe i haven't provided all the details but any hint might help. Thank you.

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

Guys from Figma, you are awesome. Variables open up a lot of possibilities, and I really like that. However, it seems worth considering the ability to control the scope of variables. Yes, it adds complexity, but otherwise, we will end up with a very long list of variables and face naming issues.

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

Hello! Scoping is fully supported for number variables but will be expanded to other variable types in the future. Learn more about how to scope a number variable here: help.figma.com/hc/en-us/articles/15871097384471-The-difference-between-variables-and-styles#Supporting_features

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

@@Figma Thank you for the explanation

@alexlosev8940 11 месяцев назад

@Figma, please implement boolean inversion operator. It is faster to calculate value=NOT(value) than using conditionals.

@kavineesh12 11 месяцев назад

This is really helpful, would love it if you could create more about conditional prototyping where we can understand more about "If" and "else" cases, one more thing, the first prototype you created where you added 3 boolean actions, what if there are 50 images like this, then will we add 50 different variables?

@user-zj8sv4th3s 10 месяцев назад

Really helpful tutorial. Thanks so much.

@sukhbat.UxUi19 7 месяцев назад

Such a helpful video. I'm soo excited to learn those new features 😊👀🤩

@meiichanel4313 11 месяцев назад

Thank you so much! variable with component is awesome!

@kevinwee4941 9 месяцев назад

Really appreciate the demo!

@indusgod12 6 месяцев назад

thank you so much this will help me a lot in my projects

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

Kudos for great tutorial. This may create less frames but it takes forever to do, it's classic over engineering, so dunno how much of a progress this is for all practical terms. To me most of this variable stuff is identical to having props. The string example for instance is like a text prop. So what's supposed to happen with prop functionality now? Are they gonna live side by side?

@tokyobizkit6844 11 месяцев назад

Great update! How to do linkage /chain? By dragging one element to control the transparency displacement of another element to change? Thank u

@k16e 11 месяцев назад

When Figma becomes its own database.

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

hey, you did a great job with this video

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

great tutorial! thank you very much

@bbgec 11 месяцев назад

interactive components demo is 10/10.

@djashawe88923 11 месяцев назад

Thanks for the great tutorial! When I tried to replicate the first animation using different modes, I was able to turn the visibility of each image on and off, but I couldn't figure out how to make the "Show all" button to work. Does anyone know how to make this work?🤔

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

Personally, it's a little tricky to get my head around the fact that you hard code 'item 2' into the variable 'currentItem', but then 'item 2' magicaly becomes dynamic. I feel I need that explained a little more?

@hassamali8581 9 месяцев назад

Exactly this is where i also got confused. Those interactions spin me head hahahaa but cool trick i'm not sure if there is a better way to handle this.

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

incredible video!

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

How do you tie component states to conditional logic? It feels like a bug but for some reason, conditional logic breaks the component state interactions.

@hopemickiewicz7703 8 месяцев назад

Do you have any tutorials on creating calendars with variables?

@hariharan0220 9 месяцев назад

Thanks, Miggi 👏👍

@samuelyau1113 11 месяцев назад

Nice one Sensei 🙏

@figma-miggi 10 месяцев назад

Appreciate you!

@AJ-yj6kd 11 месяцев назад

Desperately need a copy button for statements inside interactions. It’s a pain to have to manually input the same condition with only a few tweaks.

@lityuga 6 месяцев назад

One note: dissolve animation is applied when the user clicks on the big images, but it does not appear when the user clicks on the small previews. Is there any way to use such type of animation on the bigger images when clicking the small preview buttons?

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

Miggi you are the real MVPPPPPPPPPP

@miggi-from-figgi 10 месяцев назад

❤

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

In the last example, I would like to know the value of the variable “selected item” change along with changing the navigation component set. That’s why is called two-way binding?

@sohankunjera1704 6 месяцев назад

Hey, in last example image & navigation components name(item1, item2..) are overlapping due to which I can't apply property to image instance and also facing issues in variable due to this.

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

Thanks, very useful.

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

Hi! How did you get your head to pop out from the explaining frame? Is there an internal software that you use?

@miggi-from-figgi 10 месяцев назад

I use OBS and a green screen.

@matrixtomato 11 месяцев назад

great video, please keep posting more to understand more usecases for variables, one question ... so far Booleans can only be used to Hide-Show components? is there any other use case?

@tehoko 11 месяцев назад

You can also use it for boolean properties. Let's say you created a card component, where one of the properties is "Compact", with values "True" and "False". Since Figma treats these as boolean values, you can bind a boolean variable to that property. As a result, you have a variable that toggles the compact mode on/off on your card component. Apart from that, you can use boolean variables in conditional logic.

@miggi-from-figgi 11 месяцев назад

Also if you have a component or layers within an auto layout, they will collapse when hidden.

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

Worst usability part is that you have "to guess" to right click on that visibility icon. Other than that whenever I replace a string variable with another string - it changes the font styling to regular - before it was bold. Why is that?

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

Excellent

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

At 18:27, second time you click the letters”S”, “W”,etc, why it doesn’t show “Hello world!” anymore when the variable still set to message + “S”, etc.

@jaslina6113 5 месяцев назад

This is a learning curve for me. I foresee that it will become more complex. As I am using the unpaid version as an individual user, I'm unable to practice variables and conditional prototyping. It would be beneficial if the free version could grant access to these features for individuals seeking to practice and learn.

@kishorekumar8216 4 месяца назад

hey you will have access to using variables and modes just by upgrading your account to education plan. go to settings and fill your education details and just click upgrade to education plan, don't worry about verification. you will have access :)

@jaslina6113 4 месяца назад

@kishorekumar8216 Hi K, Really? That's great, thank you for sharing! I have purchased it recently. Hopefully, I can get a refund or partial refund.

@Cx141 11 месяцев назад

clear tutorial

@z.chiron6927 9 месяцев назад

Oh,It is amazing.

@Ehsan.Mortazavi 9 месяцев назад

Thank you In the first example, how can we change the show icon to a hide icon when the image is hidden and switch back to show when it is back? I made a component for the icon with two states (show, hide) and defined the click action to switch but I think the click action of the instance which includes the conditional action overrides my initial switching action of the component.

@Ehsan.Mortazavi 9 месяцев назад

Found it. Remove any interaction between the component states. Use text variable to change the show/hide states with conditional action.

@M1keSummer 11 месяцев назад

Amazing!

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

Nice Rochester Hat👍

@figma-miggi 10 месяцев назад

Thanks! It was made by a former student of mine.

@sethdesign 8 месяцев назад

Awesome!

@maninoroozi3456 2 месяца назад

The interactive component set up is laggy and slow in my template. I tried other approaches but due to the complexity of our templates, the variable approach in general is not performing well. Hope it changes once it's out of beta.

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

Amazing

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

I've set everything on the last images swap variables, but when I do this 24:06 in stead of assigning the variable to it's respective matching image component, the variable name shows -currentItem- then it says "variable value doesn't map to variant". What could be the issue?

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

Never mind, I got the solution. I "wrongly" named the numbers. I had item 01 instead of item 1

@figma-miggi 10 месяцев назад

@@slack. no worries. It happens to the best of us. Not shown: many outtakes.

@claudiotorres2781 7 месяцев назад

The idea is to try to reduce the number of links in the prototype using Variables, that’s was the promise in the Figma show. The real thing is when you try to create a component with animation and Variables to reuse in your prototype like a main navigation or a side navigation this doesn’t work. For this reason, all of these examples Don’t have animations. Try to convert the last example for this slider into a component to reuse on other screens. The “currentitem” variable will be disabled for the instance inside of the “selected” component: item1, item2, and item3. You will get the message “Removed variant bindings from nested instances” The string variables do not work when you try to create smart animations.

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

How do you use this on a component that is being used multiple times on the same screen (eq list item)? As of right now when you have a condition to toggle (show/hide) that all instances of that component trigger the same condition so the component condition doesn't work independently per component instance.

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

apply the interactions to the instances, not the main component, provide different values for each. - Mig

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

@@Figma ok so I have to create multiple variables, name each of them differently. The variables have the exact same value (boolean [false]). Show/hide an input and image upload for each list item.

@user-ms4bb2dz1h 11 месяцев назад

I was wondering if this new variable feature allow us to create function that opens one accordion at a time among a bunch of accordions without creating repetitive variations for the component.

@chidorirasenganz 11 месяцев назад

You could already do that with interactive components

@blaskotron 11 месяцев назад

Yeah can make each accordion an instance that changes state on click.

@user-ms4bb2dz1h 11 месяцев назад

yeb I know but it requires tons of repetitive works. Say if I wanna have 6 accordions set then I need to have six instances for that interactive component and do loads of prototyping works. Not to mention if I'd like to have more than 6 accordions.

@user-ms4bb2dz1h 11 месяцев назад

Just thinking whether the variable and conditional features can easily solve it

@rybka_moya 9 месяцев назад

Thanks for bonus

@Levanooo 11 месяцев назад

It's a step forward but it still pains me to see that you need to create 3 separate variables just to toggle separate components on and off. You think you could just create 1 variable and reuse that per component, without it affecting the others. More complexity would definitely help, especially with longer item lists and tables, for example.

@KathBorup 7 месяцев назад

The explanations are kind of fast. In the 'component sets' example when I 'paste in place' I don't get the same version of the navigation that is in this example even though I copied the same one. I think I will try the last example again tomorrow.

@LaughingBull 11 месяцев назад

Thanks man, I was trying to copy/paste the interaction and it ended up copying the whole content of the nested object. Still not sure what isn't considered a mistake

@miggi-from-figgi 11 месяцев назад

If you have a variable that has been deleted, or removed, or that does not exist in the file. It may error.

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

It works but you have to click the bigger container for the interaction until the entire container is highlighted blue, then you can copy and paste

@PerlaBitar 9 месяцев назад

i'm facing the same issue

@koraljkadecarina3440 9 месяцев назад

With the copy/paste of number variable button +/- does not work for me

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

So does everything with variables attached need to be a component?!

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

copy pasting interactions doesn't seem to work on my end 😥

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

👏 👏 👏

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

🤯🤯🤯

@harishjena9185 9 месяцев назад

hi, how to set min value 0 in decrement?

@Figma 9 месяцев назад

You will need to write a conditional statement to keep the number from going below zero. Check out the next video in the series, its covered.

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

In couple of months we will see something with AI panel and you only need to write some prompts such as: Section with margin 80 / 12 columns/ two boxes, each box 76 width, etc. Next year probably. So you need to be more creative than manage a tool.

@person81045 11 месяцев назад

In 5 years, we're going to see Figma be able to host websites. Good bye Webflow and framer.

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

OH ! Why I can't copy the interaction? Its copying the whole + component.

@chrisbeltran6676 11 месяцев назад

chrisbeltran6676 1 second ago What up Miggi! Are there any workarounds for variables within prototyping to work with deep nested component instances? I want to get this to work with some of the components coming out of my design systems.

@user-oq6de8sd6y 11 месяцев назад

Yes some great new things but I continue to prefer Principleformac, more intuitive and it really lacks a timeline

@yuultube 11 месяцев назад

Who really cares

@chidorirasenganz 11 месяцев назад

Yeah I never thought timeline for design tools made much sense

@figma-miggi 10 месяцев назад

I also love principle for mac, depending what I am trying to demonstrate, prototype, I use a different tool.

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

I ❤ ur miggi

@person81045 11 месяцев назад

Damn Figma. Goodbye all other design software.

@user-ei7bq4is8m 6 месяцев назад

guy sounds like he occasionally remebers he should have a Brooklyn accent

@deka1337 9 месяцев назад

Ohuena spas no))

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

I find this feature to be so buggy that it's not even worth using

@attilabodi826 Месяц назад

Good tutorial. But the ux for this tool is so bad, its completely un intuitive, its upsetting, who made this mess?

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

Great tutorial - thank you. One thing I can't understand: can anyone explain to me how in the Component Set example the variable value is changed through interacting with the navigation component set? I got it to work, I just don't understand what was done to connect those two things.

@figma-miggi 10 месяцев назад

Basically the interactive component, during the prototype is not just read only, its current state will also write to/update the variable, changing it. Since both of the interactive component states are bound to the same variable, changing one, impacts the other.

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

@@figma-miggi Thanks for the rpely. That makes sense, although a little confusing at first.

@stefanofois-com 10 месяцев назад

The idea of having to copy and paste the interaction on each QWERTY button to add the value of the various letters is not very practical. IMHO It would be better if instead of taking the string 'Q' you could take the contents of the label. this.textLabel.

@figma-miggi 10 месяцев назад

You can do something similar with modes. Though still not practical for this explicit example. I will be doing a video on prototyping with modes.

@stefanofois-com 10 месяцев назад

@@figma-miggi Thank you!