Figma Variables & Advanced Prototyping - Crash Course

Подписаться 1,1 млн

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

50% 1

bit.ly/3CPOIaD 👈 Design like me. Use "UI2023" for 23% Off!
designcourse.com/af 👈 My upcoming "Advanced Frontends" Course
-- Today, we're going to embark on a crash course where you'll learn Figma's new variables, modes, collections, and advanced prototyping with conditional logic. There's a lot to unpack here, so I made it as easy as possible to follow along.
Grab the follow along project here:
www.figma.com/community/file/...
0:00 - Intro
0:26 - Grab the file
0:50 - Project 1 - Like Button
5:52 - Project 2 - Cart
13:25 - Project 3 - Dark Mode Toggle
16:49 - Project 4 - Boolean Toggle
23:22 - Project 5 - Color Modes
Let's get started!
#figma #prototyping
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

Хобби

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

14 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Who else thinks it's just a matter of time before Figma competes in the no code space? Ie webflow/framer

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

Exactly what came to mind watching .. Yes

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

I've already seen someone make a playable Flappy Bird in Figma so, yeah, absolutely.

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

They're already partnering with Framer so I wouldn't be surprised if they expanded on that partnership to compete more in that space.

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

Great video, very easy to follow. Along with this and other figma elements admittedly I've been feeling a little overwhelmed recently, content like this is a great help, subscribed

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

Thank you!!! This was one of the best tutorials I've seen of the new Figma features!

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

Quick tip: for the Purchase A License example it would have been better to make the Cost the cost of a seat $39 and then add a totalCost which would have bean seatCount * Cost. It's more future proof because if the seat cost changes, you only need to change one variable

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

Gary, you are talented ! Thank you for doing this. Watching your videos have always been instrumentsl to my design growth ❤💡

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

Best crash course on Variables and Conditions I've found. Thanks! 👏

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

Thanks for sharing! Wow - so nice to see and get an understanding of the new features.

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

23:00 Just a quick tip: you do not necessarily have to choose a different transition mode. You just need to move the _Set Variable_ interaction up (so that it comes before animation).

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

Thank you so much, Gary! This is incredible and now I understand how to work with variables and advanced prototyping. Thanks again.

@EMMANUELKIPNGENO-si6me 10 месяцев назад

You deserve the very best, you have really improve my skill. Once again thank you.

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

This video was PERFECT. Thanks a lot I've just discovered your channel and subscribing right NOW. :)

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

Truly enjoyed this tutorial. You made so many errors, I was laughing while learning it. Amazing work, thank you!

@daferichards 3 месяца назад

Thank you so much for the tutorial. I especially enjoyed and learned a lot from the mistakes you made while trying to teach. It helped me understand the process and also troubleshoot what steps I missed or didn't add while I tried to replicate. Thank you! ❤

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

Great tutorial - thank you ever so much!

@DGFactsZone 3 месяца назад

this is awesome stuff I found.. just loved this

@creativelizzy.wonder 9 месяцев назад

Thank you soo soo very much. This made my day honestly. God bless you !

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

Thanks Gary, very helpful.

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

On project four, the reason you couldn’t use smart animate was because of the order of the prototype triggers. Any trigger that deals with “change to” has to be last in the list If you’re using variables + smart animate

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

Super helpful, thanks!

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

Figma is definitely going to become a no-code tool by next year

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

my thought exactly

@user-on8gh2yv6s 9 месяцев назад

After evaluating their new tool it might take more than that, there is more needed to be compared with protopie or framer, etc at this point is good for layout

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

Thank you for video! It is very useful!

@ehsantalebi8383 2 дня назад

great as always

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

Thanks for this video 💜

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

Great video! 😊🙏 instantly helped to improve the prototype I'm working on 🥳 one thing I have a question about, in case there are multiple cases in the design where the like button would be used, is there a way to make each of them independent from each other without having to create a separate number variable and individual component to each use case? Now if I apply same component throughout all of the items, once the like button is clicked on one of them, the like count is increasing for all. Would really appreciate a tip on how to solve that 😊

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

Awesome Tutorial

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

Great video, thanks

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

Ultimate thank you

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

Thanks for putting this together! I found it very helpful. Quick question: In the case of the Boolean toggle, do you need to create a separate toggle component for each Boolean being applied? For example, if there were two avatars instead of one and I wanted one to be visible while the other is not, would I need to two separate components or can it be done with two instances of the same component?

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

This is an awesome tutorial

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

For the Dark Mode Toggle section (or for color variables in general), is it possible to do a color FADE instead of an instant swap? I suppose I don't really understand why the color variable change wouldn't come with an option to set it to "smart animate" The specific use case for me is...I want to animate one of my color styles upon the click of a button. I can currently do that by doing a "set variant" action, but it is instantaneous. I couldn't find any other way to pull this off, as Figma doesn't allow you to tie the visibility of a fill layer to a Boolean within a color style.

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

Awesome awesome stuff

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

i learned more in thank you

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

Thank you

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

thanks learn a lot

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

Great video! Is there a way to publish these interactions with conditions and variables to a team library? When I use these components in my projects the interactions don't work

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

Thanks!

@ellycooke2634 29 дней назад

The shopping cart worked thank you. Did you use an auto layout set up to include the dollar sign?

@BrunoAlves-uy3sl 10 месяцев назад

Amazing content. As a suggestion it would be great avoiding or removing quick flashes. It might be a bad thing for people with epilepsy.

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

Figma on some vibes!!!

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

Thank you very much ! My teacher sucks ! You saved my life

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

Man this is great! however I can't do the variable prototyping cuz I'm on the free Figma version lol!

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

gg figma, gg dude for making the video also.

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

