The UX writer's guide to Figma
At first glance, Figma looks complicated—but I’m excited to tell you that it’s more simple than it seems. Everything created in Figma uses the same basic building blocks. Even in massive design files with thousands of moving parts, it’s still just a bunch of simple pieces expertly glued together.
You can learn plenty about these concepts in the Get started section of our help center, but I’ll break them down with some writer-specific context.
There’s one big difference between text editors like Google Docs and design tools like Figma: depth. In Figma, objects can sit on top, underneath, or inside of each other, which means you have to determine the order of those objects.
To manage the order of things, Figma uses layers. Everything on the canvas is represented by a layer. Shapes? Layers. Lines? Layers. Strings? Yep, layers. (There are a few types of layers, most of which I’ll cover later.)
You’ll find layers in the left sidebar, or what we call the layers panel. Because everything’s a layer, everything you see on the canvas is listed in the layers panel. The order of layers in the panel determines the order of objects on the canvas, with higher layers sitting on top of lower ones.
Since you’ll often have hundreds of layers, you’ll want to organize them—group them together, nest them under each other, etc. To do that, Figma has frames. A frame is a type of layer that acts like a container—you can put other layers inside of it. To create multiple levels of hierarchy, you can (and will frequently) put a frame inside another frame.
That frame-ception is how designers create complex mocks. If you’re designing a webpage, the highest level frame might represent the entire page. Inside that huge frame, you might have a separate frame for the top navigation area. Inside that top-nav frame, you’d have more frames for the site logo, nav links, social icons, etc. You get the idea.
TL;DR: Everything is a layer. The order of layers = the order of objects. You put layers into frames to organize them and create hierarchy.
It’d be exhausting to recreate the wheel each time you start a new project. Instead, you can create common design elements to use over and over again. In Figma, we call those components. They’re usually pieces of UI, like buttons, icons, etc.
To use a component, you just make a copy of it. (We call that copy an instance.) The main versions of components typically live in a separate file called a library, to keep them from being messed with. You can copy components from the library file, or insert them into your file directly.
While you can copy anything in Figma, components are special: The copies can’t be edited. As a result, everyone using that component has an identical copy of it.
Why use components? Speed and consistency. Designers save time by having a big box of Legos (a library) at their fingertips—and because they’re all using identical copies (instances) of the same Legos (components), they can easily stay on the same page.
Fortunately for writers, text is the one part of an instance you can edit. So if you need to change the CTA on an instance of a button component, you can just click into the text layer and make your changes.
TL;DR: Components are reusable elements. To use a component, you create an instance (copy) of it.
Those are all of Figma’s basic concepts. Before we move on, let’s review:
- The order of everything is determined by layers
- You organize and add hierarchy to layers using frames
- To use a reusable component, you create an instance (or a copy) of it
If this makes sense, you’re 80% of the way there. For that last 20%, you just need to know how to use these things for your own work.
So… let’s get to work!