Tokens, variables, and styles - Update: Introduction to design systems

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 ก.ย. 2024

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

  • @vindicator2385
    @vindicator2385 11 หลายเดือนก่อน +43

    Great video, would love to see more content on managing multi-brand design systems.

    • @GeorgesBlog
      @GeorgesBlog 4 หลายเดือนก่อน +2

      did you find anything for this?

  • @camward957
    @camward957 11 หลายเดือนก่อน +5

    Amazing. Love that theres a section on migrating colour styles into variables and why that makes sense

  • @melboogiedown
    @melboogiedown 5 หลายเดือนก่อน +1

    This is wonderful. Thank you so much for this detailed information!

  • @vincent-cg7bl
    @vincent-cg7bl หลายเดือนก่อน

    Very well explained video, but I have a little trouble with the term "invert" which is still too abstract for me. "Invert" yes but for which token? primary or secondary? We invert with respect to what?

  • @psddesignernet
    @psddesignernet 11 หลายเดือนก่อน +4

    would love to use the numbers for font size , when is this feature coming ?

  • @shipaleks
    @shipaleks 10 หลายเดือนก่อน +2

    Do you create yet another collection for component specific tokens, or after semantic token you should just arrange it to an elements?

  • @tim_sign
    @tim_sign 10 หลายเดือนก่อน +2

    Nice! The only thing i do not understand is why not to combine styles and variables, they kinda are for the same thing

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

      7:35

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

    Really good overview! Curious if anyone has some ideas on how to merge Tailwind with something like this

  • @DmitriiVolik
    @DmitriiVolik 7 หลายเดือนก่อน +4

    Please, if you have more than 1 video in one playlist - change the music) I really TIRED SO MUCH AAAAAA listen same lofi hip hop more than 30 min(
    It's killing me and my desire to watch a new video with the same music!
    You have a great animation in your video, now please think about change the music. Thank you!)

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

    Amazing video! Amazing course. I learned a lot!
    Wondering if the token system can be solve with a node-base interface?
    Thanks!

  • @kmylodarkstar2253
    @kmylodarkstar2253 11 หลายเดือนก่อน +7

    what about exporting?

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

      Think there's plugins that creates JSON files that in turn can be imported into variable setups. I'm really confused why Figma didn't make this part of the Figma functionality. Right now every variable setup is in principle included in every Figma project, no matter what page or section your on. This messed up my files big time, cause it's not possible to scope the setup and define what pages to assign those variables. It's confusing.

  • @djashawe88923
    @djashawe88923 11 หลายเดือนก่อน +23

    The video content is commendable, but I found it challenging to stay engaged because the audio sounded like someone was simply reading from a script.

    • @JeffMcKeand
      @JeffMcKeand 11 หลายเดือนก่อน +7

      Because it's a robot. You can do better @Figma 🤖👎

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

      That’s because it IS computer generated..

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

      I find it easier to follow for that exact reason.

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

    Great content, do you have a tutorial where the habitz team is generating the client code out of this tokens? That’s what I am mostly interested. Please point to me to the right place if i missed it on the way

  • @MyDigitalHub
    @MyDigitalHub 11 หลายเดือนก่อน +2

    Nice updates

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

    Fantastic breakdown!

  • @samduss4193
    @samduss4193 23 วันที่ผ่านมา

    this is interesteding but actually make me a bit lost with all this naming thing i guess need a sort of pattern

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

    Great stuff, mostly spot-on, but the inclusion of color names (blue, pink, etc.) in the semantic layer is a no-no, and this video communicates its a yes-yes.

  • @tomashudolin7197
    @tomashudolin7197 6 หลายเดือนก่อน +1

    But variables are in paid version only, right?

  • @brixencph
    @brixencph 11 หลายเดือนก่อน +1

    How do you document what text color to use with primary/secondary/disabled buttons? It doesn't seem like that is covered in the overview:
    th-cam.com/video/JyCmacSyDY4/w-d-xo.html

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

    Woow Great info

  • @عبدالرحمنالعاصى-د4ن
    @عبدالرحمنالعاصى-د4ن 9 หลายเดือนก่อน

    @FerjanyMuhamedali الفيديو ده معمول عن طريق برامج ايه اللى عامله رسومات الجرافيك والمونتاك

  • @janniklas-design
    @janniklas-design 11 หลายเดือนก่อน +1

    nice

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

    This is great

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

    Kai Habits scores again

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

    Awesome

  • @mhewson
    @mhewson 11 หลายเดือนก่อน +2

    Its exciting to see the adoption of Tokens and variables into design, however these elements should be managed outside of the design tool. tools such as Style dictionary and Theo have existed for the past 7 or more years, it would be great to see an integration that accommodated that as the single source of truth.

  • @Underhills
    @Underhills 11 หลายเดือนก่อน +1

    Wish you could scope variables so it doesn't get assigned to ALL pages. It's no way of doing that. Once you made your variable setup your stuck with that on every single page in the Figma space. Can't break the link or exclude them to make another variable set for a different project etc. It's not very flexible or functional.

  • @MrConway007
    @MrConway007 8 หลายเดือนก่อน +2

    I'm still not getting the value of design tokens, they seem to me like they are just a repackaged method of tagging global styles to components, but we could already do that with global swatches and type styles anyway 🤔

  • @Kararch
    @Kararch 4 หลายเดือนก่อน +1

    Way too complex. Just for the case of a rebrand^^ good luck.

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

    Figma will suck out all the fun & creativity from the design process. It feels that most of the things you are building are too structured / fixed - which will highly influence the transformation of inspiration into the same designs that everybody is creating and using...

  • @olabander7199
    @olabander7199 10 หลายเดือนก่อน +9

    Please please remove music from videos, it's soooo distracting

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

    the habiz design system is too much haha

  • @PeterHerbertBarnaba-p3z
    @PeterHerbertBarnaba-p3z 11 หลายเดือนก่อน

    😵‍💫

  • @20mindesigns
    @20mindesigns 11 หลายเดือนก่อน

    Its exciting to see the adoption of Tokens and variables into design, however these elements should be managed outside of the design tool. tools such as Style dictionary and Theo have existed for the past 7 or more years, it would be great to see an integration that accommodated that as the single source of truth.
    Wish you could scope variables so it doesn't get assigned to ALL pages. It's no way of doing that. Once you made your variable setup your stuck with that on every single page in the Figma space. Can't break the link or exclude them to make another variable set for a different project etc. It's not very flexible or functional.

  • @JamesRichman138
    @JamesRichman138 11 หลายเดือนก่อน +6

    The AI narration was a little rough

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

      Agree, it's borderline unlistenable

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

    I hate that the text is not left aligned 🥲

  • @melanieriepl698
    @melanieriepl698 5 หลายเดือนก่อน +1

    Ui design becomes like coding : (