Very insightful, and easy to follow. In the second example, you didn't touch on how you connected the +1 variable to the overall cost ($39). I understand the +1 and -1 variables, but how did we connect +39 such that when we increase the number of items in the cart, it increases the cost? Can you provide some clarity please?

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

It's actually explained in the tutorial, it's just a matter of adding another $39 variant, you can watch the video again

@KristianTheDesigner 14 дней назад

Great tutorial. i find the whole variables thing in figma to be quite overcomplicated. Lets say i would like a component that contains two versions of a card; unselected and selected. i have a button that is outside of this component, but i want said button to control what version is being showed based on click on or off. You would think you could set up the state of the card variants (unselected === false, selected === true) then set the button variable to set that boolean to true....and that is it. but no?

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

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

When will Adobe make figma standard in CC? WIll XD be merged into figma?

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

What‘s the benefit of the Show avatar variables? Before doing the exercises I did my own version, I just create a component showing the avatar and checked box and a variant with an unchecked box and 0 opacity avatar, then connect both through a click animation and is basically the same with less steps.

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

It was just a simplified way of showing show and hide layer functionality using variables. In this particular case, you probably wouldn't do it.

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

The tutorial that makes variables look as easy as stealing candy from a baby : )

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

Thanks for sharing. I was looking for a toggle to switch between light/dark variable modes, is that possbile at this point?

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

Nope. Not sure why. Hopefully soon.

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

@DesignCourse Thanks! Yeah does not really make sense.

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

I was too

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

Awesome course! I only run in to a problem when I work on the toggle to switch between light and dark mode. I followed all the steps in the tutorial but for some reason the background color will not change and stays the same blue color... What am I doing wrong?

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

I faced this problem too. Turns out the issue was, I had selected the "toggle" element for adding an interaction, whereas you have to choose the entire frame with the words and toggle. That seemed to do the trick :)

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

@@yashshetty3208 I faced this problem too, thank you so much for the tip, it worked!!

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

Feature unavailable in the free version... in Protopie you could do these things years before and free...

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

On the Boolean example, the eye icon does not show the boolean variables?

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

Oh shoot "RIGHT" click...doh!

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

anyone get stuck at 11:50 ? I cant seem to drag the the first row under the conditional bit - it worked for him but not working for me

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

a lot of this just feels like adding extra steps to simple interactions. like the avatar one, why cant you just have the avatar hidden in previous states. what benefits does having all these variables to do what we could do before.

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

#3 toggle did not work for me. back ground color will not change Update: The smart animate setting doesn't allow it. I had to turn it back to instant. Seems like a bug Figma will need to fix, eventually

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

Hello! Thanks for the video. I have a problem. When I select the Avatar layer and go to the little eye next to layers, it just turns the visibility on and off, there is no variables menu or anything. What am I doing wrong? Thanks

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

Hey Teresa, he explained in the video in order to apply the boolean value that turns off and on the avatar, you need to go to the "Layer Panel" and "Right-click" on the eye icon that on the right of the layer to apply that boolean, hope that helps. :3

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

Figma and prototyping is querky at best. It's also very unstable, always been. Take notice of what happens to any element with a hover event attached for instance, they change their position ever so slightly, resulting in the typical Figma "tremble" effect. Look @21:30 - both label and checkbox move on hover.

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

That mostly happens in the new preview mode. If youre following this tutorial try launching the prototype in Present mode or simply expand the Preview window so the content inside has that extra margin and it should work without trembles

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

@@facuh3o Actually when viewing prototype in the old manner in the separate section that has a menu, the frames skips all the time. When clicking from frame to frame it skips hugely, impossible to keep the same coordinates. That goes for 100% and zoom. I've never seen a worse prototyping tool than Figma and I always miss XD for prototypes. I'm forced to use Figma due to the current project I'm in now. To me Figma is more for system based design, administrating design systems and collaborations. But prototyping and simulating user flows is a true nightmare.

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

Is there a way to make the color transition softer? like smart animate

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

A good point. I had the same sense of slight mismatching in the toggle animation. Otherwise, very good stuff !

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

Dark mode toggle ain't working for me!? Why?

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

Sadly, using variables in prototyping isn´t available for Figma free users

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

I’m using a free version of figma and I have access to the figma variable and even the mode

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

how?@@footballscoreupdate

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

Free users have access to Figma variables for 2023

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

Sadly some people want everything for nothing.

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

@@footballscoreupdatenot for advanced variable

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

I'm really on the fence with this. Devs have never needed this much fidelity on handover. To spend all this additional time visually hooking up variables/conditionals/loops & booleans etc seems like a waste when we already have the assets to develop? Time better spent by contributing to the repo unless the client has categorically stated they NEED a high-fi prototype 🤷‍♂

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

aye...

@user-zr7ep7ce5f 4 месяца назад

Очередные продавцы лопат

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

To be honest with you, I hated figma and hated this whole field, and I no longer have any enthusiasm for learning new things in it. What we do in months, after what we learn, a tool appears that summarizes this in a minute. This is very frustrating. Add to that the ease of creating a design in the future, which will make the profession of designer a normal profession. From the designer, learn the code. God Almighty alone knows what this matter will lead to

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

If anyone else was getting a negative cost value - repeat the same steps that stop the #SeatCount. So: Add a conditional If #Cost != 0 Set Variable --> #Cost-39 Great tutorial thank you!

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

Designers who have never had to deal with a minimum of programming be like: 💀🫠 We are not at ProtoPie levels, but it is a tremendous improvement 💪 Question 1: so advanced prototyping, in the case of the avatar, still does not work with the smart animate option? Question 2: I have always built component sets by also inserting Dark Mode via a Boolean property that allowed the component to be switched between light and dark. Now with variables you say there is no longer a need for this, or do these options have to be used in pairs?