Become a Pro at Figma

If you’re in the design world, you’ve probably heard of many different design software tools such as Sketch or Adobe XD. Figma, especially, has dramatically increased in popularity in recent years for its innovation and ease of use to make designing a less stressful process. Learning new software can be tricky and overwhelming, but there are many shortcuts, plugins, and Figma features that will make the experience more efficient and make you a pro. So, why Figma?

Sketch vs. Figma

A great thing about Figma is that it is very similar to Sketch. Many designers who entered the field, prior to 2016 when Figma launched, likely learned their footing through Sketch. Even if you don’t know Sketch and are completely new to Figma, it doesn’t take much effort to be able to catch on. Plus, Figma has a bunch of features, such as prototyping directly within the software, that can take your designs and prototypes to the next level.

Helpful Tips

Although having shortcuts is incredibly useful to speed up your designs, maintaining a proper work style will help keep you organized and avoid catastrophes. After working in Figma for over a year, here a few helpful tips I’ve learned along the way:

LABEL, LABEL, AND LABEL

There have been too many times where I have a million “groups” and “layers” and even “frames” in their generic names and couldn’t find the one layer I needed to fix. Most of the time if something in your design or prototype is conflicting, it’s due to an issue with your layering. Take the extra second to label every single thing you make, even if it is just a measuring square, so that you know what to find, where to find it, and when you need it.

Use the Desktop App over the Browser

This isn’t a huge deal and it’s completely up to personal preference, but sometimes I encounter bugs when working through the online browser, making me search through my layers for hours trying to figure out what’s wrong when there isn’t anything wrong. Figma has been great about updating, though, but I just like to work in the app to be safe.

Plug-Ins are Your Best Friend

There are thousands of plug-ins in the Figma Community that save time and can be a helpful resource to taking your designs to the next level. I highly recommend browsing the Community and installing the ones that you might be interested in using. Some that have caught my eye are:

• Figma Measure — measures the distance between two selected layers.
• Accessibility Color Contrast Checker — checks color contrast on a selected frame to test if it meets WCAG standards.
• Breakpoints — easily allows for smooth responsiveness between mobile, tablet, and desktop breakpoints.

Variants

Figma has a great tool called variants that saves more time on reusing components. For example, you can have a standard state of a button and make different variants to show a hover state, clicked state, disabled state, etc. without having to individually alter the standard for each state. Figma has a great tutorial on how to utilize variants in your work.

Figma’s “Tidy Up” Feature

When you are making cards or something that will be repeated in columns or rows, the “Tidy Up” feature can organize and evenly space them without you needing to line up each object one by one. To do this, select the objects you want to organize and hover over them. In the bottom right, you will see a blue square with white dots. Clicking on this will organize and evenly space your layers.

Grids

It’s important to make sure your designs are pixel perfect, but this can be hard to see when working on a blank frame. Grids can assist you in lining things up when you’re not sure if they’re even or not. To add a grid, select your frame and click the “+” on the right toolbar under “Layout Grid”. You can adjust how big you want the grid squares to be, or select the drop-down to only have rows or columns.

Keyboard Shortcuts

Figma has many keyboard shortcuts that can help complete your designs much quicker. Below is a list of most (if not all) of them for MacOS:

Frames/Artboards

• To begin your designs, you’ll want to create a base to be able to export or prototype them. Simply tapping “a” or “f” will allow you to click and drag the size of your frame. For preset options, the side toolbar will provide frames for common devices and sizes.
• Fun shortcut: Hit “control” + “command” + “spacebar” to add an emoji into your frame name!

How to create a frame.

Grouping

• When you have many layers that need to maintain their spacing, it can be easier to group them together so you don’t have to adjust their spacing every time they need to be moved.
• After highlighting the layers you want to group together, hit “command” + “g”.
• To ungroup your layers, select the group and hit “command” + “shift” + “g”.

How to group multiple layers.

Duplicate Layers

• Using the duplicate tool is helpful for quickly recreating elements that are not components.
• Select the layer and hit “command” + “d”. The duplicate will be on top of the original and can be clicked and dragged throughout the workspace.
• Selecting a layer and holding “option” while clicking and dragging will duplicate the layer, while also measuring the spacing between it and the original layer. After doing this, hitting “command” + “d” will maintain that spacing for new duplicates after that.

How to duplicate a layer in two ways.

Shapes

Lines

• Tap “l” (L) on your keyboard. To lock it and make it a straight line, hold shift while dragging out the desired length.

Circles

• Tap “o” to create an ellipse; hold shift while dragging to make it a perfect circle.

Rectangles

• Tap “r” to make a rectangle and hold shift while dragging to make a perfect square.

Text

• Tapping “t” will change your cursor to be able to add text. Click anywhere to begin typing or click and drag to create a container for your text.

Pen/Pencil Tool

• Tapping the letter “p” will change your cursor to the pen tool. You can create small links to create a unique shape or line. After connecting your links, you can click the arc tool in the top toolbar to shape your links into curves as needed.
• “p” + “shift” will change your cursor to the pencil tool which allows you to freehand draw.

How to create different shapes.

Components

• Components are the equivalent of symbols in Sketch.
• They are incredibly useful for elements in your design that will be repeated frequently. It helps to save time so that you don’t have to recreate the layer or duplicate it over and over.
• Highlight the layer(s) you want to make into a component and hit “command” + “option” + “k”. Your components will live in the “Assets” tab in the top left corner of your screen. To use them, click and drag from this tab to make different instances.
• Tip: Changing the master component will change all of your instances. Altering your instance layer will only change that instance.

How to make and use a component.

Masking

• Masking is a useful tool that can help shape images or alter existing shapes into ones that have more uniqueness.
• To use the masking tool, select the layers you’d like to mask and hit “control” + “command” + “m”.

How to mask an image.

Resizing

• Resizing things after you’ve completed much of your design can be incredibly frustrating. You might have constraints on some things and not others, and it stretches an object or moves it out of its aligned spot, which would alter your entire frame if you attempted to resize a frame or layer.
• To resize your frame without resizing or moving your layers, hold “command” while resizing.
• You can resize a layer while maintaining its shape in two ways:
• Hold “shift” while clicking and dragging to the desired size.
• Tap “k” to change your cursor to a double-ended arrow with two arrow heads on both sides. Resize as needed without holding any key.

How to resize layers and frames.

Auto Layout

• Auto layout is a great feature from Figma that allows you to align layers once without needing to recreate or accidentally alter. This comes in handy for making buttons with various texts while maintaining the padding.
• The process for how to use auto layout can be a little bit complicated, but this video from Figma encaptures how to use it in your designs.
• The shortcut for auto layout is “shift” + “a”.

Quick Tools

• To add an image without having to go up to the top toolbar, hit “shift” + “command” + “k” to open your computer files.
• To rename a layer without having to right click > rename layer, you can select the layer you’d like to rename and tap “command” + “r”.
• To rotate a layer without having to manually type in the degrees in the side toolbar, select the layer and hover over one of the corners. The cursor will change to an arc that will allow you to rotate your layer as needed.
• To round corners on objects without typing it in the side toolbar, double-click your object until you see small circles next to each corner. Click and drag towards the center of the object to round the corner.

Overall, Figma has many great features and tricks to elevate your designs and make the process much less stressful and time-consuming. Many designers and companies are switching over to Figma to cut down on time (which cuts down on cost). Although software tools, techniques, and trends are constantly evolving, Figma definitely seems to be at the top of its tier currently and is a fantastic tool to have on your belt as a designer.