Figma Tips and Tricks: A Crash Course for Beginners

One of my good friends recently started transitioning from Adobe XD to Figma. As he’s been making the switch, he’s asked me a lot of questions about how to use Figma effectively. While I’m not a Figma expert, I’ve spent quite a bit of time using it and have discovered some tips and tricks that make it my favorite design tool.

Over time, I’ve shared several tutorials with him, and I realized these might be helpful to others as well. So, I’ve decided to put together this post to highlight some of my favorite Figma features. This isn’t a comprehensive tutorial, but more of a crash course on key features that might not be obvious when you first start using Figma.

If you’re transitioning to Figma or just getting started, let’s dive in!

Auto Layout: A Game-Changer for Design

One of Figma’s standout features is Auto Layout, which essentially brings Flexbox-like functionality into your design tool. It’s incredibly useful for creating scalable and responsive designs.

Creating Buttons with Auto Layout

Let’s start with a simple example: creating a button.

1. Add text for your button (e.g., “Button”) and set the font size to 18px.
2. Draw a rectangle behind the text to serve as the button’s background.
3. Manually adjust the rectangle’s size and center the text vertically and horizontally.

At this point, you have a basic button. However, if you change the text to something longer, like “Call Us Today,” the text will overflow the background, which isn’t ideal.

This is where Auto Layout comes in:

1. Select the button elements and click the + button next to Auto Layout (or use the shortcut Command + Shift + A).
2. Set horizontal and vertical padding (e.g., 32px horizontally and 12px vertically).

Now, when you change the text, the button automatically resizes to maintain its proportions—just like a button on a website.

Using Auto Layout for Navigation Menus

Auto Layout isn’t limited to buttons. You can use it to create scalable navigation menus.

1. Create menu items like “Home,” “Services,” “About,” and “Get Started.”
2. Use Auto Layout to distribute the items evenly and set a consistent horizontal gap (e.g., 24px).

If you update the text (e.g., changing “Services” to “Our Services”), Auto Layout ensures the spacing remains consistent. You can even rearrange menu items, and the layout will adjust automatically.

Building Headers with Auto Layout

You can take Auto Layout a step further by creating entire headers.

1. Add a logo and navigation menu to your design.
2. Use Auto Layout to group them into a single frame.
3. Set the frame’s width to a fixed value (e.g., 1280px) to match your website’s content width.
4. Adjust alignment settings to ensure the logo stays on the left and the menu stays on the right.

Auto Layout makes it easy to scale and adjust your designs, whether you’re working on individual elements or entire sections.

Color and Text Styles

Figma allows you to create reusable color styles and text styles, which work similarly to variables in web development.

Setting Up Color Styles

1. Select an element (e.g., a logo) and choose a fill color.
2. Click the four dots next to the fill and then click the + button to create a new style.
3. Name the style (e.g., “Brand Red”) and save it.

Now, you can apply this color style to other elements, like buttons. If you update the color later, all elements using the style will update automatically.

Setting Up Text Styles

Text styles work the same way.

1. Select text and adjust its properties (e.g., font family, size, weight).
2. Click the four dots next to the text settings and create a new style (e.g., “Menu Text”).

You can reuse this text style across your design, ensuring consistency and making global updates easy.

Components: Reusable Design Elements

Components allow you to create reusable design elements that can be updated globally.

Creating a Button Component

1. Select your button and click Create Component in the top menu.
2. Name the component (e.g., “Button”).

Now, you can drag instances of this button from the Assets tab into your design. If you update the master component (e.g., changing padding or colors), all instances will update automatically.

Adding Variants to Components

You can create variants of components to handle different states, like hover effects.

1. Select your button component and click Add Variant.
2. Adjust the variant’s properties (e.g., darken the color for a hover state).
3. Name the variants (e.g., “Primary” and “Primary Hover”).

In your design, you can switch between variants to show different states.

Prototyping Interactions

Figma’s Prototype Mode lets you create interactive previews, such as hover effects or page navigation.

1. Switch to Prototype Mode and select an element.
2. Drag the interaction handle to another element (e.g., a hover state button).
3. Set the interaction type (e.g., “While Hovering”) and animation (e.g., “Smart Animate” with 250ms duration).

Preview your design to see the interactions in action. This is great for showing clients how their website will behave.

Using Grids for Consistent Layouts

Grids help you maintain consistent spacing and alignment in your designs.

1. Add a frame to your design (e.g., a MacBook Pro 16″ frame).
2. Enable Layout Grid and switch the type to Columns.
3. Set the column count (e.g., 12), gutter width (e.g., 16px), and margins to match your website’s content width.

Grids make it easier to align elements and create cohesive layouts.

Dev Mode: Bridging Design and Development

Figma’s Dev Mode simplifies the handoff between design and development.

1. Switch to Dev Mode using the toggle in the top menu.
2. Select an element to view its CSS properties, including padding, alignment, and colors.

You can even change units (e.g., px to rem) to match your development workflow. Dev Mode is a powerful tool for developers and designers alike.

Wrapping Up

Figma is packed with features that make it an incredibly versatile design tool. While this post only scratches the surface, I hope it gives you a solid foundation to start exploring.

Features like Auto Layout, components, and Dev Mode can significantly improve your workflow, whether you’re designing for yourself or collaborating with a team.

The best way to learn Figma is by practicing. Spend time experimenting with these features, and you’ll quickly build the muscle memory needed to use them effectively.