Spacing - Analyzing The Top Design Systems (Figma Spacing Variables)

Поделиться
HTML-код
  • Опубликовано: 27 ноя 2024

Комментарии • 79

  • @donniedamato
    @donniedamato Год назад +29

    Love to see a link to the Airtable data for this.
    re, rem units: The reason why we opt for rem units for space is because the amount of space between elements is often related to the size of the content. In UI, the size of the content is very heavily influenced by the font size (and other font metrics). When a user updates the font size on their device, we want this relationship to be maintained. Rem is often assumed to be 16px but it is not always 16px because it does depend on the user's device settings.

    • @hooniexp
      @hooniexp  Год назад +3

      Thanks Donnie!
      I really like the way you explained REM units and it’s easier to understand. Definitely pinning it to the top for all to see. :)
      I also dropped a link to the waitlist in the description above

  • @diporko2486
    @diporko2486 8 месяцев назад +4

    You took the Spacing analysis to the next level. I really appreciate the hard you put into making this video.

  • @copaceticobserver
    @copaceticobserver 3 месяца назад +3

    Thank you! I don't know why but no matter what resource I go through no one ever seems to talk about the different spacing sizes you should use when to use them

  • @Am_ro12
    @Am_ro12 18 дней назад

    This video totally pushed all my buttons. Thank you so much for making!

  • @agnesszerafin8410
    @agnesszerafin8410 4 месяца назад

    Your content is so professional and educative, please don't stop.

  • @The1DAchannel
    @The1DAchannel Год назад +7

    Loving these mate! Would love to see you cover even more foundational categories :)

    • @hooniexp
      @hooniexp  Год назад +2

      Thank you! I am currently working on covering color next.

  • @itsaaronward
    @itsaaronward 6 месяцев назад +1

    Thanks, Hoonie. This was super interesting and fits perfectly with wanting to build a design system soon. Appreciate you putting this together.

  • @dannab8069
    @dannab8069 2 месяца назад

    Great information! Thank you so much for putting it together, it is really appreciated 🙏🏻
    Everything was so clear and on point, will definitely subscribe and look forward to the upcoming videos!

  • @alin4iiks
    @alin4iiks 10 месяцев назад +1

    Such an insightful analysis! It saves so much time. Thank you for creating that!

  • @happybear4ever
    @happybear4ever 3 месяца назад

    This was awesome! Would love to see you continue this project.

  • @slingshotpoem520
    @slingshotpoem520 8 месяцев назад

    Stunning presentation! Thanks a lot for this video.

  • @Dawn_frommy.windowview
    @Dawn_frommy.windowview Месяц назад

    Thanks a lot for your extremely useful explanation!

  • @acantime
    @acantime 4 месяца назад

    Thank you so much for this video, they are amazing!
    Hope to see them more in the future! 🙏

  • @ashikmathewtharakan8146
    @ashikmathewtharakan8146 Год назад

    I subscribed to your channel jusr yesterday morning after seeing your typography video. I hoped I would find more such topics and when I searched for it, I realised that it was the last video you uploaded and that too one year back. I was a bit sad on not finding more such videos. I was really happy when I got the notification that you had uploaded a new video.This is gold! I really hope I don't have to wait till next year for more such videos. Please keep them coming 🙏

    • @hooniexp
      @hooniexp  Год назад +1

      Thanks Ashik! I appreciate the support. I'm currently working on the next video at the moment. :)

  • @willcullen8333
    @willcullen8333 10 месяцев назад

    Seriously good content man, can't wait for you to upload again!

  • @shirleyxie7144
    @shirleyxie7144 Год назад

    That's awesome!! ur analysis is so detailed which help me a lot.

  • @MrHardpx
    @MrHardpx Год назад

    Your typography video is my bible when I'm starting a design system, super excited to add this info into my workflow! Thanks!

    • @hooniexp
      @hooniexp  Год назад

      That's awesome. I'm glad to hear that it helps you with your workflow. Thanks Carlos!

  • @EdmundFaust
    @EdmundFaust 8 месяцев назад

    Great comparison 💪🏻✨ Really enjoyed watching it 🙂

  • @fisuhan
    @fisuhan Год назад

    You just nailed it. Please continue with these type of videos. ❤

  • @daniellchoii
    @daniellchoii Год назад

    Your content has helped me grow tremendously in my career. Thank you!

  • @asvikram1628
    @asvikram1628 8 месяцев назад

    Thank you so much man, you saved my time and very greatful information

  • @mitak.3686
    @mitak.3686 10 месяцев назад

    Whoa extremely extremely helpful video! Thank you for taking the time to make this. Would love to see you cover color next!

  • @brianahn0331
    @brianahn0331 Год назад

    Wow, Hoonie. Great moves, keep it up. Proud of you!

  • @thecreativeone1489
    @thecreativeone1489 11 месяцев назад

    Thanks so much Hoonie, I enjoyed your last video which prompt me to be here right now and about to watch this 🎉.

  • @benafiamohamedabdessamd3705
    @benafiamohamedabdessamd3705 5 месяцев назад

    your videos are so great, you should continue doing videos !!

  • @UXMurt
    @UXMurt 6 месяцев назад

    This is such a great resource dude!

  • @ambitious_taco
    @ambitious_taco Год назад

    Great info! Nice to have it all broken out and explained succinctly - much better than my own observations and anecdotal thoughts about it!

  • @bellasantini28
    @bellasantini28 4 месяца назад

    Great work! Thank you for this!

  • @ruthgalvin3646
    @ruthgalvin3646 6 месяцев назад

    Such a good video!!. You should make more.

  • @MahafujHossain-mz8dq
    @MahafujHossain-mz8dq 7 месяцев назад

    We need more of this type analysis video❤
    I hope we will get more videos like that

  • @JordacheB
    @JordacheB Год назад +1

    Awesome work man! You should monetize it somehow. Idk… Maybe a website that provide the insights you brought here and in the other videos. Or an ebook that you can release updates within a period.

  • @Sheinkoko-i1b
    @Sheinkoko-i1b 4 месяца назад

    I hope more videos from Hoonie XP. The contents are really helpful.

  • @MeikelSteiding
    @MeikelSteiding 4 месяца назад

    This was helpful. thank you

  • @richardgravecz
    @richardgravecz 10 месяцев назад +3

    What is advantage to use different nameing then real pixel values? Feels like you have to recount everything or remember visual connections with scale ratios when you design. Also if you want to insert new value between, it will disturb your nameing more then if you would just use pixel values. Am I right or am I missing something? :D

    • @beetauri
      @beetauri 9 месяцев назад

      i wonder this too. lmk if you find some answers.

    • @beetauri
      @beetauri 9 месяцев назад

      i guess it's because the values are in rem instead of pixels, so they are scalable

  • @johnnnyfoley
    @johnnnyfoley 6 месяцев назад

    Thanks Hoonie!

  • @Underhills
    @Underhills 10 месяцев назад

    This ig gold. Thanks for sharing great insight!🏆

  • @victorviegas164
    @victorviegas164 Год назад

    Keep it up, Hoonie!🚀

  • @SimonDeDesigner
    @SimonDeDesigner Год назад

    That is extremely useful, thanks for that! Really.

  • @D4sxysrb
    @D4sxysrb Год назад

    This is really insightful

  • @mydesignhq
    @mydesignhq Год назад

    Great Content. thank you. Please create more.

  • @denislavprayerdimov7480
    @denislavprayerdimov7480 Год назад

    keep it up bro, we love your content!

  • @calmmind3160
    @calmmind3160 4 месяца назад

    great work brother! very neede

  • @IvanProle
    @IvanProle Год назад

    Great work, love it

  • @Greatkfunky
    @Greatkfunky 9 месяцев назад

    Great job! Thanks!

  • @Neptoid
    @Neptoid Год назад +1

    Cool at 12:45 there is an RGB effect on the like and dislike buttons. How do you do that?

  • @rodnem
    @rodnem Год назад

    Thanks a lot for this work!

  • @leogotv
    @leogotv 6 месяцев назад

    Great work! Thanks!

  • @ytRap007
    @ytRap007 4 месяца назад

    thanks very helpful

  • @sayekatchakraborty2552
    @sayekatchakraborty2552 Год назад

    Bro your contents are just awesome and full of informative. ❤ Thank you for this type of tutorials. Please, also help us to learn more about UX too

  • @bengeorge9699
    @bengeorge9699 8 месяцев назад

    this is so much great work

  • @IStMl
    @IStMl 4 месяца назад

    if your token name is still tied to the actual spacing value, it's not a semantic one. Semantic spacing tokens express a relationship between 2 elements (close, far, distant...)

  • @Noel-ik3pg
    @Noel-ik3pg 7 месяцев назад

    Btw 16px is most likely the standard because it's the universal accessible font size for all devices and the smallest font that is recommended. As designers, accessibility should always be accounted for.

  • @federitossa
    @federitossa 11 месяцев назад

    This is priceless! Thanks a lot

  • @SigmaLance3375
    @SigmaLance3375 9 месяцев назад

    This is brilliant.

  • @uswa_zd.
    @uswa_zd. Год назад

    Amazing content!

  • @yourdan-j3z
    @yourdan-j3z 7 месяцев назад

    Good content!

  • @SaadAlShiekhAli-sg4dl
    @SaadAlShiekhAli-sg4dl 5 месяцев назад

    you are the best< thank you so much

  • @tengokhunashvili6343
    @tengokhunashvili6343 5 месяцев назад

    thanks

  • @ytRap007
    @ytRap007 10 месяцев назад

    thanks great help

  • @smilli6415
    @smilli6415 10 месяцев назад

    can you break down other thngs on design systems like typography, colors etc thanks

  • @bindass_gamer_ff137
    @bindass_gamer_ff137 2 месяца назад

    We are waiting for your next video...

  • @rodmm3010
    @rodmm3010 7 месяцев назад

    Legend!

  • @nobody-bt7mu
    @nobody-bt7mu 10 месяцев назад +2

    I've always used 62.5% as a root font size transforming 16px to 10px so that it's not confusing. It's a rather common practice for some developers to do this because it's easier to remember that 10px = 1rem etc.

  • @Zunguyen13
    @Zunguyen13 Год назад

    Great content! What about corner radius? As I remember they introduced dimension for radii, spacing etc

    • @hooniexp
      @hooniexp  Год назад +2

      Thanks Vu! I'm currently working on color, but corner radius / border is on my to-do list.

  • @nataivanova
    @nataivanova Год назад

    crazy research! :)

  • @mskaratay2513
    @mskaratay2513 2 месяца назад

    🔥🔥🔥

  • @kashififtikhar9379
    @kashififtikhar9379 11 месяцев назад

    can you make more videos on DS!!!!

  • @vupham-qd8sp
    @vupham-qd8sp 5 месяцев назад

    Please comeback and make a video about color in Design System please

  • @axelhunger
    @axelhunger 6 месяцев назад

    que pasa que no puedo reproducirlo

  • @boukrimohammed
    @boukrimohammed 3 месяца назад

    why this guy have 3.7k followers??????????????????

  • @rodmm3010
    @rodmm3010 7 месяцев назад

    Legend!