Living Documentation of Design Tokens with Tokens Studio and Automator in Figma

แชร์
ฝัง

ความคิดเห็น • 30

  • @SamIam_Designs
    @SamIam_Designs  9 หลายเดือนก่อน +1

    Sorry the links aren't working yet in the description - I'm waiting to get "varified" by TH-cam before it will allow external links to work. You should still be able to copy and paste the URL's into your browser. - Sam 🫶

    • @SamIam_Designs
      @SamIam_Designs  9 หลายเดือนก่อน

      They have been fixed! Yay!

  • @osendz
    @osendz หลายเดือนก่อน

    Thank you so much. Great lesson.

    • @SamIam_Designs
      @SamIam_Designs  26 วันที่ผ่านมา

      My pleasure! Glad you found it helpful.

  • @ShaneFoster-w2v
    @ShaneFoster-w2v 9 หลายเดือนก่อน

    This is incredible. After finishing watching, I'm fairly certain I never ever would have figured this out 😅 What a lifesaver. The only minor note I notice was at the 21:10 mark you mentioned Apply to selection, but the active button in Tokens Studio is Apply to page. Not sure how much that matters. Otherwise, this is just perfect. Love how you also always included any edge cases people may run into!

    • @SamIam_Designs
      @SamIam_Designs  9 หลายเดือนก่อน

      Thank you for the kind words! 🫶 Ahh good catch! 🕵Generally speaking I run apply to selection as often as possible but in the clip I put underneath I did want everything on the page to to be updated so it was selected.

  • @sophiemulders
    @sophiemulders 7 หลายเดือนก่อน

    Question ; @6:29 you create the color swatch. ( sorry i am very new to token studio and relativly new to figma) Is it possible to display the HSL value of a color?

    • @SamIam_Designs
      @SamIam_Designs  6 หลายเดือนก่อน

      Hmmm good question, there isn't a way to do this automatically with tokens studio but there might be other tools you could use to document that value. Are you creating your color tokens in HSL?

    • @sophiemulders
      @sophiemulders 6 หลายเดือนก่อน

      @@SamIam_Designs yes i work with hsl because when i develop the site hsl is also the easiest for me to use.

  • @megaroeny
    @megaroeny 8 หลายเดือนก่อน

    2:45 I had no idea about this Annotation feature! Is it redundant with "Annotations" from Figma now?

    • @SamIam_Designs
      @SamIam_Designs  8 หลายเดือนก่อน +1

      oooh! Further investigation needed on that one! As far as I know, annotations in Figma doesn't create a static doc of tokens from tokens studio (they don't pull plugin data which is LAME).

    • @megaroeny
      @megaroeny 8 หลายเดือนก่อน

      @@SamIam_Designs yeah I didn't check either, but if it can't use plugin data, then yeah... better off using Dev Mode properties + this or 8Specs!

  • @megaroeny
    @megaroeny 8 หลายเดือนก่อน

    I got to 17:38 and I was like "wait I did it wrong??" Glad to see I had to keep going and it WORKED!! Thanks MVP Sam!

  • @brunobach_ux
    @brunobach_ux 9 หลายเดือนก่อน +1

    Sam being a lifesaver, AGAIN! I've suffered too long and gave up on Automator before, but this seems great!! Wish Tokens Studio could generate this level of documentation. We have so many possibilities with this script, generating templates for each type of token and so on.

    • @SamIam_Designs
      @SamIam_Designs  9 หลายเดือนก่อน +1

      Aww yay! Glad it was helpful 🫶 Tokens Studio has "documentation experience" on the roadmap in 2024 so who knows what we will come up with! Also working on a new way for folks to submit ideas and feedback, upvote, get notified etc so lots of positive change coming from that side!

    • @megaroeny
      @megaroeny 8 หลายเดือนก่อน

      Same. I made some automations but often times I found limitations or things didn't work the way I expected. And there's almost no support (they couldn't keep up with demand) so I was on my own or asking others. The docs site helps sometimes, but it wasn't enough for me. Thanks Sam!

    • @SamIam_Designs
      @SamIam_Designs  8 หลายเดือนก่อน +1

      @@megaroeny Oh I don't make new things in Automator cuz its HARD! But happy to share my hacks with the community!

  • @IntoDesignSystems
    @IntoDesignSystems 9 หลายเดือนก่อน +1

    Great job Sam!

    • @SamIam_Designs
      @SamIam_Designs  9 หลายเดือนก่อน

      Thanks Sil and team! 🫶

  • @tanyacequi6556
    @tanyacequi6556 8 หลายเดือนก่อน

    Hey Sam, this is awesome! Thanks for doing it, it's really helpful and easy to follow 🤗

    • @SamIam_Designs
      @SamIam_Designs  8 หลายเดือนก่อน +1

      Yay! Glad to hear it! Thanks for poking me to make things like this in the Tokens Studio slack community. I appreciate your presence there and here. 🫶

  • @fame4jane
    @fame4jane 9 หลายเดือนก่อน

    Awesome video! This saved me hours of time and was like magic when it worked!!

    • @SamIam_Designs
      @SamIam_Designs  9 หลายเดือนก่อน

      Yay! Glad it helped 🫶

  • @duckstudioTH
    @duckstudioTH 7 หลายเดือนก่อน

    At first, I had a blank space frame and struggled to find a solution. Eventually, I discovered that the issue was caused by missing "Satoshi Variable" fonts. I resolved the problem by changing the font to "Inter". Thx u so much!

    • @SamIam_Designs
      @SamIam_Designs  7 หลายเดือนก่อน

      Thank you so much for telling me!! Was that something I had in my template that caused you issues (I use both)? If so, perhaps I should change the default font family to help other avoid that.

  • @hotsauceasylum
    @hotsauceasylum 8 หลายเดือนก่อน

    thank you, you're such a gem. this saved HEAPS of time :)

    • @SamIam_Designs
      @SamIam_Designs  8 หลายเดือนก่อน

      Aww yay! Glad you enjoyed it! I also release some non-video guides as well over on my substack if you want more tokens pro-tips. (: samiamdesigns.substack.com/

  • @uifry
    @uifry 8 หลายเดือนก่อน

    Thankyou :)