Sketch | How to make scalable symbols | 2) Badge

Are you having this problem when you’re working with your badge symbol?

The container does not scale to the size of the content. Or when you try to resize, the symbol is broken. Then you end up detaching it from the symbol🤦‍♀️

Or it could be better like this. The elements inside are fixed in position, so no problem when resizing the symbol. But you also need to adjust the padding manually.

If you’re having this problem, you are in the right place! This article may help you.

Do you want your symbol will work like this?

• The badge container will grow as the size of the text

• Be flexible in changing the icon, icon colour, text colour, and background colour.

Let me show you how by utilizing Styling and Smart Layout 😉

1. Create Text Style and Layer Style for the component

I bet you already did that for your product’s colour palette in the Sketch library.

However, to make the components more organized and easy to use by other designers, I strongly recommend that the text style and colour style applied to a specific component should be added in a separate folder.

Here are the reasons:

• The colour pallets include many colours and typography too. However, only certain rules and style on the colour and text is applied to specific components.
• It helps reduce the cognitive load about rules of colour or text.
• It's easier to manage and change the colour within a component.

✅ Tips for organizing:

• You can number the components. The sketch will display alphabetically, so numbering can help you to arrange the order you want.

When you already set the Text style and Layer style for the Badge, remember to apply them to the symbol you create. 😉

• Name the elements properly, then you can see what you can benefit from that while you are using it later.

Here is how I named the “✏️ label" for the text and the “🎨 background" for the container. This name will show up in the Override panel, so it helps quickly identify the element and change the style quickly.

2. Using Smart Layout to make the content scalable

After you hit “Control+Y", there is a confirmation popup. You can set the Smart Layout from that. The direction of the layout depends on which side you want your badge to grow.

3. Setting for icon

⚙️ Resizing: Pin to the left/right & top and fix sized
(Benefit: keep the icon size the same and its position relative to the rectangle)

4. Setting for label

⚙️ Resizing: Pin to the left and fix sized horizontally
(Benefit: keep the label position relative to the container and remain height when resizing)

5. Override Setting

Your Override panel may go messy if you do not arrange and name the elements properly. Here is how I name the symbol and how the Override panel looks:

Depending on how flexible the components are with the colour, you may turn it on and off accordingly. Most importantly, you need to make sure you give sufficient flexibility for other designers to use it and provide a proper naming convention so everyone can understand.

This is all about the tips for a scalability badge symbol.

Hope it helps!