Today, we’ve got a tour de force of some extra tips and tricks—our selection of other cool functions in Figma. We’re not creating anything in particular today, but you might like to open up a fresh Figma file and try out these techniques, or continue iterating on the tablet/desktop design you created yesterday.
Time to complete: 30 minutes
1. Create new from Sketch file
If you’ve used Sketch before, you’ve probably found much of Figma’s interface quite Intuitive and familiar. But there’s an extra perk to being a Sketch user—Figma allows you to import Sketch files! There are a couple of ways to do this—either:
- On Mac, drag and drop your Sketch file from the Finder right into the Figma window in the browser
- Or go to the hamburger menu in the top-left of the Figma window, and click “Import File”
2. Paste vs Paste Over Selection
This distinction will be familiar to Adobe users. Figma’s standard “Paste” command is the equivalent of the “Paste in place” command in Adobe software: when you paste an element, Figma will position it in the same place as the original. This is useful if you need to paste an element into another frame, and ensure it’s in a consistent place.
But sometimes you need to paste an element exactly where the current selection is. For this, you can use the “Paste over selection” command. The keyboard shortcut is ⌘Shift ⇧V on Mac, or CtrlShift ⇧V on PC.
3. Lock & unlock
Particularly when you’re working in files with lots of layers, it can be useful to lock some of them to prevent accidental selection and edits. To do this, select any object and hit ⌘Shift ⇧L (Mac) or CtrlShift ⇧L (PC). To unlock an element, make sure it’s selected in the Layers list, and repeat the same keyboard shortcut.
You can also access the Lock/Unlock commands by right-clicking (Mac/PC) or Ctrl-clicking (Mac) on a layer or its name in the Layers list.
4. Show & hide
The show/hide command works in much the same way as lock/unlock, but determines whether an element is visible within a frame. To toggle a layer’s visibility on and off, hit ⌘Shift ⇧H (Mac), or CtrlShift ⇧H (PC). Any hidden layer will be displayed in the Layers list as greyed out, and with a little eye icon next to it.
5. Select all with same…
An extremely useful feature in Figma is the ability to select all layers within a file that share some property. For example, you could select all elements in a file with the same font. This enables you both to locate those elements and, if desired, to change all of them at once. Doing this is as simple as:
- Select an element with the property you want to find (e.g. a text box that uses the font “Roboto”)
- Go to the hamburger menu, then Edit, then select the option you want (e.g. “Select all with same font”)
- Figma will select all matching layers in the file. You can then make any edits you want to all those elements at the same time.
6. Pixel grid
In addition to any other grids you’ve set up within individual frames, you can also turn on the “Pixel grid” for the whole file. This becomes visible when you zoom in close to a frame, and allows you to see where elements are sitting in relation to individual pixels.
- To toggle the Pixel grid on and off, hit ⌘' (Mac), or Ctrl' (PC).
7. Pixel preview
Related to the pixel grid is “Pixel preview”. Ordinarily, when we’re working in Figma, we see sharp, vector-based shapes and text no matter how far we zoom in. However, when we export our screens to image files like PNGs, these vectors get “rasterized”, which means they get saved as pixel data. Turning on Pixel preview gives a preview of what the file will look like when it is exported to a pixel-based image.
- To toggle Pixel preview on and off, hit CtrlP (Mac) or CtrlAltY (PC).
Note: currently Pixel preview will only preview pixels at 1x within the interface, not at Retina resolution. To work around this, you can set up your Frames at 2x size. Alternatively, you can use the Export command in the Inspector (Design tab) to save out a PNG at 2x.
8. Rasterize selection
Again related to these pixel tools, the Rasterize command allows us to convert a vector shape (like a rectangle, circle, or text), and permanently flatten it into pixel data. Usually this is not advisable, because it means you can’t go back and make edits to those elements—but there are occasions when it is useful. For example, you might not want to share the vector version of a logo until the design is finalized.
- To rasterize a layer, select the object you want to convert to pixel data, then go to the hamburger menu, search for "rasterize", and click the command.
9. Show outlines
“Show outlines” does exactly what it says: it traces the edges of every element in a file, and hides other content (including strokes, fills, and images). This can be useful for getting a quick look at all the shapes, and the structure of those shapes, within a document. It also allows you to see objects that are off the edge of a frame, or underneath other objects… it’s a bit like Figma X-ray vision.
- To toggle outlines on and off, ⌘Y (Mac) or CtrlShift ⇧3 (PC)
10. Export to image files
It’s easy to export files from Figma, though you’ll probably find yourself doing it less often than in other packages, because of the live collaboration functionality that Figma offers. This means you can invite people to view your file directly, rather than having to export image files all the time. Export options can be accessed in the Inspector’s Design tab.
- To export an individual Frame, first select the Frame (either in the Layers list, or by clicking the label above the Frame on the Canvas). Then click the “+” icon next to “Export” at the bottom of the Inspector. Choose your desired options, and click the “Export” button.
- To export a custom area of the document, you’ll need to create a “Slice” (keyboard shortcut S ). A Slice can cover an area within a frame, outside a frame, or across multiple frames. Once you’ve selected the Slice tool, click and drag to create the Slice, then use the Export options in the Inspector as explained above.
- A cool aspect of Figma is that you can easily export the entire Canvas. Simply deselect everything (hit Escape), and set up your Export settings in the Inspector, and you can export all your Frames in a single image.
Congrats! You completed Figma 101!
We hope that this course has equipped you with the core set of skills you need to create projects in Figma, and confidence to continue exploring some of the platform’s more advanced features.
Over the past 7 days, you’ve also had a taste of what it’s like to design user interfaces and visuals like logos and icons in a lean, modern graphics app. Now that you’ve got these skills under your belt, you’re probably wondering—what’s next?
If you’re interested in taking your design learning to the next level, check out our crazy-popular Design 101 course—an intro to design fundamentals that includes a heap of mini projects and 4 hours of 1-on-1 mentor sessions with a professional designer.
It’s the perfect way to keep the creativity flowing, or even jumpstart a career change!