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

  Рет қаралды 31,311

Hoonie XP

Hoonie XP

9 ай бұрын

I analyzed the top 43 design systems to see the common spacing patterns and how they apply it.
---------------------------------------------------
designsystemsforfigma.com 👇
bit.ly/3S493Sb
Proportio.App 👇
bit.ly/3QjY7Pg
Sign up for Figma's Professional Plan 👇
psxid.figma.com/jm4gmy6csi0i-...
Get started with Figma for free 👇
psxid.figma.com/t6x2fyhw237t
Waitlist for AirTable 👇
forms.gle/idxfqGDuLQv7JxMq6

Пікірлер: 67
@donniedamato
@donniedamato 8 ай бұрын
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 8 ай бұрын
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
@agnesszerafin8410
@agnesszerafin8410 6 күн бұрын
Your content is so professional and educative, please don't stop.
@Sheinkoko-i1b
@Sheinkoko-i1b 5 күн бұрын
I hope more videos from Hoonie XP. The contents are really helpful.
@itsaaronward
@itsaaronward 2 ай бұрын
Thanks, Hoonie. This was super interesting and fits perfectly with wanting to build a design system soon. Appreciate you putting this together.
@diporko2486
@diporko2486 3 ай бұрын
You took the Spacing analysis to the next level. I really appreciate the hard you put into making this video.
@alin4iiks
@alin4iiks 5 ай бұрын
Such an insightful analysis! It saves so much time. Thank you for creating that!
@daniellchoii
@daniellchoii 8 ай бұрын
Your content has helped me grow tremendously in my career. Thank you!
@danmacmahon
@danmacmahon 8 ай бұрын
Great info! Nice to have it all broken out and explained succinctly - much better than my own observations and anecdotal thoughts about it!
@fisuhan
@fisuhan 8 ай бұрын
You just nailed it. Please continue with these type of videos. ❤
@slingshotpoem520
@slingshotpoem520 3 ай бұрын
Stunning presentation! Thanks a lot for this video.
@willcullen8333
@willcullen8333 5 ай бұрын
Seriously good content man, can't wait for you to upload again!
@brianahn0331
@brianahn0331 8 ай бұрын
Wow, Hoonie. Great moves, keep it up. Proud of you!
@shirleyxie7144
@shirleyxie7144 7 ай бұрын
That's awesome!! ur analysis is so detailed which help me a lot.
@mitak.3686
@mitak.3686 6 ай бұрын
Whoa extremely extremely helpful video! Thank you for taking the time to make this. Would love to see you cover color next!
@EdmundFaust
@EdmundFaust 3 ай бұрын
Great comparison 💪🏻✨ Really enjoyed watching it 🙂
@IvanProle
@IvanProle 7 ай бұрын
Great work, love it
@denislavprayerdimov7480
@denislavprayerdimov7480 8 ай бұрын
keep it up bro, we love your content!
@Underhills
@Underhills 5 ай бұрын
This ig gold. Thanks for sharing great insight!🏆
@calmmind3160
@calmmind3160 8 күн бұрын
great work brother! very neede
@Greatkfunky
@Greatkfunky 5 ай бұрын
Great job! Thanks!
@rodnem
@rodnem 8 ай бұрын
Thanks a lot for this work!
@leogotv
@leogotv Ай бұрын
Great work! Thanks!
@thecreativeone1489
@thecreativeone1489 6 ай бұрын
Thanks so much Hoonie, I enjoyed your last video which prompt me to be here right now and about to watch this 🎉.
@UXMurt
@UXMurt Ай бұрын
This is such a great resource dude!
@D4sxysrb
@D4sxysrb 8 ай бұрын
This is really insightful
@SimonDeDesigner
@SimonDeDesigner 8 ай бұрын
That is extremely useful, thanks for that! Really.
@asvikram1628
@asvikram1628 3 ай бұрын
Thank you so much man, you saved my time and very greatful information
@federitossa
@federitossa 7 ай бұрын
This is priceless! Thanks a lot
@mydesignhq
@mydesignhq 8 ай бұрын
Great Content. thank you. Please create more.
@bengeorge9699
@bengeorge9699 3 ай бұрын
this is so much great work
@The1DAchannel
@The1DAchannel 8 ай бұрын
Loving these mate! Would love to see you cover even more foundational categories :)
@hooniexp
@hooniexp 8 ай бұрын
Thank you! I am currently working on covering color next.
@SaadAlShiekhAli-sg4dl
@SaadAlShiekhAli-sg4dl Ай бұрын
you are the best< thank you so much
@ashikmathewtharakan8146
@ashikmathewtharakan8146 8 ай бұрын
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 8 ай бұрын
Thanks Ashik! I appreciate the support. I'm currently working on the next video at the moment. :)
@uswa_zd.
@uswa_zd. 8 ай бұрын
Amazing content!
@victorviegas164
@victorviegas164 8 ай бұрын
Keep it up, Hoonie!🚀
@MrHardpx
@MrHardpx 8 ай бұрын
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 8 ай бұрын
That's awesome. I'm glad to hear that it helps you with your workflow. Thanks Carlos!
@daniel397
@daniel397 2 ай бұрын
Good content!
@SigmaLance3375
@SigmaLance3375 5 ай бұрын
This is brilliant.
@benafiamohamedabdessamd3705
@benafiamohamedabdessamd3705 Ай бұрын
your videos are so great, you should continue doing videos !!
@ruthgalvin3646
@ruthgalvin3646 Ай бұрын
Such a good video!!. You should make more.
@sayekatchakraborty2552
@sayekatchakraborty2552 8 ай бұрын
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
@MahafujHossain-mz8dq
@MahafujHossain-mz8dq 2 ай бұрын
We need more of this type analysis video❤ I hope we will get more videos like that
@rodmm3010
@rodmm3010 3 ай бұрын
Legend!
@johnnnyfoley
@johnnnyfoley Ай бұрын
Thanks Hoonie!
@ytrpaz
@ytrpaz 5 ай бұрын
thanks great help
@nataivanova
@nataivanova 7 ай бұрын
crazy research! :)
@JordacheB
@JordacheB 8 ай бұрын
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.
@tengokhunashvili6343
@tengokhunashvili6343 22 күн бұрын
thanks
@IStMl
@IStMl Күн бұрын
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...)
@nobody-bt7mu
@nobody-bt7mu 6 ай бұрын
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.
@Neptoid
@Neptoid 8 ай бұрын
Cool at 12:45 there is an RGB effect on the like and dislike buttons. How do you do that?
@Zunguyen13
@Zunguyen13 8 ай бұрын
Great content! What about corner radius? As I remember they introduced dimension for radii, spacing etc
@hooniexp
@hooniexp 8 ай бұрын
Thanks Vu! I'm currently working on color, but corner radius / border is on my to-do list.
@smilli6415
@smilli6415 5 ай бұрын
can you break down other thngs on design systems like typography, colors etc thanks
@Noel-ik3pg
@Noel-ik3pg 3 ай бұрын
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.
@dwightschrutee
@dwightschrutee 5 ай бұрын
You should have some donation service open that we can back you up so that you can continue working this high quality videos
@kashififtikhar9379
@kashififtikhar9379 6 ай бұрын
can you make more videos on DS!!!!
@richardgravecz
@richardgravecz 5 ай бұрын
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 4 ай бұрын
i wonder this too. lmk if you find some answers.
@beetauri
@beetauri 4 ай бұрын
i guess it's because the values are in rem instead of pixels, so they are scalable
@vupham-qd8sp
@vupham-qd8sp Ай бұрын
Please comeback and make a video about color in Design System please
@axelhunger
@axelhunger Ай бұрын
que pasa que no puedo reproducirlo
@rodmm3010
@rodmm3010 3 ай бұрын
Legend!
Figma Tutorial: Use Figma Variables Like a Pro (+ Practice File)
30:30
DesignWithArash
Рет қаралды 278 М.
I Can't Believe We Did This...
00:38
Stokes Twins
Рет қаралды 92 МЛН
KINDNESS ALWAYS COME BACK
00:59
dednahype
Рет қаралды 135 МЛН
아이스크림으로 체감되는 요즘 물가
00:16
진영민yeongmin
Рет қаралды 52 МЛН
Master Spacing in UI Design 💪
10:23
Jesse Showalter
Рет қаралды 33 М.
crafting sharp UI palettes in Figma with Leonardo
9:14
Paavan — Design Tutorials
Рет қаралды 2,9 М.
The Secret Science of Perfect Spacing
9:40
Chainlift
Рет қаралды 365 М.
How To Get The Perfect Spacing In Web Design
12:15
Tonic
Рет қаралды 30 М.
Brad Frost: Is Atomic Design Dead? - Hatch Conference Berlin 2023
36:59
Hatch Conference
Рет қаралды 21 М.
Supercharge Your Figma Variables | Spacing and Sizing Variables
17:11
Clicks чехол-клавиатура для iPhone ⌨️
0:59
Спутниковый телефон #обзор #товары
0:35
Product show
Рет қаралды 2,2 МЛН
Tag her 🤭💞 #miniphone #smartphone #iphone #samsung #fyp
0:11
Pockify™
Рет қаралды 34 МЛН
Mastering Picture Editing: Zoom Tools Tutorial
0:52
Photoo Edit
Рет қаралды 505 М.