Creating a marketing site

design system in Figma

A checklist & tips for setting up and
working with a design system

CHECKLIST
Work through these steps to put together a design system for
your existing website. More in-depth tips and how-to guides
for each step can be found on the following pages.

Create a new Figma file with 9 frames named:
Colors, Typography, Buttons, Icons, Logos,
Navigation, UI elements, Product Images &
Illustrations.
Survey your website and design files and copy
repeated elements onto the relevant page in the
Figma file.
Save your brand colors as a style with the HEX
code as the name.
Organise your type styles and save them as a style
named H1, H2, H3, body etc.
Create component for each button shape used on
your site.
Replace the logos and type styling in your
navigation elements with your new logo
components and text styles.
Save a version of the navigation at each screen size
you mock up as a component (eg: desktop, tablet,
mobile)
Replace type styling and icons used in UI elements
with text styles and new icon components.
Set Constraints for each UI element so that it can
be resized as desired. Save them all as components.
Rename your product images using a structure like
“long screenshot / feature name”. save them all as
components.

Use an instance of the shape component to add
text and/or icons to create your buttons. Group and
save as a component.
Within each button duplicate layers to add styling
(eg: a hollow button version or a shadow)
Make sure all icons are on the same size frame and
lay out in a grid.
Make each icon frame a component named the
same as in the codebase.
Lay out each colorway and arrangement of your
logo and name them using a structure like “long /
original”, “long / white”, “stacked / original” etc.
Save each illustration as a component, arranging
with a naming structure as necessary.
Create a blank frame at each screen size you
design to, with the grid you usually use.
Save each grid as a style.
Add a navigation component to each template and
save each frame as a component named “Desktop
template”, “Mobile template” etc.
Create a blank frame for any other image/asset
size you create often and save as a component.
Publish the Figma file to the team library.

charlimarie.com/design-systems | 1
 SURVEYING YOUR WEBSITE
Design systems can seem overwhelming, but what helped
me get to grips with them was realising that you probably
already have a design system, it’s just not documented yet.

Start by going through your website with a fine-tooth comb

and looking for elements and styles that are repeated.
Maybe they’re repeated a lot like colors, buttons or
typography, and maybe they’re only repeated a few times,
like a certain UI element; but gather them all together in a
new Figma file.

This is a good chance to align elements that look fairly

similar, but have some subtle differences and pick one style
to use going forward. And remember you can add to your
design system over time, so if you ever find yourself opening
an old file to copy and paste something into the current
design you’re working on, that would be a good thing to add
to your design system.

DESIGN SYSTEM FILE SETUP

If your Figma team is shared between both a marketing and
a product design team, it’s a good idea to think about what
styles might be shared between you both, and
which should be kept separate. In our case
at ConvertKit, the colors are the only thing
shared so they are in one shared file, and the
rest of my marketing site design system is in a
separate file.

To share a file to a library in Figma, select the

book icon in the Assets panel and click Publish.

You’ll then be able to toggle the library on

or off in any new file you create and on the
team dashboard you can even select Enable
Libraries for all team files to have the library on
by default.

Any style or component you create within the

shared library file will be available to use in any other file.

charlimarie.com/design-systems | 2
Here’s a high level look at the ConvertKit marketing site
design system with the frames mentioned in the checklist.

When your design system is published and the library

enabled in a file you’re working on, you’ll see all the
components in the left sidebar and the type and color/fill
styles will be available on the right-hand side.

charlimarie.com/design-systems | 3
 COLORS
Create a block of each brand color and save it by clicking the
Create Style plus icon. For best practice name the color with
the HEX code or with whatever color variable is used in your
codebase. It will help speed up the development process,
especially when either you or your developer are trying to
work out which shade of grey is used for a block!

TYPOGRAPHY
Save each type style the same way you saved a color, by
clicking the Create Style plus icon. If you need to edit a style
after you’ve created it, click the Edit Style icon and make
your changes. This will update across anywhere your text
style is used once you publish the changes.

charlimarie.com/design-systems | 4
 BUTTONS
For buttons, first create a shape for each button type on your
site and save it as a component. Here are mine named btn-
lg, btn-xl, btn-rounded

Next drag in an instance of that button shape fro, the assets

panel, or simply copy and paste it. Add text, group it, name
it and save it as a component by
right clicking and selecting Create
Component (or learn the keyboard
shortcut!).

In my example at to the right you can

see the btn-lg component instance, as
indicated by a hollow diamond icon,
is nested inside the large / primary
button main component, as indicated
by the four-diamond icon.

Nesting components like this means that if I make a change

to my main button shape, the change will be applied to this
button too.

Also inside the button component are two other layers: an

outline version (simply a duplicate of the Filled layer with the
Fill and stroke styles changed) and a shadow layer (simply
adding a shadow style to the button).
This way I can easily toggle a layer on
or off to get a different button style.

I duplicate the primary button shown

above and change the background
color, then save that as a new
component. Now we have three layers
of nesting, so if I decide to move the
text on the main button, it will also be
applied to any of my color variations too.

charlimarie.com/design-systems | 5
Here’s a look at my buttons frame in my Figma design system
file. In it I’ve laid out all the different versions of my buttons
so that I can see them all. But because the hollow buttons
are a style within the main button, I don’t see them in my
Assets panel when I’m working.

I find this tidier as there is less to scroll through, but I know

to get a green hollow button, I should drag in the green filled
button and toggle the layer inside it.

