Why Product Designers (UX/UI) should be using a 8pt grid system | Tutorial and Template
34 هزار بار بازدید -
2 سال پیش
-
If you’re new to product
If you’re new to product design and wondering how to space out your layouts then this is the video for you. Because consistent and scalable spacing helps both designers and developers work much faster and more consistent on projects. In this video, I’m going to show you the benefits of using an 8pt grid system and also show you how to set one up in Figma.
Don't forget to like and subscribe if you liked the video. 💛
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Try Figma for free! ✨ 👇
https://tinyurl.com/bdesm8h2
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Little mistake in the video, the margins should be 96pt not 98pt.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Chapters
00:00 Into
01:52 Why a multiple of 8?
02:30 How do you set up an 8pt grid system?
03:17 Jump into Figma to set up an 8pt grid system
04:16 What are padding and margins?
04:38 Looking at the grid setup on a frame
05:56 How does an 8pt gid look in practice
10:07 Outro
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Figma Template
👉 https://www.gemmahelyer.co.uk/resources
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Auto Layout Video
Why Figma Auto Layout Is Good for UX ...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
⭐ Get your first role as a UX Designer with Mentor Design Academy
Part-time self-paced mentored bootcamp designed to help people from all backgrounds transition to a future-proof and fulfilling career in tech.
https://mentodesign.academy/?via=gemma
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✧ 1:1 mentoring Sessions:
Are you a junior designer looking to find your first ever UX or UI job I can help you prepare your portfolio and give you tips on how to get into the industry without experience. Then Book a 1:1 mentoring session with me.
https://superpeer.com/gemmahelyer/?hl=en
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✧ Join the world’s largest online design school, Interaction Design Foundation (IxDF).
https://www.interaction-design.org/le...
Join today and Claim your $200 discount or 3 Free Months Membership (affiliate link)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✧ Join Webflow ✧
Build beautiful websites without writing a line of code(affiliate)
https://webflow.grsm.io/4715274
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Want to work with me?
✉️ Email me at:
[email protected]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can also find me here:
♥ Instagram https://www.instagram.com/gemmahelyer...
♥ Dribbble https://dribbble.com/Helyer/?hl=en
♥ Website https://www.gemmahelyer.co.uk/
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Channel into Outro:
Adventures by A Himitsu
SoundCloud: a-himitsu
Facebook: ahimitsu
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
FAQs
♥ What is your name - Gemma Helyer
♥ How do you pronounce your last name? - Heli-er
♥ Where are you from? - Cardiff, South Wales, United Kingdom
♥ Can you make a video about ---- and ---? - Probably yes. Comment below and ask :)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Don't Forget To Subscribe :D
Loves and hugs
Gemma ♥
Don't forget to like and subscribe if you liked the video. 💛
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Try Figma for free! ✨ 👇
https://tinyurl.com/bdesm8h2
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Little mistake in the video, the margins should be 96pt not 98pt.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
00:00 Into
01:52 Why a multiple of 8?
02:30 How do you set up an 8pt grid system?
03:17 Jump into Figma to set up an 8pt grid system
04:16 What are padding and margins?
04:38 Looking at the grid setup on a frame
05:56 How does an 8pt gid look in practice
10:07 Outro
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Figma Template
👉 https://www.gemmahelyer.co.uk/resources
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Auto Layout Video
Why Figma Auto Layout Is Good for UX ...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
⭐ Get your first role as a UX Designer with Mentor Design Academy
Part-time self-paced mentored bootcamp designed to help people from all backgrounds transition to a future-proof and fulfilling career in tech.
https://mentodesign.academy/?via=gemma
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✧ 1:1 mentoring Sessions:
Are you a junior designer looking to find your first ever UX or UI job I can help you prepare your portfolio and give you tips on how to get into the industry without experience. Then Book a 1:1 mentoring session with me.
https://superpeer.com/gemmahelyer/?hl=en
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✧ Join the world’s largest online design school, Interaction Design Foundation (IxDF).
https://www.interaction-design.org/le...
Join today and Claim your $200 discount or 3 Free Months Membership (affiliate link)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
✧ Join Webflow ✧
Build beautiful websites without writing a line of code(affiliate)
https://webflow.grsm.io/4715274
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Want to work with me?
✉️ Email me at:
[email protected]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can also find me here:
♥ Instagram https://www.instagram.com/gemmahelyer...
♥ Dribbble https://dribbble.com/Helyer/?hl=en
♥ Website https://www.gemmahelyer.co.uk/
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Channel into Outro:
Adventures by A Himitsu
SoundCloud: a-himitsu
Facebook: ahimitsu
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
FAQs
♥ What is your name - Gemma Helyer
♥ How do you pronounce your last name? - Heli-er
♥ Where are you from? - Cardiff, South Wales, United Kingdom
♥ Can you make a video about ---- and ---? - Probably yes. Comment below and ask :)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Don't Forget To Subscribe :D
Loves and hugs
Gemma ♥
2 سال پیش
در تاریخ 1401/01/31 منتشر شده
است.
34,081
بـار بازدید شده