Set variable mode interaction | Figma update May 2024 | Figma Variables

Поделиться
HTML-код
  • Опубликовано: 28 ноя 2024

Комментарии • 69

  • @TDSunshine
    @TDSunshine  6 месяцев назад +2

    Thanks to @wonsunparque4788 for pointing out my toggles are flipped 🙈🙈 no idea how but I had them on a 180 degree angle 🤦🏽‍♀️ I will fix this in the practice file on Figma sorry all ☀️🙏🏼

  • @isabellanovaes2404
    @isabellanovaes2404 25 дней назад +1

    Brazilian watching the video, thanks!

    • @TDSunshine
      @TDSunshine  16 дней назад

      Welcome! ☀️🙏🏻💛

  • @cp3onmtv963
    @cp3onmtv963 6 месяцев назад +2

    Thank you SO much for this video as I was kind of struggling on what this feature actually accomplished. Well done!

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

      You’re welcome! ☀️🙏🏼💛

  • @KatieMyrick-u9y
    @KatieMyrick-u9y 6 месяцев назад

    I never leave comments on videos, your channel is AMAZING!

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

      Aww thank you so much! 💛🙏🏼☀️

  • @platinoir
    @platinoir 6 месяцев назад +1

    amazing, that should make prototypes way more dynamic and believable

    • @TDSunshine
      @TDSunshine  6 месяцев назад +1

      I know right??? ☀️🙏🏼

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

    Wow great to see this prototyping made too easy now. Thanks 💙

    • @TDSunshine
      @TDSunshine  6 месяцев назад +2

      You’re welcome! 🙏🏼☀️

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

    This was so well described. Thanks !
    Question: Is there a plugin you are using for the languages that automatically translates them? Or are you translating each word using ,Google Translate for example, and entering them in the mode descriptions?

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

      Thanks! I used google translate and I think some of my translations aren’t very good 🙈🙈☀️

  • @playbak
    @playbak 6 месяцев назад +1

    Great call on the interaction order.. Are switches backwards in the UK?😄

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

      Thanks! haha no they are not 😭. I have no idea how it happened and how I didn't notice but I had my switches on 180-degree rotation for some reason 🙈☀️

  • @imnbmusic
    @imnbmusic 4 месяца назад

    i was frustrated on how to add two interactions in one component, turns out i had overlooked the plus sign in prototype. this helped. thanks td

    • @TDSunshine
      @TDSunshine  4 месяца назад +1

      hahah it is easy to miss! ☀️🙏🏻💛

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

    Just discovered your channel- its absolutely gold!! Binging all your videos now and about to find you on IG, we love women in tech!!

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

      Aww thanks! And yay women in tech ! ☀️🙏🏼💛

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

    I was waiting for long time for this type of feature in figma thank you so much for the video

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

      You’re welcome! ☀️🙏🏼

  • @MrBrunobrunic
    @MrBrunobrunic 2 месяца назад

    Thank you so much again for everything you do on this channel.🙌🏻 I get excited for each video like a little kid :) I do have one question about the dark/light switch. Since I have 20 connected screens, is there a way to change the theme on all of them with one button click? Right now, it only works on the current screen, but as soon as I click the action button to switch to another screen, it goes back to auto mode (e.g. light).

    • @MrBrunobrunic
      @MrBrunobrunic 2 месяца назад

      False alarm. I forgot to turn all the screens to auto :) 😊

    • @TDSunshine
      @TDSunshine  Месяц назад +1

      Glad you managed to fix it! ☀️🙏🏻💛

  • @IanHamilton-k5s
    @IanHamilton-k5s 6 месяцев назад +1

    Man i love figma, such great value for money (if you pay, and especially if you don't )

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

      Its great right?? ☀️🙏🏻

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

    Amazing TD , very use full , thanks

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

      Thank you! ☀️🙏🏻

  •  6 месяцев назад

    Super useful update and explanation! I found really educational how you first create something and then how to improve it. I can't imagine what new features are Figma people keeping for this june event.

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

      Same!! Did you see the post they uploaded with the images as “clues”?? Very unhelpful 🙈🙈☀️💛

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

    This is great! Thanks for making the video! Super helpful!
    The switch, however, seems to be on the different side from the standard switch. The standard iOS switch is ON with the switch is on the right side, and OFF when the switch is on the left side. In this video, they are in reverse. It was bothering me a bit when I was watching the video.

    • @TDSunshine
      @TDSunshine  6 месяцев назад +1

      Omg you’re right!!! hahahaha 5:33 check out the rotation when I select the toggles. Why do I have them on 180 degree angle??? I grabbed these from my copy of the iOS library but maybe I played with it previously and forgot 🙈🙈 great catch! 🙏🏼 ☀️💛

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

      Great video nonetheless! I’ve learned a lot from your videos! Really appreciate the time you put into these. Keep up the great work! 🙂

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

    ✨🙌🏼🙌🏼WoooW🙌🏼🙌🏼✨ Thank you!

    • @TDSunshine
      @TDSunshine  5 месяцев назад +1

      You're welcome! ☀️🙏🏻

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

    Yayyyyy finally!! 🎉❤

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

      ☀️🙏🏻💛

  • @AntanasGeguzinskas
    @AntanasGeguzinskas 6 месяцев назад +1

    Awesome :)

    • @TDSunshine
      @TDSunshine  6 месяцев назад +1

      Thanks 😁☀️🙏🏻

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

    Great video! Such an awesome update. Could you do a video creating an interactive prototype keyboard?

    • @TDSunshine
      @TDSunshine  6 месяцев назад +1

      Thanks! ☀️🙏🏻💛 I have one! Keyboard - ruclips.net/user/shortsve4UvSGadaA?feature=share, Keypad - ruclips.net/user/shorts8pYaEWAQtrc?feature=share

  • @ValerijusJurcia
    @ValerijusJurcia 5 месяцев назад +1

    Nice video! Can it be done on component instance tho?

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

      You can definitely use this feature on instances as well! ☀️🙏🏻

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

    It's a shame you con't delay the variable change so it happens in the middle of the 300ms animation. You could probably make it more snappy if the 300ms is reduced (but might look a bit too fast on the toggle)

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

      You can for sure play around with some delays to make it even more realistic! I was just showing the basics and being lazy 🤪🙏🏼☀️

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

    Off topic but would highly appreciate it if you could design a mobile app for us in detail, e.g. a food app, or an HRMS dashboard panel. I am still confused about when to use a frame for text, or apply auto layout to it, OR when to use group selection vs auto layout.

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

      Great idea! I'll add it to my list ☀️🙏🏻

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

      about the last two questions! I would say to use an Auto layout if there is a rule all the elements inside the frame need to follow or if it needs to be dynamic. ☀️

  • @sevenson5112
    @sevenson5112 3 дня назад

    How to make responsive with this variable?

  • @tutukumarpanda
    @tutukumarpanda 6 месяцев назад +1

    Look at that it is very effective very easy very simple than regular prototyping 😂 But problem is variables are limited to the free version to practice 😢😂

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

      yes :/ variable prototyping is not available on the free plans ☀️🙏🏻

  • @UXMAN-s4y
    @UXMAN-s4y 4 месяца назад

    Hey! Thanks for the tutorial. I hope you can help me out because i just cannot understand why its not working for me. I am litteraly doing the exact same thing as you but my prototype only works one way. So if I click on the toggle button, it changes the button variant itself and the variable. BUT then I cannot go back. It stays in this mode and i cannot click it again to turn it off. So weird pls help me

    • @TDSunshine
      @TDSunshine  3 месяца назад

      Make sure to add an "on click" to that variant as well. So each variant needs an on click interaction on it. I hope that works! ☀️🙏🏻💛

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

    How do i use toggle to change font? For example if i toggle it on, it will change to Poppins. But if i turn it off it will change back to Inter. Please help

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

      great question! you can fake it a little so you can use a conditional -
      IF toggleVariable== false { change variable font to "Poppins" }
      I hope that makes sense ☀️🙏🏻

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

    amazinggggg!!!!!!!

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

    How does your toggle have a audio feedback? Is that possible in figma?

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

      I added that in editing to help show when I’m clicking ☀️😃

  • @sweetestyeol6310
    @sweetestyeol6310 Месяц назад +1

    cuman bisa make 4 mode sedangkan gw butuh 12 mode 😭😭😭💔

    • @TDSunshine
      @TDSunshine  16 дней назад

      Haha yes its easy to want to get carried away with modes! ☀️🙏🏻💛

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

    All good, but except Hindi for India... India has many language and there is no national language

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

      The flags are just representations of countries that use the language and not the national language. ☀️

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

    Are you Married???? 😅

    • @TDSunshine
      @TDSunshine  5 месяцев назад +1

      I prefer not to answer personal questions 😎☀️💛

  • @BingChilling896
    @BingChilling896 6 месяцев назад +1

    Helpful!

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

      Thanks! ☀️🙏🏻

  • @djashawe88923
    @djashawe88923 3 месяца назад

    I'm excited about this new feature. Thanks for your well-put-together content; I enjoy your explanations. I’d love to see a tutorial on using a design system to build a design instead of starting from scratch. Most tutorials focus on creating everything from the ground up, but in real environments, we usually use existing UI elements. A tutorial showing how to effectively utilize and customize components from a design system, including tips and best practices, would be great. 🙏👍💯🪴🍀🌱🌻

    • @TDSunshine
      @TDSunshine  3 месяца назад

      Great idea! I will add it to my list ☀️🙏🏻💛