462: Refactoring a Design System
Episode
47 min
Read time
2 min
Topics
Productivity, Health & Wellness, Design & UX
AI-Generated Summary
Key Takeaways
- ✓Component Audit Tracking: Create a spreadsheet with heat map colors (red to green) evaluating each component across multiple dimensions: production match accuracy, color variable usage, typography consistency, layer naming, component properties, and variant implementation. Add letter grades (A+ to F) based on the worst-performing dimension to identify refactoring priorities and visualize system health at a glance.
- ✓Property Organization Hierarchy: Order component properties from global to local (type, size, layout, style, orientation, device), then visually top-to-bottom and left-to-right. Place text editing properties directly under their visibility toggles so related controls appear adjacent. Use consistent emojis for each property type (eyeball for visibility, pencil for text, diamond for icons) to enable rapid scanning of the properties panel.
- ✓Component Description Templates: Structure descriptions with rich text formatting: component name, home library, short description, and usage guidelines. Use code styling for interface terms like "fill width" or "height." Include cross-reference links to related subcomponents. Add SEO tags at bottom for alternative search terms (example: "message bubble left" component includes "comments" tag for discoverability).
- ✓Library Migration Strategy: When moving components between Figma libraries, enable both libraries for each other first. Cut and paste components together with their underscored subcomponents in a single operation to maintain connections, since unpublished subcomponents lose references when separated. Publish immediately after pasting to prevent breaking downstream instances. Frame links break when moved between files but persist within files.
- ✓Meta-Organization Philosophy: Organize library files for maintainer efficiency (back-of-house) rather than end-user presentation (front-of-house). Use auto layout with doubling padding scale: 32pt radius and spacing within components, 64pt padding around components, 128pt between labeled groups, 256pt between categories, 512pt between major sections. Scale font sizes proportionally so labels remain readable at different zoom levels.
What It Covers
Marshall Bock shares lessons from refactoring his design system during a no-meeting week at his company. He covers creating component tracking spreadsheets, establishing naming conventions with emojis, organizing variant properties, managing Figma libraries, and developing meta-organization strategies. He discusses breaking changes, template creation, and maintaining design system hygiene through regular quarterly audits.
Key Questions Answered
- •Component Audit Tracking: Create a spreadsheet with heat map colors (red to green) evaluating each component across multiple dimensions: production match accuracy, color variable usage, typography consistency, layer naming, component properties, and variant implementation. Add letter grades (A+ to F) based on the worst-performing dimension to identify refactoring priorities and visualize system health at a glance.
- •Property Organization Hierarchy: Order component properties from global to local (type, size, layout, style, orientation, device), then visually top-to-bottom and left-to-right. Place text editing properties directly under their visibility toggles so related controls appear adjacent. Use consistent emojis for each property type (eyeball for visibility, pencil for text, diamond for icons) to enable rapid scanning of the properties panel.
- •Component Description Templates: Structure descriptions with rich text formatting: component name, home library, short description, and usage guidelines. Use code styling for interface terms like "fill width" or "height." Include cross-reference links to related subcomponents. Add SEO tags at bottom for alternative search terms (example: "message bubble left" component includes "comments" tag for discoverability).
- •Library Migration Strategy: When moving components between Figma libraries, enable both libraries for each other first. Cut and paste components together with their underscored subcomponents in a single operation to maintain connections, since unpublished subcomponents lose references when separated. Publish immediately after pasting to prevent breaking downstream instances. Frame links break when moved between files but persist within files.
- •Meta-Organization Philosophy: Organize library files for maintainer efficiency (back-of-house) rather than end-user presentation (front-of-house). Use auto layout with doubling padding scale: 32pt radius and spacing within components, 64pt padding around components, 128pt between labeled groups, 256pt between categories, 512pt between major sections. Scale font sizes proportionally so labels remain readable at different zoom levels.
Notable Moment
Marshall discovered that Figma's Command+L shortcut changed from copying links to specific selected frames to only copying links to top-level canvas frames. The specific frame link function still exists but requires navigating through right-click menus without a keyboard shortcut, forcing users to dig through multiple menu levels for the more commonly needed action.
Episode Transcript
Brian, it is the hottest day of the year I heard on the news. Uh-huh. This is the day that we chose to record today, and, you know, it wouldn't be summer design details content if we didn't have at least one episode of us whinging about how hot it was in the room that we're recording here. Yeah. You're in the enclosed room. I'm in the more open, like, shaded room. So this is definitely worse for you. Well, I'm trying something new this time, Brian. The door is closed, but I have not turned off my fans. This is something I I can't hear them. Okay. Well yeah. So listeners, hopefully, you can't hear the fans in the background. I'm gonna do my best to remove them in post, and, hopefully, they're just not picked up all that much in the first place. But if you can hear them, I'm sorry, I need to not be a puddle of sweat by the end of this episode. So the fans stay out. It's inevitable. The fans are out. It's inevitable. Welcome to episode 462 of the Design Details podcast. I'm Brian Levin. And I'm Marshall Black. Welcome back for another episode, Brian. Good to be back. Good to be back. What do we got on the docket for this time? Yeah. A lot's happened since the last time we chatted, actually. Yeah. I went and touched grass in Idaho and went fishing, and then I got COVID. Uh-huh. So that delayed us a little bit. From the fish and the grass? You got the COVID? Or Yeah. Dude, we are catching fish, and they just kept coughing on us every time we catch one. It was insane. These assholes never wear a mask. They never wear masks. But, anyways, it's it's good to be back. I think we're maybe a little bit overdue, but Hey, we're here and we got a lot to talk about. We do before we get into it. We have some new, very important things. Hey, Marshall hot tub time. So welcome. Welcome to the fam. Our new, very important pixels. Shout out to Adam Noffsinger, Raffi Chilingarian, Joel Laughlin, Evie, Lam Pham, Caleb Meyer, Jacques Musafir, Sean Simmons, Juan Morales Roca, Joseph Cooper, Gareth Jones, Mohammed Al Najjar, Julian Duffy, Wenhui Yao, Phil Sayer, Draken, Anchor Roy, and Tracy McAllister. Hey. Welcome to the hot tub. The hot day. Yeah. Just sweaty designers all around. Yeah. No. Welcome. Thanks everyone for supporting the show. If you didn't know, we are a listener support podcast. Every month, designers like the aforementioned very important pixels, join us at patreon.com/designdetails where for just a dollar a month Just a buck a month? Just a buck a month, you get access to bonus content. It's an extra episode. We call it the sidebar. Sidebar. Sidebar. In this week's sidebar, we're gonna be talking about how to elegantly un ship software. Oh. So if you're gonna hear that conversation, …
Get the full transcript (9,917 words) + summary by email — free
One-time email with the complete transcript and AI summary of this episode. No account needed.
One email, no spam. We’ll also show you what SignalCast does.
You just read a 3-minute summary of a 44-minute episode.
Get Design Details summarized like this every Monday — plus up to 2 more podcasts, free.
Pick Your Podcasts — FreeKeep Reading
Books, tools, and gear mentioned in this episode
SignalCast may earn commission on purchases via these links.
Tools
by Figma
“Managing Figma libraries, and developing meta-organization strategies. He discusses breaking changes, template creation, and maintaining design system hygiene through regular quarterly audits... When moving components between Figma libraries, enable both libraries for each other first.”
More from Design Details
We summarize every new episode. Want them in your inbox?
Similar Episodes
Related episodes from other podcasts
So Money with Farnoosh Torabi
Feb 4
1940: The Science of Making Work Fair
The Diary of a CEO
Feb 2
Your Bones Break First: The Man Who Survived Being Eaten Alive!
The Mel Robbins Podcast
Jan 26
If You Feel Lost in Life, Listen to This One Conversation to Find Purpose & Meaning
The Futur
Jan 8
The Business of Design Systems and Standards w/ Jesse Reed | Ep 410
Masters of Scale
Dec 25
How to unlock your team’s creative potential
Explore Related Topics
This podcast is featured in Best Product Management Podcasts (2026) — ranked and reviewed with AI summaries.
Read this week's Health & Longevity Podcast Insights — cross-podcast analysis updated weekly.
You're clearly into Design Details.
Every Monday, we deliver AI summaries of the latest episodes from Design Details and 192+ other podcasts. Free for one show.
Start My Monday DigestNo credit card · Unsubscribe anytime