3 Tips to Master Figma Variables | Figma Like a Pro

Поділитися
Вставка
  • Опубліковано 20 гру 2024

КОМЕНТАРІ •

  • @lcsbrg
    @lcsbrg 4 місяці тому +1

    3:29 Is that possible to switch images using Variables also in different screen sizes?. I mean: if I have a specific image for a dedicated screen size such as mobile (that image is inside of a component like a card) and I want to switch the image when I have a desktop screen (switching instead expanding it). I already have created the different screen sizes as Variables but how may I integrate variants of a component as strings as well? Any hints? Thanks! Your channel is amazing!

    • @UICollectiveDesign
      @UICollectiveDesign  4 місяці тому

      I believe so! Have you tried using modes?

    • @UICollectiveDesign
      @UICollectiveDesign  4 місяці тому +1

      & thanks for the kind words! Please share our channel/vid where you can :)

  • @uifry
    @uifry 8 місяців тому +1

    Thankyou for making this :)

    • @UICollectiveDesign
      @UICollectiveDesign  8 місяців тому

      Of course! Please subscribe and share our channel where you can :)

  • @cp3onmtv963
    @cp3onmtv963 9 місяців тому +1

    Thank you for making this! This definition is certainly the most clear (to me) from the other videos on the differences between brand (hex), aliased (roles) and mapped (use case). I admit… although I better understand the difference between the latter 2 collections I still seem to missing the benefits of mapping. Im probably just slow 😅.
    Now to my next question: what issues (if any) do you foresee in forgoing the mapped colors anyway? As of right now, I only have brand and aliased colors and my primary(role) can also be used for button(use case) or an icon(use case) or text link (use case). By making a mapped collection, wouldn’t all 3^ of those need separate mapped values? Why do this if they’re all using the exact same aliased primary?

    • @UICollectiveDesign
      @UICollectiveDesign  9 місяців тому +2

      Great question!! Think in terms of scalability. What happens if your button and text link need to change? How do other designers using the collection know which color to apply? It is quite common for designers to skip alias to forgo mapping values, but in each case, they end up mapping their values back later.
      Sure, your primary might be used for all three, but will all your color elements only apply to one color? This can overcomplicate your library overtime as Alias and Mapped will get combined into one, and thus disorganized.

    • @cp3onmtv963
      @cp3onmtv963 8 місяців тому +1

      @@UICollectiveDesign ok thank you. I think I’m going to go back and see if I do need to add that mapped collection.
      So when it comes to color modes - should that be set to the mapped collection or to the alias? (Of course if one doesn’t have the mapped it would have to be alias)

    • @UICollectiveDesign
      @UICollectiveDesign  8 місяців тому +1

      Depends on your use-case, but I like to put them in my mapped @@cp3onmtv963

    • @cp3onmtv963
      @cp3onmtv963 8 місяців тому +1

      @@UICollectiveDesign ok appreciate you

    • @UICollectiveDesign
      @UICollectiveDesign  8 місяців тому +1

      Anytime. Be sure to share our channel where you can :) @@cp3onmtv963

  • @tefiiii143
    @tefiiii143 9 місяців тому +1

    Perfect timing