charlimarie.com/design-systems | 6
 ICONS
Choose a size to display icons at (I went for 32x32px) and
display them all within a frame of that size.

Name them according to your codebase, lay them out in a

grid in your design system to see them all and save each as
a component. (A tip: if you have some white icons, change the
background of the frame to a pale grey and you’ll be able to see
the icons in the Assets panel easier)

Components in a shared library are arranged based on the

name of the frame they’re in. So since all your icons are
within an “Icons” frame, you’ll be able to use the Instance
dropdown to swap an icon out for a different one in your
design.

The same applied to any other component! Figma uses the

artboard name to know if something is a related component,
and will make them available to you in the dropdown, so this
is useful for swapping out buttons and logos too.

charlimarie.com/design-systems | 7
 LOGOS
I’ve arranged the three different versions of the ConvertKit
logo in it’s three different colorways on a frame.

As well as organising things by frame name, Figma also

organises based on naming convention. If you type a /
in a component name, you can create a category for it
(incidentally, this works for text and color styles too).

Here I’ve named my logos according to their colorway with a

category of long, stacked, or logomark.

Because of these layer names, now the Instance panel when

I’m using a logo in a design just shows me the different
colorway options for that logo arrangement, because my
naming convention has told it that
these are the ones that are related.

If I want to swap a long logo out for

a stacked one, I’ll need to drag it in
from the Assets panel instead. (Which
is fine as they’re completely different
sizes so I’d likely need to tweak my
design if I did that anyway!)

charlimarie.com/design-systems | 8
 NAVIGATION
Use your logo components and type styles in your navigation
so that everything is connected and it’s easy to make edits if
needed.

In my navigation frame in my design file I have three

versions of each at desktop, tablet and mobile size (the three
breakpoints I tend to mock up).

With each of my top navigation components, I have used the

hidden layer/toggling technique like on the buttons to save
both a dark and a light version of the navigation. This way
it’s easy to toggle on a different version depending on the
background I place the navigation on.

UI ELEMENTS
The nature of a marketing site means that you’ll likely have
less UI elements in your design system than a product
or application would, but having any repeated elements
saved in your design system will make it much faster to put
mockups together.

charlimarie.com/design-systems | 9
The UI elements in my design system are mostly either a
testimonial quote block, or an icon + heading + text block.
These are incredibly useful because I can add one to my
design and easily swap out the text, photos and icons.

These are design elements grouped

together and saved as a component,
but one thing you should pay careful
attention to here to make them useful is
the Constraints. Think about what you
want each item within your UI element
to do when you shrink or expand it to fit
different column widths in your design
and edit the constraints to match (this
might take a bit of trial and error!) In this
quote block for example the quote text
is set to scale horizontally, but stay stuck
to the top. And the byline is set to stay at
the center bottom.

charlimarie.com/design-systems | 10
With these settings it’s easy to add text to the quote and
expand the box to fit it, with the byline staying stuck to the
bottom. And if I shrink the width everything will stay in the
right place too.

These UI elements make use of nested components too. For

my icon+heading blocks for example, the icon is a nested
component so I can easily swap it out for another when I’m
using it in my design.

charlimarie.com/design-systems | 11
 PRODUCT IMAGES
To easily access screenshots and imagery from the product
you are marketing, save them to your design system!

I have a frame with a screenshot of

each main part of the ConvertKit
application so that I can easily grab
them to add to my design, and
so that when a part of the app is
updated, it’s easy for me to update
that screenshot and have it apply to
anywhere I’ve used it in a design file.

I’ve used the layer naming

convention to arrange these too
by having both a long and a short
screenshot for each part, for different
use cases.

I also have an illustrated laptop mockup I often use in

imagery, with an instance of a screenshot inside it. This way if
I use the laptop I can swap out the screenshot to be whatever
I want using the Instance dropdown.

charlimarie.com/design-systems | 12
 ILLUSTRATIONS
I have illustrations on a separate frame in my Design
System file because they are used differently to icons, and I
don’t want them appearing in the instance menu when I’m
swapping out an icon.

These are illustrative pieces I use in my designs and being

able to grab them from the assets panel (even though some
are very simple shapes!) is good for my workflow.

TEMPLATES
The last piece of my Design System puzzle are templates. I
use these to help me quickly get started on a new project.

To create these I made a frame at the various sizes I design

to, listed here if you want to copy them:

Desktop: 1440px wide

Tablet: 991px wide

Mobile: 320px wide

Each frame is however long you like (mine are about 5000px).
Within each frame I’ve setup a corresponding grid that
closely matches the Bootstrap grid we use on our marketing
website.

charlimarie.com/design-systems | 13
Here are the grid settings if you’d like to copy them too:

I add the navigation and footer to each frame and then save
the whole frame as a component. This makes it accessible
from my assets panel when I start a new file, so I can
immediately get started with designing. To use it, I drag it in
right click and Detach Instance.

I also have a few other frames saved for social images that I
find myself needing often.

charlimarie.com/design-systems | 14
Go get started creating
your design system!
This guide was intended for using to analyse and set up a
system for an existing website. So even if your site is huge, I
promise you it’s not too late to set up a design system. If you
take a bit of time now it will mean you can create mockups
faster and have a better workflow in the future.

To see my design system in action, watch the video here:

Creating a design system in Figma for a marketing website

Watch the video

charlimarie.com/design-systems | 15