Avatar Component - Figma Variables, Variants & Component Properties | Design System Part 9

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 ธ.ค. 2024

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

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

    Danke!

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

      Wow thank you so much! I really appreciate it ☀️🙏🏼💛⭐️

  • @vijaychandoliya4975
    @vijaychandoliya4975 10 หลายเดือนก่อน +3

    00:01 Creating a versatile Avatar component with different layouts and content options.
    01:45 Creating components with text, image, and icon in Figma.
    05:25 Using Primitives allows for easy scaling and updating of design system variables.
    07:12 Setting up Avatar components and variants in Figma using variables and properties.
    11:01 Use semantic colors for error, warning, success states to match user expectations.
    12:54 Consider accessibility by avoiding reliance on color for signifying changes.
    17:02 Creating a notification component with text and layout customization
    18:48 Creating and organizing components with frames and alignment
    22:19 Using Boolean and text component properties to toggle name, subtitle, and notification on and off
    24:07 Using the target icon to select matching layers inside a component.
    Crafted by Merlin AI.

    • @TDSunshine
      @TDSunshine  10 หลายเดือนก่อน +1

      thanks! ☀️

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

    Finally on the last one
    I have learnt a lot, keep on showing us how not to make mistakes and how to get out of them in these videos, it really helps, that's what keeps your videos special [besides your amazing personality too] by the way.
    Love to see some videos on correcting newbie designs, you thought process and how you go about fixing the design will be of great value 👍
    Ooh please keep up the good work❤

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

      aww thank you so much! ☀️🙏🏻💛

  • @tahminayasmimbinty4061
    @tahminayasmimbinty4061 20 วันที่ผ่านมา

    I learned a lot from your video series. I have some confusion also.
    I would appreciate it more if you also created a video in which you design a full website and apply this full design system. Then, we will be clear on how to design a responsive website.
    Thanks in advance you are an amiable teacher.................❤❤❤

    • @TDSunshine
      @TDSunshine  19 วันที่ผ่านมา

      Thanks! I will add to my list! ☀️🙏🏻💛

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

    I have created my complete design system by following your design system playlist. I appreciate if you also create a 2nd part of it. Such as: Publishing design system as library, How to use conditional, and many more required features for starting a new project.

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

      Great ideas! Will add to my list! ☀️🙏🏻

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

      @@TDSunshine Oh, yes, conditionals! Really appreciate everything you have done TD Sunshine!

  • @jcenlo
    @jcenlo ปีที่แล้ว

    Thank you for not wasting people's time, your videos are very concise and explanatory.
    Do you plan to make more videos of this course?

    • @TDSunshine
      @TDSunshine  ปีที่แล้ว

      Thanks! Not sure yet 🙈 Maybe one day... ☀️

  • @fafutuka
    @fafutuka 20 วันที่ผ่านมา

    Wow!, this is just the most beautiful component I've ever seen, I wonder other components can have this sophostication. Let me try Chip

    • @TDSunshine
      @TDSunshine  19 วันที่ผ่านมา

      Thanks! Figma really lets you do such cool stuff the possibilities are endless ☀️🙏🏻💛

  • @huseinovmikail
    @huseinovmikail ปีที่แล้ว

    Appreciation for your design tips. Your efforts and positivity are truly valued.

    • @TDSunshine
      @TDSunshine  ปีที่แล้ว

      Thanks! 💛☀️🙏🏼

  • @platinoir
    @platinoir ปีที่แล้ว +1

    Amazing content as always 🤜🤛
    I would love to see how you’d tackle the process of considering light & dark mode when designing & making variables

    • @TDSunshine
      @TDSunshine  ปีที่แล้ว +2

      Thanks! I have been seeing this question a lot actually 😅 I will add it to my list! ☀️🤗

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

      ​@@TDSunshinethank you

  • @mahdiandalib186
    @mahdiandalib186 ปีที่แล้ว +1

    nice, can you plz talk about naming colors, primary, secondary, tritery.surfaceText.... i get confused when reading material design articles about color naming...

    • @TDSunshine
      @TDSunshine  ปีที่แล้ว +1

      Material design have a very intricate colour system I agree it's a bit tricky! I have this video showing how I build my own colour system (*Colour System* - th-cam.com/video/qPL3ubdlkRM/w-d-xo.html) and also this video which talks about Figma's approach for variable naming (*Variables best practice* - th-cam.com/video/WMDJY86RhLo/w-d-xo.html). I hope that helps! ☀️

    • @mahdiandalib186
      @mahdiandalib186 ปีที่แล้ว

      thx for helping me out@@TDSunshine

  • @djashawe88923
    @djashawe88923 ปีที่แล้ว +1

    Hi, thanks for the great content as always. I have a quick question. When it comes to setting layer visibility, is it better to do it at the component level or use variables at the prototype level? I'm looking for a general rule of thumb or a best practice.

    • @TDSunshine
      @TDSunshine  ปีที่แล้ว

      Hey! You are not going to like my answer - it depends 🙈 In certain situations hiding using variables is preferable and in some a boolean component property is better. I think it depends on what you are going to do with it. So for example if this is something that is gong to be prototyped than variable for sure so you can switch visibility on and off according to the interaction. Figma shared this video a few weeks ago about variables vs variants maybe it can help too! -> th-cam.com/video/RXQ8XVirzjs/w-d-xo.htmlsi=nkPsiw5Ui8LEPhZE

  • @tara730
    @tara730 ปีที่แล้ว +1

    nice and detailed video but I think two things are missing, The first is changing the name the text under the avatar should be changed like that and the second is designer can change the size also. Can you elaborate on that as well? please

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

      🙏🏻

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

    This series, of which I've followed from the beginning, has been life-changing! Something I thought perhaps you'd show after we finished doing the Design System (if this is the last step lol) would be to have you show us how to use these in a simple project. But also, I can't access the design system when I open my other files (in the same team where this was created). How do I make it available? (Sorry, just really new with all this.)

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

      Thanks! happy to hear its helpful! the best way around this would be to copy the new components into the same file each time so you keep building your next part from the same file. That way you can publish it as one library. I hope that makes sense ☀️🤗

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

      @@TDSunshine Thank you so much for replying! I realized I was an idiot as I just didn't check your playlist. You had a video after where you explained everything 🙏 And I just watched your Auto Layout video-hands down the best one on TH-cam (and I've watched countless because it's so tricky to me lol).

  • @Mr_Sin99
    @Mr_Sin99 ปีที่แล้ว

    Great tutorial. From where have you learned so much, on job or a particular course?

    • @TDSunshine
      @TDSunshine  ปีที่แล้ว

      Thanks! I have a BSc in computer science where I focused mainly on front end development. And I currently work as a Mobile UX designer at a global consultancy. But to be honest lots of my knowledge comes from TH-cam! So many amazing creators out here sharing their knowledge ☀️🤗

    • @Mr_Sin99
      @Mr_Sin99 ปีที่แล้ว

      @@TDSunshine Oh Wow, can u plz name a few good channels that u use to gather ur knowledge from? Also is there a online course that you would recommend on the internet?

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

    Hi! Great video - I have a question: been watching all of your videos in this series and I've been wondering why did you create the 05 Component Tokens for Input Field, Checkbox, Radio and now Avatar separately in Local variables? Isn't it more simple to just assign all radiuses/spacing/padding from the Number scale of 2's directly? I guess there is a reason for this but I can't find it myself - probably you explained it already in the videos but it didn't stick with me. Hope I made sense and you can clarify. Thanks.

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

      Great question! It's because input field, checkbox etc use modes and Avatars don't. I hope that makes sense. ☀️🙏🏻💛

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

      @@TDSunshine Thank you! Yes makes sense. I worked in Figma lately creating a design system and while working those things became more and more clear! Love your videos! Thank you for everything you are doing for us!

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

    Hello again, I have a question. My avatar collection contains 4 sizes (s, m, l, xl), so when I make a nested instance, I have both size and type variants in my avatar group. Here I can tell you how to uninstall the variant. :(

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

      Hey! you can detach the nested instance if you don't want people to be able to swap to different variants. I hope that helps! ☀️

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

    whats components are u making next , cant wait

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

      ☀️🧐

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

    It was veeeery helpful tanx very much

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

      You're welcome! ☀️🙏🏻💛

  • @mkbusiness3561
    @mkbusiness3561 10 หลายเดือนก่อน +1

    whats name website for avatar?

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

      I got them from a Figma community file :) ☀️🤗

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

      You check freepiks for avatar

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

    I love your necklace! Breathe

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

      ☀️🙏🏻💛 תודה!

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

    This is really nice

    • @TDSunshine
      @TDSunshine  29 วันที่ผ่านมา

      Thanks! ☀️🙏🏻💛

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

    You’re super good🎉.

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

      Thanks! ☀️🙏🏻💛

  • @lilianacarvalho3283
    @lilianacarvalho3283 ปีที่แล้ว

    Thanks!

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

    Amazing tutorial. I love it

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

      Thanks! 🙏🏼☀️

  • @JasminHadad
    @JasminHadad 28 วันที่ผ่านมา

    I liked your necklace ;)

    • @TDSunshine
      @TDSunshine  19 วันที่ผ่านมา

      Thanks! ☀️🙏🏻💛

  • @serifcolakel823
    @serifcolakel823 ปีที่แล้ว

    Thank you explanation🙏 its looks like handling business logic 😅

    • @TDSunshine
      @TDSunshine  ปีที่แล้ว +1

      🙃☀️🙏🏼

  • @ramazanguler6066
    @ramazanguler6066 ปีที่แล้ว

    it was very good

    • @TDSunshine
      @TDSunshine  ปีที่แล้ว

      Thanks! 🙏🏼☀️

  • @1980nikolov
    @1980nikolov หลายเดือนก่อน +1

    Crazy good! You are my hero! I want to donate! Please, set it up, so that I can give you something back. Your help is much appreciated!

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

      Aww thank you so much! I do have super thanks set up where you can donate. You can find it in a button called "thanks" under the videos ☀️🙏🏻💛

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

      @@TDSunshinegreat, will do!

  • @AntanasGeguzinskas
    @AntanasGeguzinskas ปีที่แล้ว

    Nice :)

  • @NaiemIslam-xg3pw
    @NaiemIslam-xg3pw หลายเดือนก่อน

    I love u😍

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

      ☀️🙏🏻