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.

And in Part Three of this short Tutorial Series I want to talk Components. Yes. Those little pieces of UI goodness!

Let’s do this…

PS: If you want to get up to speed, check out Part One, and Two of this Tutorial Series here and here.


Choose your Master Components wisely young Jedi.

Click Thumbnail to Enlarge

So what goes into a versatile, and powerful Design Starter Kit?

Components. And like the Icons in the previous part of this tutorial, 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 starter kit that is going to take up the most of your time. Don’t expect to pump out your Master Components in an evening with a hot cup of cocoa. You’re going to have to set aside a little more time than that I’m afraid.

Rome wasn’t built in a day (citation needed) last time I checked on Wikipedia and neither will your Master Components.

It’s a long haul, but it needs to be done if you want to build something that will later down the line enable you to design products much faster and simpler than you’ve previously done.


Always start with those smaller Components first.

Click Thumbnail to Enlarge

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

Buttons.

And plenty of them.

Like I mentioned, 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, and Calendars, which will inevitably feature those smaller Components at some stage.

For my own Kit I created Primary…

Click Thumbnail to Enlarge

…and Secondary Buttons…

Click Thumbnail to Enlarge

…with following variants:

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

As well as the ‘Large’ option I also created ‘Medium’ and ‘Small’ variants using the different Text Styles that I’d created previously.

Like I mentioned in previous parts, and in the case of something like a Design Starter Kit, it’s better to have too much than too little from the very start.

Then I moved onto the Fields & Inputs, with variants such as the following:

  • Fields & Inputs / Standard / Large / Default
  • Fields & Inputs / Standard / Large / Default + Label
  • Fields & Inputs / Standard / Large / Text Area
Click Thumbnail to Enlarge

Again with a couple of size variants: ‘Large’ & ‘Small’ to cater for designs for both Desktop and Mobile.


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

Click Thumbnail to Enlarge

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

Click Thumbnail to Enlarge

Placeholders

Click Thumbnail to Enlarge

… and Seek Bars

Click Thumbnail to Enlarge

Doing it this way enabled me then to nest these smaller Components inside of 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 comprises 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 pick and choose from what I have available until I’m happy with the final design. For me, it just flows so much better that way when it comes to building out those types of Components.

Anyways. I don’t want to take up too much of your valuable time here. I could list out every single Component that I built for my own Starter Kit but your eyelids will start to feel really heavy if I did.

Here’s just a select few:

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

Just remember that a Starter Kit like this is forever evolving. It doesn’t remain static. So you didn’t add those groovy, wavy Chart components to your Kit? Not a big deal. You can always come back and add those later.

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 earlier, this part of building out a Kit takes the longest to do, and parts of it will question why you started building it in the first place, but know that the satisfaction once you’ve built it out is immeasurable, and that you’ll never have to worry about starting a design project staring at a blank canvas anymore. That’s got to be a good thing right?

By the way, if all this seems like a little too time-consuming, you can pick up my ready-made Design Starter Kit for Figma; Cabana here.

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