(chill funky rock music) - Okay, so about two years ago, I made a video about the design system that I'd credited in Figma for the ConvertKit marketing site, and since then, a lot of great features have been introduced to Figma that make creating
components more powerful and make it easier to
set up a design system, but I haven't implemented any of them. In fact, if I'm being really honest, which like, why not,
I suppose I should be, I haven't really made many improvements to the design system at all since then. It's very outdated now,
it's not serving our needs, and as creative director, that is obviously something
I need to work on. So I'm sure I'm going to share a lot more of the process of creating
an updated version of the system in future videos and also over on my Twitch channel
(bell tinkling) as I work on it, but right now I'm kind
of in learning mode, where I'm figuring out best practices for website design systems and seeing what other people do. And the other day I was
interviewing Matt Plays, who is the lead brand
designer at Help Scout for my show Inside
Marketing Design, plug plug, and there was one point in the interview where he went deep on explaining the spacing
component that him and the team had created for
a new Help Scout project, and I was fascinated. It is the exact kind of nerdy detail thing that I wanna be learning about right now, and so I wanted to share
it with you as well. So, this is Matt explaining the component as part of their approach to
the design of In The Works. - We front-loaded this project with a lot of design system work. So as soon as we got our
brand direction approved, we started creating a design system and library in Figma. Another really useful tool, it's kind of a totally in the weeds thing, so I hope the audience is ready for it. - We're ready for in the weeds. This is the point of the show. Go for it. - One really cool
component that I worked on, was just this spacing unit component. So I wanted to standardize our spacing, throughout the project, so that way we could just stay consistent and not have to juggle values mentally or have them documented. We were actually using a component, and so the component has
so many wild variants. I found this old blog post by
a studio called The Scenery and they were somewhere out in the Midwest and they talked about using
the Fibonacci sequence for their spacing units. So, it would be the two
proceeding units equal the next. - Oh, yup yup.
- So if one is 10, the next is 20, the following one is 30, the following one is 50, you know, and so on. What that ends up doing is, it creates like meaningful
gaps between them, and I found that makes
decision making easier. One spacing unit, when you're
talking 160 versus 100, one is right, one is wrong. - Right. - Those are big differences. You can easily tell, like what is the appropriate thing to do? So we did that, as our base, for sort of a desktop viewport, and we actually then
multiply that by a ratio. This is where I kind
of added to that idea. On mobile, we halved that. So, those units were halved and on extra large screens, those were multiplied by
a factor of like 1.25. And what that enabled us to do is, basically, we had these checkpoints where pixel values are super round and we can create comps for them, but ultimately we created
a set of variables that developers used in
code as CSS variables that we were able to just
really reference semantically. So we could say like, this is a medium, like, this grid has medium gaps. The padding of this
section is large, like, and we got to be really,
really consistent with that. It was a lot of front-end work, but I think what that ended up doing, was it gave us all the
same pieces to work with. So we're creating components
with auto layout, zero spacing, and we're literally using these
spacers in our auto layouts. There's a toggle, if you
want to toggle them on for visibility, or off,
you can do that as well, which is kind of cool, but that enabled us all to stay in sync, and then it made delegating
components really, really easy to do. - Matt shared loads more
details about the system and about brand and marketing design in general at Help Scout in the episode. So you should go and head on over and watch that, or listen to it. If you'd like to hear more, you can get it on the Inside Marketing
Design YouTube channel, which I think cards are in this corner, or just search for Inside Marketing Design in your podcast app. But I always love when I get to take a look inside another
designer's Figma files. We can learn so much by seeing how our peers solve problems and how they do their work. So, if you're needing to
create a system in Figma for a marketing website yourself, I hope that you'll come
on this journey with me as I figure it all out and share with you what
I'm learning along the way. Step one for me, I think, is gonna be doing an audit of our site, so I'll probably share a video about that, about the results of it, and then it will be time, obviously, to start systemizing our
pixel values, like Matt did, as well as all of our components. It's gonna be a bit of a project. Please do head on over and watch the full interview with Matt. You can click on it right here. I think you'll really like it, and I'm really proud of it. So, thanks in advance for tuning in, and I will see you in a future video. (chill funky rock music)
