(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)