4.4 Customization

Introduction

In this chapter, you will learn how to customize the design system for your needs quickly. First, I will show you how to change the color palette and typography. Then, you will learn how you can quickly edit components too.

In the first module, we've created color and text styles. Then, in the second module, we applied them to the components. This approach makes our lives easier because every change we make to the styles affects almost all components. In other words, we don't need to change the color and typography for each component separately.

Plugins in this chapter

Batch styler

Radii

Similayer

Step 1. Save to version history

Before we start, let's save the current state of our lessons file so you can go back to it after we finish this chapter.

  1. Having the file open, press CTRL + ALT + S to open the Add to version history modal.
  2. In the Title field, type in Before Customization.
  3. Click on the Save button.

Great! Let's proceed to the next step and do some customization!

Step 2. Typography

In this step, I want to show you a quick way to batch edit the text styles. Keep in mind that you can also edit styles manually one by one by right-clicking on the style and choosing Edit style.

  1. Open the Batch styler plugin. Remember that the Figmaster plugin will close because Figma allows for only one plugin to be open at a time. You will find the instructions for this Part in Figma too.
  2. Select three Text styles with the Regular weight (hold CTRL and click on the style to keep all three selected).
  3. In the Family input below, search for Roboto and select it.
  4. Click on the Update styles button below.
  5. Select all remaining styles (Texts with Medium weights and Headings) as we did previously.
  6. In the Family input below, search for Roboto and select it.
  7. Click on the Update styles button below.
  8. Close the Batch Styler plugin.

Great job! We've just changed the Font Family for the entire system with a few clicks! You can also jump back to the 4.3 Booking app or 4.1 Sign Up pages to see how our designs look with Roboto.

Thanks to the Batch Styler plugin, you can also batch change the weight of the styles by selecting the Weight below Family input.

Step 2. Colors

This step will show you how to use the Batch Styler plugin and quickly change the colors. However, if you want to use a more precise way of changing the color palette, you can do it manually by right-clicking on each style and choosing Edit style. Then you can use some color generators like Scale, Open Color or Color Box and apply the generated colors to your styles manually.

Part 1. Plugin

  1. Open the Batch styler plugin. Remember that the Figmaster plugin will close because Figma allows for only one plugin to be open at a time. You will find the instructions for this Part in Figma too.
  2. Click on the Color tab at the top.
  3. Select all Primary color styles. Pro tip! To quickly select all Primary styles, select Primary/Main and CTRL+SHIFT click on Primary/Focus.
  4. In the Hue input below, type in 210.
  5. Press the Update styles button.
  6. Close the Batch Styler plugin.

Part 3. Finishing touches

Some elements like the Figmaster logo or inner shadows don't have the styles applied. So let's fix that by applying our primary color to them.

  1. Go to the 3.2 Documentation Page, select the Figmaster logo in the side menu.
  2. Right-click on the logo and select Go to main component.
  3. Select the Purple rectangle inside the logo component.
  4. Set its color to Primary/Main.
  5. Go back to the 3.2 Documentation Page.
  6. Right-click on the Documentation Components/Header in the Color page.
  7. Select Go to main component.
  8. Change its Inner shadow color to #2F8AE4.

Step 3. Icons

If you need, you can easily add your icon library to the system we created. Just follow the instructions in Chapter 1.7 Icons - Step 2 - Part 2.

Step 4. Components

Part 1. Corner radius

  1. Go to the 2.3 Button page.
  2. Open the Radii plugin and select Snap radius.
  3. Add a Radius with a plus icon.
  4. Keep the Radius at 0 and press Apply button.
  5. Then go to the 2.4 Card page with the Radii plugin open.
  6. Press Apply again.

That's it! This is how you can change the corner radius quickly for all of your components. Then, just repeat the action for the rest of the components you want to have the corner radius set to 0.

Part 2. Padding

  1. Go to the 2.3 Button page.
  2. Select the first button in the top left corner of the variants group.
  3. Open the Similayer plugin.
  4. Select the Padding property.
  5. Click on the Select layers button.
  6. In the auto layout settings, change the padding to desired values.

This is how you can quickly change padding for your components where needed.

If you want to revert back to the state before this chapter - open the search box (CTRL + /) and search for Show version history, then right-click on Before Customization and choose Restore this version.

PreviousNext