Before diving into Auto Layout, let’s create local styles to combine variables into one reusable setting. This will save you time and keep your designs consistent.
The styles are great for text and drop shadow effects.
How to Create Styles in Figma
To start, you can find the Styles section just below your local variables.
Tip: Make sure to click outside of any Frame to see the settings on the right sidebar.
Once there, click the + button under Local Styles.
You’ll see several options, but in this tutorial, we’ll focus on Text Styles and Effects.
How to Create Text Styles
- Click outside any Frames to access the Local Styles panel in the right sidebar.
- Click the “+” button and choose Text Style.
- Set styles for:
- Headings (H1, H2, H3, etc.).
- Text sizes (XS, S, M, L, XL, XXL).
- Paragraphs (e.g., text-m).
Tip: Use percentages for line height (e.g., 120% = 1.2 in CSS).
To organize your styles you can right click on the style and create a folder.
Once you’ve created a text style, you can select your text, click the Apply Style icon, and the properties will apply to your element. And since we’re using variables, everything will stay consistent and easy to manage.
If you’ve downloaded the Figma file for this course, you’ll notice that the styles are already set up. But it’s important to understand how they work and why they’re so useful.
Effect Styles: Drop Shadow
Now let’s move on to Drop Shadows—also known as box shadows in CSS.
The process is very similar:
- Add a new style.
- Select Drop Shadow.
- Click the settings icon and adjust the values.
- Don’t forget to link a variable for the shadow’s color.
Once you save the style, you’ll be able to easily apply this effect to elements like cards or containers.
Tip: Make sure the element has a background color so the box shadow effect is visible.