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, but it’s a practice that you’ve possibly followed from time to time?

Wouldn’t it be better if you could kick-start your design projects faster, and get your head into that free-flowing creative space instantly?

Well my dear friends, this is where a Design Starter Kit can come to your assistance.

Cue the intro music!


So what is a Design Starter Kit you may ask?

Is it one of those ‘Design Systems’ that everyone seems to be always talking about?

Not quite. Is it a valuable, and essential part of an overall Design System? Absolutely.

Is it one of those UI Kits that you see on design marketplaces all the time?

It isn’t that either. Unlike those ‘dime to a dozen UI Kits’ which have been created with a certain aesthetic, or to serve a particular industry, a Starter Kit is more vanilla in its base look, and feel, and doesn’t lock you into a specific style. It’s open for you to add your own interpretation dependant on the project at hand.

So what is it then?

I like to think of it as more of a Component Library and Style Guide all rolled into one. Something which enables you to have those core UI elements pre-built, ready to go, allowing your creativity room to breathe, and enabling you to focus on the nuances of a design project much faster than you may have done previously. Simple as that really.

Y’know, I like drawing rectangles as much as the next man/woman but I don’t want to go through the hassle of creating common UI elements such as Buttons, Form Inputs, Modals, Cards, and everything in between each time I start a new project. Nah!

So with all that said, let me show you, throughout this Tutorial Series, how I put together my own Starter Kit and in the process help you better understand what goes into creating a versatile and powerful Kit that you can call upon time, and time again.

Fire up Figma, and let’s do this…


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

Click Thumbnail to Enlarge

When you start creating your own Starter Kit inside of Figma, you want to start with your Colour Palette first, and when doing so, aim to keep your Base Colours to a minimum where possible (ie; the usual suspects – Primary, Secondary, and Tertiary).

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

Click Thumbnail to Enlarge

I’ve said it before, and I’ll say it again, you can create an aesthetically appealing, and user-friendly site, or app with just great Colour, and Type choices alone, and having that wider range of Tints, and Shades to call upon brings a generous amount of versatility for when you do.

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 of the Colour Panel in Figma, but that’s a time consuming process, and who’s got the time right?

Click Thumbnail to Enlarge

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

https://maketintsandshades.com

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

Click Thumbnail to Enlarge

You then select which Tints & Shades you’d like to use inside of your Kit and then simply copy back across your chosen HEX values, which you can then insert into the relevant Fill options. Give me a time-saving high-five folks!

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 the simple forward slash (/) will categorise your Colours for you, and aids in quickly finding the relevant Colour from the Inspector panel when required.

Click Thumbnail to Enlarge

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.

Click Thumbnail to Enlarge

Black and varying shades of Grey are an absolute must too. You don’t need to go overboard with the Grey variants here, around 4 or 5 will give you enough variety for your future projects.

Click Thumbnail to Enlarge

As well as the obligatory White, I also recommend adding White with varying levels of Opacity. These variants are perfect for when, for example, 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.

Click Thumbnail to Enlarge

And don’t forget those multi-purpose 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. For my own Starter Kit I opted for a generous variety, giving myself plenty of options for future products.

Click Thumbnail to Enlarge

And last, but not least, a healthy selection of Gradients always comes in handy. Who doesn’t love a good Gradient right?

Click Thumbnail to Enlarge

Now, are Gradients an absolute must for a Base Kit? Maybe not, but like I’ve mentioned before, implementing them right at the start of the initial build can save you any back-and-to if a future project calls upon them.

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.

Click Thumbnail to Enlarge

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

Click Thumbnail to Enlarge

Unlike other design tools such as 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. Hurrah!

Click Thumbnail to Enlarge

Even so, when building out your own Kit I recommend, if possible, to try and stick to a 2 Font Family rule if possible otherwise your Text Style panel can become a little too bloated.

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

Click Thumbnail to Enlarge

As well as creating oversized Display Styles (in my case; Uber and Hero), I also created styles for the usual suspects of H1 to H5 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, and reduce eye fatigue, especially when creating long-form content.

On top of 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 best 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 / Bold
  • Lead 24 / Family #1 / Regular
Click Thumbnail to Enlarge

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

To enable consistency throughout your designs, I suggest making sure that all of your text styles align to something like a 4pt Baseline Grid. Again feel free to tighten, or loosen the Line Height dependant on the Font Family you decide to use.

I also suggest creating Styles (ie; Hero, H1, Body etc…) for both Font Families. It’s a little more work in the initial setup but it allows you the freedom to easily swap between the two Fonts, and doesn’t restrict you when for example you want to swap out Font Family X for Headings, and Font Family Y for Body or vice-versa.

Give yourself the flexibility from the very beginning and save yourself any back-and-to at a later date.

Click Thumbnail to Enlarge

Now, I must admit that the process of changing to a different Font Family (once all of your Styles are in place) is not currently the most streamlined process in Figma. It’s all very manual I’m afraid!

But don’t despair, there’s an awesome plugin that I highly recommend called Batch Styler from the mucho talented Jan Six. With this super-handy plugin you can change multiple styles at once, and say “Adios” to all that manual silliness.


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

Click Thumbnail to Enlarge

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

I suggest creating Shadows suitable for both Light, and Dark designs, as well as possibly Shadows (and their accompanying Elevations, ie; 20%, 40%, 60% etc…) for both your Primary, and Secondary Base Colours, allowing yourself a little more versatility from the start.

Click Thumbnail to Enlarge

Before we wrap things up here, remember that Colour, Typography, and in some cases Elevation & Shadow Styles are the key foundational elements of any great Starter Kit, and every Component that you subsequently create is going to feature those Styles in some shape or form so it pays to get them into place first before you create anything else.

Once you have those Core Styles in place then you can move forward with adding more foundational elements such as Icons, as well as creating the many Components that will build out a solid Starter Kit, and I’ll be touching upon these in the next parts of this short Tutorial Series.

Thanks for reading the article,
Marc Andrew.

A Quick Guide on getting started with the powerful Design Tool; Figma.

Subscribe below to download my FREE Figma 101 Guide, and also receive Regular UI & UX Articles, and Tips straight to your Inbox...

Book cover with a blue background and the words 'Figma 101' written on it