Тёмный

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

Hoonie XP
Подписаться 3 тыс.
Просмотров 24 тыс.
50% 1

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

Наука

Опубликовано:

 

15 окт 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 56   
@donniedamato
@donniedamato 6 месяцев назад
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 6 месяцев назад
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
@itsaaronward
@itsaaronward 11 дней назад
Thanks, Hoonie. This was super interesting and fits perfectly with wanting to build a design system soon. Appreciate you putting this together.
@alin4iiks
@alin4iiks 4 месяца назад
Such an insightful analysis! It saves so much time. Thank you for creating that!
@daniellchoii
@daniellchoii 7 месяцев назад
Your content has helped me grow tremendously in my career. Thank you!
@diporko2486
@diporko2486 Месяц назад
You took the Spacing analysis to the next level. I really appreciate the hard you put into making this video.
@slingshotpoem520
@slingshotpoem520 Месяц назад
Stunning presentation! Thanks a lot for this video.
@fisuhan
@fisuhan 6 месяцев назад
You just nailed it. Please continue with these type of videos. ❤
@leogotv
@leogotv 3 дня назад
Great work! Thanks!
@shirleyxie7144
@shirleyxie7144 6 месяцев назад
That's awesome!! ur analysis is so detailed which help me a lot.
@danmacmahon
@danmacmahon 6 месяцев назад
Great info! Nice to have it all broken out and explained succinctly - much better than my own observations and anecdotal thoughts about it!
@brianahn0331
@brianahn0331 6 месяцев назад
Wow, Hoonie. Great moves, keep it up. Proud of you!
@mitak.3686
@mitak.3686 4 месяца назад
Whoa extremely extremely helpful video! Thank you for taking the time to make this. Would love to see you cover color next!
@Underhills
@Underhills 3 месяца назад
This ig gold. Thanks for sharing great insight!🏆
@johnnnyfoley
@johnnnyfoley 3 дня назад
Thanks Hoonie!
@EdmundFaust
@EdmundFaust 2 месяца назад
Great comparison 💪🏻✨ Really enjoyed watching it 🙂
@rodnem
@rodnem 6 месяцев назад
Thanks a lot for this work!
@denislavprayerdimov7480
@denislavprayerdimov7480 6 месяцев назад
keep it up bro, we love your content!
@willcullen8333
@willcullen8333 3 месяца назад
Seriously good content man, can't wait for you to upload again!
@asvikram1628
@asvikram1628 Месяц назад
Thank you so much man, you saved my time and very greatful information
@IvanProle
@IvanProle 6 месяцев назад
Great work, love it
@Greatkfunky
@Greatkfunky 3 месяца назад
Great job! Thanks!
@thecreativeone1489
@thecreativeone1489 4 месяца назад
Thanks so much Hoonie, I enjoyed your last video which prompt me to be here right now and about to watch this 🎉.
@D4sxysrb
@D4sxysrb 6 месяцев назад
This is really insightful
@ytrpaz
@ytrpaz 3 месяца назад
thanks great help
@mydesignhq
@mydesignhq 7 месяцев назад
Great Content. thank you. Please create more.
@federitossa
@federitossa 5 месяцев назад
This is priceless! Thanks a lot
@The1DAchannel
@The1DAchannel 7 месяцев назад
Loving these mate! Would love to see you cover even more foundational categories :)
@hooniexp
@hooniexp 6 месяцев назад
Thank you! I am currently working on covering color next.
@SimonDeDesigner
@SimonDeDesigner 6 месяцев назад
That is extremely useful, thanks for that! Really.
@bengeorge9699
@bengeorge9699 2 месяца назад
this is so much great work
@victorviegas164
@victorviegas164 6 месяцев назад
Keep it up, Hoonie!🚀
@ashikmathewtharakan8146
@ashikmathewtharakan8146 7 месяцев назад
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 7 месяцев назад
Thanks Ashik! I appreciate the support. I'm currently working on the next video at the moment. :)
@uswa_zd.
@uswa_zd. 6 месяцев назад
Amazing content!
@MrHardpx
@MrHardpx 7 месяцев назад
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 7 месяцев назад
That's awesome. I'm glad to hear that it helps you with your workflow. Thanks Carlos!
@SigmaLance3375
@SigmaLance3375 3 месяца назад
This is brilliant.
@MahafujHossain-mz8dq
@MahafujHossain-mz8dq Месяц назад
We need more of this type analysis video❤ I hope we will get more videos like that
@sayekatchakraborty2552
@sayekatchakraborty2552 7 месяцев назад
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
@rodmm3010
@rodmm3010 Месяц назад
Legend!
@daniel397
@daniel397 Месяц назад
Good content!
@nobody-bt7mu
@nobody-bt7mu 4 месяца назад
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 6 месяцев назад
Cool at 12:45 there is an RGB effect on the like and dislike buttons. How do you do that?
@nataivanova
@nataivanova 5 месяцев назад
crazy research! :)
@JordacheB
@JordacheB 6 месяцев назад
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.
@Zunguyen13
@Zunguyen13 6 месяцев назад
Great content! What about corner radius? As I remember they introduced dimension for radii, spacing etc
@hooniexp
@hooniexp 6 месяцев назад
Thanks Vu! I'm currently working on color, but corner radius / border is on my to-do list.
@smilli6415
@smilli6415 3 месяца назад
can you break down other thngs on design systems like typography, colors etc thanks
@kashififtikhar9379
@kashififtikhar9379 4 месяца назад
can you make more videos on DS!!!!
@Noel-ik3pg
@Noel-ik3pg Месяц назад
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.
@richardgravecz
@richardgravecz 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 2 месяца назад
i wonder this too. lmk if you find some answers.
@beetauri
@beetauri 2 месяца назад
i guess it's because the values are in rem instead of pixels, so they are scalable
@dwightschrutee
@dwightschrutee 3 месяца назад
You should have some donation service open that we can back you up so that you can continue working this high quality videos
@rodmm3010
@rodmm3010 Месяц назад
Legend!
Далее
Subway Surfers вернулась к классике
00:34
Full stack web development part 76
6:36
Master Spacing in UI Design 💪
10:23
Просмотров 22 тыс.
Create state in prototypes with variables
16:04
Просмотров 3,2 тыс.
How To Get The Perfect Spacing In Web Design
12:15
Просмотров 23 тыс.
Figma Design System: 03 Semantic Color Variables
10:20
Просмотров 4,4 тыс.
Design Better Than 99% of UI Designers
14:52
Просмотров 168 тыс.
Figma tutorial: Variables for typography
12:58
Просмотров 60 тыс.
What’s your charging level??
0:14
Просмотров 54 тыс.
Портативная PS 5 🎮 #ps5 #expressly
0:22
Просмотров 303 тыс.
#Shorts Good idea for testing to show.
0:17
Просмотров 3,6 млн