Welcome to the second module, where you'll learn how to build components! We'll use the styles and rules we set in the previous module. Doing so will make our components consistent and allow us to edit them easily.
Big Nudge
In the 1.5 Spacing and layout chapter, we created the spacing rules that are multiplies of 4. What is more, almost all of them also multiply by 8. By default, when we press "Shift + Up/Down Arrow", the element will move 10px. Before we start, let's change the big nudge value to 8 px. It will make our job easier when moving the components around in the next chapters and modules. To do this, follow the steps below:
- Open the search box by pressing CTRL + /.
- Type in "Nudge amount..." and press Enter.
- In the Nudge amount settings, change Big nudge value to 8.
- Close the modal.
Panels
In this module, I will reference various Figma panels that you will use. Below you will find the links to the official Figma documentation with information on where they are in the UI and how to use them. If you already know how to use them, you can skip this part and continue.
Before we start
Before we start, make sure to turn off all notifications and close other apps or tabs (if you are using the browser version of Figma). That way, you'll be able to focus 100% on the lesson.
Reminder: Windows / MacOS keyboard shortcuts
In the Figmaster, I use Windows keyboard shortcuts. If you use macOS:
CTRL = Command ⌘
ALT = Option ⌥
Are you ready? Great! Let's start building the components!