As Figma documents get larger, they also become more difficult to understand and traverse. However, Figma’s outline mode, introduced a little over a year ago, makes certain layers and Figma documents overall easier to navigate, helping you pinpoint the exact component or instance you want to target — and helping you differentiate between them.
In this article, you’ll learn what outline mode does exactly, how to activate it, and how it’s useful in various scenarios.
Figma’s outline mode is quite an obscure feature so you’ll be forgiven for not even knowing that it exists, but basically it forces layers to show only their outlines, even if said layers are clipped or invisible. It’ll also show where multiple layers bonded by Boolean operations intersect and reveal the intrinsic bounds of layers with strokes.
Before we go into more detail though, let’s go over the two different ways to activate outline mode.
There are two ways to do this — via the keyboard shortcut, which is the fastest way, or via the horizontal toolbar, the slowest way:
Now, onto the use cases for outline mode.
The most frustrating thing about Figma is (or was) the inability to select layers that are behind other layers. However, with layer outlines turned on, this isn’t an issue. Not only does Figma’s outline mode make these layers visible or more visible, but you’ll be able to select them, too:
Boolean operations nondestructively combine multiple shapes to make other shapes without merging them, which means that the original shapes can still be edited if needed. That being said, you won’t be able to see the outlines of the original shapes unless you select them; that is, unless you activate Figma’s outline mode.
In the image below, two ellipses have been combined using the “Union” operation; and the lighter gray outline, only visible while in outline mode, is where the two shapes overlap:
If you add a stroke to a shape, it can appear on the “inside,” the “outside,” or it can be distributed equally to both sides (the “center”), so when using strokes there are always at least two outlines. However, it’s not possible to know which type of stroke is being used or where the intrinsic bounds are just from looking at it unless you activate Figma’s outline mode.
In the image below, the stroke outlines are the ones that are lighter gray and dashed, whereas the intrinsic bounds are black and solid (not dashed). The stroke outlines appear on both sides of the intrinsic bounds because the stroke is set to “Center.”
Layers whose parent frame or group have the Clip content option checked (or artboards, who clip by default) will be fully visible, i.e., not clipped, while show outlines is active:
If you have any layers that are hidden, Figma’s outline mode will reveal them. This is useful for deleting hidden layers that aren’t being used, helping you to keep your Figma documents tidy, or locating hidden layers that seem to have gone missing:
To be clear though, outline mode only pinpoints hidden layers; it doesn’t unhide them. To show or hide a layer:
Figma’s outline mode doesn’t have to be all-or-nothing. For example, if you’d like to activate outline mode but keep hidden layers hidden, navigate to Main menu > View > Outlines from the horizontal toolbar and make sure that the Include hidden layers option is unchecked:
Similarly, check Include object bounds to reveal the rectangular bounds of text layers and non-rectangular shapes:
All-in-all, Figma’s outline mode is quite useful, especially since you can activate it just by hitting Shift + O on the keyboard. You might find yourself turning it on and off quite frequently to help you understand where certain layers are and what they’re doing.
As always, thanks for reading!
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Drag and drop requires intentional design for each of its states. Otherwise, users will feel confused and frustrated.
Icons can play a critical role in communicating with your users. These best practices and principles will help you design effective icons.
Neubrutalism in web design rejects a polished look. It often features an asymmetrical design and aims to express individualism.
There are plenty of design systems on the market you can use and adapt. Here are some of the best Figma design systems.
