388: Design Tips and Tricks, Part 2

Design Details

This week, we cover part two of our design tips and tricks series. We talk about naming conventions, thinking in divs, structuring frames, and share a few Figma pro-tips. In The Sidebar, we talk about design content overload.

---

Golden Ratio Supporter:

A huge shoutout to Mailbrew for supporting the show this week! Mailbrew is a personal daily digest for all the stuff you care about on the internet. We love it for delivering the top links and top tweets shared by the people we follow on Twitter, reducing FOMO and cutting down on social media time.

Get started with a free trial, no credit card required, at https://mailbrew.com/dd. If you subscribe after the trial, you’ll save 30% on your first year’s subscription.

Latest VIP Patrons:

• Thuy Luong
• Eileen Wong
• Shumin Wang
• Ethelia Lung
• Flora
• Gina Lin
• Giulio Fagiolini
• Grant M Hansen
• Hidden Rayn
• Scuba Steve
• Dylan Riessen
• Christoph
• Lucas Lemonnier
• Ulli Strozynski
• Pg Gonni
• Yasmin Shibib
• Heidi Peng
• Seth Daggett
• Ho Uyen Thao
• Liu Ting Yú

---

The Sidebar:

The Sidebar is an exclusive weekly segment for our Patreon supporters. You can subscribe starting at $1 per month for access to full episodes going forward! Sign up at https://patreon.com/designdetails.

In this week's Sidebar, we talk about how to deal with design content overload. If you live and breath design, this might be for you.

---

Follow up:

• David Luft tweeted: It would be so helpful if you made a video companion to episode 386 that shows how you set up and use your grid systems in Figma.
  • Keep an eye out, we’ll try to do something here!
• Camden Gaba tweeted: Should the vertical spacing between text elements be set by their line height or multiples of your grid interval? And thanks for another episode!
  • Generally by line height, unless you just have a text-heavy site with many columns, in which case just let the text flow and then pick up the grid in between your content blocks.
  • leading-trim: the future of digital typesetting
  • NYT on how they implemented a baseline grid using CSS
• Richard Picot tweeted: Follow up question, do you conform to a grid for padding inside a button for example or is the overall size of the component more important?
  • Vertical padding just ends up being whatever is required to make your button height a certain size (e.g. minimum tap target size). Leading and trailing padding can be some step on your grid (like 16pt or 12pt).

---

Main Topic:

This week Marshall continues with part 2 of design tips and tricks! We dig into naming conventions, thinking in divs, how to structure your frames, and some Figma-only pro-tips.

• Margin considered harmful

---

Cool Things:

• Brian shared Mouseless, an indie app to help you build muscle memory for keyboard shortcuts in your most-used apps.
• Marshall shared The World’s a Little Blurry, the new Apple TV+ documentary about Billie Eilish.

---

Design Details on the Web:

• 📻 We are @designdetailsfm
  • 🎙 Brian is @brian_lovin
  • 🎙 Marshall is @marshallbock
  • 📬 Don't have Twitter? Email us at [e-mail]
• 🙌 Support us on Patreon - your support literally makes this show possible. Thank you ❤️
• ❓ Got a question? Ask it on our Listener Questions Hub, and we'll do our best to answer it on the show :)
• ⭐️ Enjoying the show? Leave us a review on iTunes

---

Byeee!