Creating a Design System in Figma

Let me show you how I put together my own Design System, and help you better understand what goes into creating a powerful System.

Creating a Design System in Figma
Photo by Kelly Sikkema / Unsplash

Do you like staring at a blank canvas every time you start a new project in Figma?

I’m guessing you’re not a big fan right?

Wouldn't it be better if you could kick-start your design projects faster, and save yourself so much time?

Well. This is where a Design System can come to your assistance.

So, what is a Design System you may ask?

In its most basic form, I like to think of it as a Component Library and Style Guide rolled into one.

Something which enables you to have those core UI elements pre-built, ready to go, allowing you to focus on the nuances of a design project, and complete it so much faster.

So with all that said, let me show you how I put together my Design System; Cabana for Figma, and in the process help you better understand what goes into creating a versatile and powerful System for yourself.

PLEASE NOTE: This article is here to help give you valuable tips, and advice on the best way of starting your own Design System. It’s not a guide on showing you how to create one from start to finish. Who’s got time for a 10000-word article right?

OK. Let's do this...

Why you should build a strong Colour palette before anything else.

An example of a palette of different colours presented in Figma

When you start creating your Design System in Figma, you want to start with your Colour Palette first, and aim to keep your Base Colours to a minimum where possible (ie; Primary, Secondary, and Tertiary).

