Design Tokens Demystified: Boost Your Workflow!

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

КОМЕНТАРІ • 20

  • @hardboiled2000
    @hardboiled2000 3 місяці тому +2

    That helped, thankyou for taking the time

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

      Awesome! Please subscribe and share this video where you can :)

  • @mikeysouthwell
    @mikeysouthwell 3 місяці тому +3

    Great video! Why did you add your Base tokens to your Mapped collection? Shouldn’t it have been Alias to Mapped? Also, it would’ve been great to mention how to hide the Base and Alias values from Figma so you only see the Mapped values on the nodes on the canvas to make it easier to read and avoid the issue of accidentally adding the wrong token 😀

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

      Mike!!! Great to hear from ya. Oops, did I make a mistake? Yes it should be alias to mapped and not brand to mapped. Thanks for catching this!! I also agree on that.... been waiting for Figma to fix that for a long time

    • @mikeysouthwell
      @mikeysouthwell 2 місяці тому +1

      @@UICollectiveDesign ahh is it still buggy 😢 Hopefully they fix it soon so we can use the variables properly 🤞As always, great work and keep the quality content coming 🤩

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

      @@mikeysouthwell Thanks Mike!! Appreciate the support man

  • @fionaovcharenko
    @fionaovcharenko 3 місяці тому +1

    Thanks, that's very helpful!

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

      You're welcome! Please subscribe and share this video where you can :)

  • @agustinfernandez8972
    @agustinfernandez8972 2 місяці тому +1

    Thank you for this video, i am trying to understand figma variables and learning to apply a good proper name for the elements. Something that might also help is using a real example applying this variables starting with a simple button design and a card. From atom to molecule. Also showing how the colors on the component are applied. You can show the difference between applying styles from variables. This is something that really helps. May be basic list of all the posible states applying variables for a component. Thank you so much for this content.

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

      Thanks for the comment! I would check out this vid: ua-cam.com/video/OMGTP2QpfiY/v-deo.html

  • @RémiCourtillon
    @RémiCourtillon 2 місяці тому +1

    Hi ! From an user standoint i'd rather add a description to the base variables themselves instead of doing an infinite amount of alisases, because once you're multiple months into the use of a design system, you'll have to scroll indefinetly in between the "brand" variables and all the aliases just to find the token you want to apply. Until figma does an update in wich you can choose wich set of variables are visible or not from the drop-downs menus, it's just too much noise and complexity and doesn't serve the purpose of making designing easier. That's my take on it :) nice video anyways

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

      Hey Remi! You can actually color scope your variables, so you won't end up seeing brand and alias when selecting your variables. Two finger tap on a group of variables and then hit edit to do so :)

  • @hardboiled2000
    @hardboiled2000 2 місяці тому +1

    This is a really great video, thank you. But could you please just do one small video on explaining some use cases of the alias layer I.e examples of problems that you might run across cuz I'm still not getting it

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

      Thanks!! I would check out our token/variable naming and setup guide video. This will go more in-depth!

  • @lukehereart
    @lukehereart 2 місяці тому +1

    Can you maybe link to how this translates to the structure or setup a dev will use that will parallel this design token setup in figma. Struggling to make the connection from this to an implementation for a dev.

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

      let me put you in-touch with my dev contact. Signup and I will invite you to our community right away and connect you with Phil. He can talk more about dev related elements

    • @lukehereart
      @lukehereart 2 місяці тому +1

      Signed up 🌿

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

      Awesome! Will send invite soon!@@lukehereart

  • @ytRap007
    @ytRap007 3 місяці тому +1

    thanks im waiting for this.

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

      Glad it helped! Please subscribe and share this vid where you can :) The support goes a long way