Create a 4pt Spacing System in Figma Like a Pro | Design Systems Part 3
1.1K views · 2025-07-28
UI Design
In Part 3 of the Design System series, you'll learn how to create a clean and consistent 4pt spacing system in Figma, along with best practices for styling numbers and data. Perfect your UI layout, grids, and alignments like a pro!
Whether you're designing dashboards, mobile apps, or web UIs — this spacing & number setup, creating stroke and opacity system will take your design system to the next level.
#DesignSystem #FigmaTutorial #4ptGrid
00:00 Intro
00:18 4pt spacing in Figma
03:48 Figma Corner Radius
06:24 Stroke System Figma
08:22 Layer Opacity in Figma
▶️ Full Design System: https://www.youtube.com/playlist?list=PLoa2mke1xzkA7UfZexzQnGdXdZ7wh1aaL
✅ Download Free Resources:
https://downloadfreebie.com/
...............................
🎯 Join our private FB community:
👉 https://www.facebook.com/groups/uixdesignacademy
...............................
☕ Enjoyed the Video? Fuel Me with a Coffee:
👉 https://buymeacoffee.com/uixdesignacademy
...............................
🎥 What to WATCH Next:
👉 https://youtu.be/uYb2IU9liWk
👉 https://youtu.be/csZHzsVreR8
👉 https://youtu.be/O4e62tbnEFE
...............................
🛠️ Most Useful Tools Links:
👉 Webflow: https://webflow.partnerlinks.io/nz6ljxn7vydv
👉 Figma: https://psxid.figma.com/z2wz3bjjbrdi
👉 Framer: https://www.framer.com?via=uixdesignacademy
🎁 promo code: FREE 3 months (partner25proyearly)
I would be very happy 🙂 If you decided to Subscribe:
https://www.youtube.com/c/UIXUniversity
Whether you're designing dashboards, mobile apps, or web UIs — this spacing & number setup, creating stroke and opacity system will take your design system to the next level.
#DesignSystem #FigmaTutorial #4ptGrid
00:00 Intro
00:18 4pt spacing in Figma
03:48 Figma Corner Radius
06:24 Stroke System Figma
08:22 Layer Opacity in Figma
▶️ Full Design System: https://www.youtube.com/playlist?list=PLoa2mke1xzkA7UfZexzQnGdXdZ7wh1aaL
✅ Download Free Resources:
https://downloadfreebie.com/
...............................
🎯 Join our private FB community:
👉 https://www.facebook.com/groups/uixdesignacademy
...............................
☕ Enjoyed the Video? Fuel Me with a Coffee:
👉 https://buymeacoffee.com/uixdesignacademy
...............................
🎥 What to WATCH Next:
👉 https://youtu.be/uYb2IU9liWk
👉 https://youtu.be/csZHzsVreR8
👉 https://youtu.be/O4e62tbnEFE
...............................
🛠️ Most Useful Tools Links:
👉 Webflow: https://webflow.partnerlinks.io/nz6ljxn7vydv
👉 Figma: https://psxid.figma.com/z2wz3bjjbrdi
👉 Framer: https://www.framer.com?via=uixdesignacademy
🎁 promo code: FREE 3 months (partner25proyearly)
I would be very happy 🙂 If you decided to Subscribe:
https://www.youtube.com/c/UIXUniversity