Of course, it makes sense for the purposes of flexibility to then expand on those Base Colours by offering varying degrees of Tints (Lighter variants), and shades (Darker variants.

Now you could go ahead and create the varying Tints and Shades from your initial Base Colour by tweaking the Saturation, and Lightness values from the HSL option inside the Colour Panel in Figma, but that’s a time-consuming process.

An example of a colour selected in Figma with the colour panel visible

A tool that I use to make the whole Tints & Shades creation process even quicker can be found at the following link –

Here you can quickly produce Tints & Shades by simply pasting in your Base Colour HEX value, which in turn will then produce perfectly computed Tints & Shades for you.

An example of a blue colour palette

You then select which Tints & Shades you’d like to use inside your System, and simply copy back across your chosen HEX values, which you can then insert into the relevant Fill options.

Before we move on, let me give you a simple tip on naming conventions when it comes to your Colour Palette…

I highly recommend using something as simple as the following…

  • Primary / Base
  • Secondary / Base

Using forward slash (/) will categorise your Colours for you and aids in quickly finding the relevant Colour from the Inspector panel.

An example of a base colour with its various tints and shades

You’ll also need to look at implementing the standard Red (Error), Green (Success), and Yellow (Warning) Base Colours for usage within Notifications, Badges, and Input Field Borders for example.

An example of a palette of Warning, Success, and Error colours in Figma

Black and varying shades of Grey are an absolute must too.

As well as the obligatory White, I also recommend adding White with varying levels of Opacity. These variants are perfect for example, when you want to insert an Icon over the top of a Colour or Image, letting you easily allow as much, or as little of the Colour or Image to leak through.

An example of a Black and Grey colour palette in Figma

And don’t forget those Brand Colours.

You’ll find yourself calling upon these for many projects, and it pays to create them at the same time as your main Colour Palette.

An example of a palette of different brand colours presented in Figma

And lastly, a healthy selection of Gradients always comes in handy.

An example of a palette of different gradients presented in Figma

If you do decide to add Gradients in your initial build make sure you give yourself some versatility by maybe adding both a Left to Right, and Top to Bottom variant from the get-go.

A single example of a gradient colour presented in Figma

Give yourself plenty of Typography options to cover both Desktop and Mobile usage.

An example of a different Typography styles presented in Figma

Unlike an app like Sketch, which ties Alignment, and Colour together within the Text Style. Figma breaks these apart, allowing you to have a lot less Text Styles to manage, and makes for a much cleaner, and lighter file.

An example of a different Typography styles, with one selected, in Figma

Even so, when building out your own System I recommend sticking to a 2 Font Family rule if possible.

For my own System, I chose Inter and Oxygen as the Base Font Families because they complement each other really well, and they’re not too decorative as initial Base options.

As well as creating oversized Display Styles, I also created styles for the usual suspects of H₁ to H₅ using Modular Scaling, with my Body text size set at 18pt, and using a Ratio of 1.2.

The Body I set at a healthy 18pt to improve legibility, especially when creating long-form content.

As well as the Headings, and Body styles, I created styles for Lead, Small, Caption, and X-Small, with the latter being perfect for when creating designs for mobile, and the former for when dealing with Desktop projects.

The naming convention here is entirely down to you, and what you feel most comfortable with. I know some folks like to opt for a naming structure like Heading 1 through to Heading 6, and Body, Body L, Body S etc… and a million other kinds of naming conventions. Whatever works for you?

What I do recommend though, and following a similar pattern to your Colour Palette, is to once again use those trusty forward slashes (/) to group your Text Styles and make them much easier to reference.

Something like the following works great…

  • Lead 24 / Family #1 / Regular
  • Lead 24 / Family #2 / Regular
An example of a different Typography styles, with one selected, in Figma

With these 2 Font Families and their various styles (ie; Hero, H₁, Body etc…) I suggest creating a Regular and Bold weight variant at the bare minimum. You can, of course, add to this to suit your personal preferences at any point (ie; Light, Semi-Bold etc…)

Now. In Figma currently, when you want to change to a different Font Family you have to do things manually… each Style at a time.

Not cool!

But don’t despair, there’s an awesome plugin that I highly recommend called Batch Styler from the very talented Jan Six.

With this plugin, you can change multiple styles at once. All good!

A Figma plugin example with the words ‘Batch Styler’ in white against a dark background

And finally, don't forget those Elevations and Shadows.

An example of a dark and light shadow styles in Figma

One last addition to the core styles of any good Design System, alongside your Colour Palette, and Typography Styles are Elevations and Shadows.

I suggest creating shadows suitable for both Light, and Dark designs, and their accompanying Elevations (20%, 40%, 60%, 80% etc…)

An example of a dark and light shadow styles in Figma, with one of them selected

Icons. A good Design System needs Icons.

A selection of icons shown inside of Figma

Every good Design System needs a great set of Icons right from the start.

An icon selected on the canvas in Figma

The core elements of a powerful Design System are –

  • Colours
  • Typography
  • Elevations & Shadows
  • Icons

Other Core Components such as a Buttons, Inputs, Modals etc… are a close second, and I’ll be touching more on these very soon.

Find a lightweight, but varied Icon Set for your initial build.

For my own Design System; Cabana, I wanted a fairly substantial, but not oversized Base Icon Set.

I aimed for something that had a varied number of icons to choose from, was not too quirky in its style, and had both Fill and Line options available to me, and that’s why I settled on the Open-Source set; Eva.

A selection of icons from the Eva icon set

Another Open-Source Icon Set that I highly recommend is the beautiful Feather Icon Set.

A selection of icons from the Feather icon set

Want to organise your Icons better? Get yourself an Icon Organiser.

A selection of icons displayed inside the IconJar app

My personal choice when adding Icons to my own System is IconJar.

IconJar is Mac only, but if you’re a Windows user do not despair, you have the awesome Nucleo to call upon.

A selection of icons displayed inside the Nucleo app

Back in my System, and on the Main Components page that I’d created earlier, I simply dropped in, one by one, icons from the Eva Icon Set.

A selection of icons inside the IconJar app

The cool thing with IconJar is that it will insert your icons with a 24pt Bounding Box already applied, which aids alignment and visual consistency within your designs.

A ‘Warning’ icon selected on the canvas in Figma

Then, it was just a case of attaching the Primary Base Colour Style that I’d created previously…

A ‘Warning’ icon selected on the canvas in Figma, with different colour options shown in a fly out panel

…choosing a naming convention to aid with categorisation of my Icons (similar to what I’d created previously with the Colours, and Typography)…

  • Icon / Alert Circle / Fill
  • Icon / Alert Circle / Line
An icon selected on the canvas in Figma

…and then simply converting it to a Component (Alt + Cmd + K).

Wash. Rinse. Repeat.

Now, this part will seem a little time-consuming, but I’ve yet to find a Figma Plugin that can help automate this process well, so manual it is for the time being I’m afraid.

Choose your Main Components wisely.

A selection of components shown inside of Figma

So, what goes into a versatile, and powerful Design System?

Components. And lots of them.

It’s a big job in creating hundreds of components in the first instance but when it’s done it’s a smoother ride from there on with just smaller incremental additions as required.

It’s the part of creating a Design System that is going to take up the most of your time. Don’t expect to pump out your Main Components in one evening with a hot cup of cocoa. You’re going to have to set aside a little more time than that I’m afraid.

Always start with those smaller Components first.

A selection of Button components shown inside of Figma

What did I start with first when building out my Main Components?

Buttons. And lots of them.

Smaller Components such as Buttons are one of the most commonly used elements of any project, so it makes sense to create those first, before you move on to creating larger Components such as Modals, Cards, Calendars etc… which will inevitably feature those smaller Components at some stage.

For my System I created Primary

A selection of Button components shown inside of Figma

…and Secondary Buttons…

A selection of Button components shown inside of Figma

…with following variants:

  • Button / Primary / Extra Large / Default
  • Button / Primary / Extra Large / Left Icon
  • Button / Primary / Extra Large / Right Icon

As well as the ‘Extra Large’ option I also created ‘Large’, ‘Medium’ and ‘Small’ variants to cover both Desktop and Mobile use.

Your smaller Components will become part of a much larger Component.

A selection of Card components shown inside of Figma

As I’d done with the Buttons Components, and knowing that they would become part of a much larger Component (ie; Card, Modal etc…), I went ahead and created other smaller Components such as Avatars

A selection of Avatar components shown inside of Figma

Dropdown Menu Items

A selection of Dropdown Menu components shown inside of Figma


A selection of Placeholder components shown inside of Figma

… and Progress Bars

A selection of Progress Bar and Slider components shown inside of Figma

… to name but a few.

Doing it this way enabled me then to nest these smaller Components inside larger Components when it came to build those out.

Now, there are some folks that like to create the larger Component (ie; Card) first in its entirety, and then separate out all the elements that it consists of (ie; Button, Placeholder, Avatar etc…) into smaller Components.

Me personally, I like to design those smaller Components first, have them all at the ready, so I can then jump into creating a larger Component, and quickly choose from what I have available until I’m happy with the final build.

Anyway. I don’t want to take up too much of your valuable time here. So, here’s just a select few of the Components I added to my own System:

  • Avatars
  • Button Groups
  • Calendars
  • Cards
  • Charts
  • Comments
  • Map
  • Media Controls (Video & Audio)
  • Modals
  • Notifications
  • Pagination
  • Placeholders
  • Tooltips

Just remember to get the most commonly used UI elements into place to cover enough use cases, and you’ll be good to go with your initial build.

Like I mentioned before. Building your own System does take time (it took me 3 months to build my own, give-or-take), but the satisfaction once you’ve built it is immeasurable.

To never have the worry about starting a design project staring at a blank canvas ever again, is an awesome feeling once you have your own System in place.

By the way, if you want to improve your design skills fast, and save yourself hundreds of design hours, my Design System for Figma; Cabana could really help you out. Use the code CAB35 to receive 35% OFF. 👇

Cabana - Design System for Figma
Creating amazing designs is hard when you’ve got deadlines to meet. So we built Cabana, a Design System for Figma that enables you to start projects faster.

Thanks for reading the article,