iDevie
November 2018
M T W T F S S
« Oct    
 1234
567891011
12131415161718
19202122232425
2627282930  

Categories


Welcome to the next in our series of Figma tips and tricks! This time we’ll be improving the way you work with Figma projects, pages, and artboards.

Watch Tips


1. Customize Project Thumbnails

It’s perfectly possible to create custom project thumbnails which will show up in your dashboard drafts area. Make sure that the first page of your document has just a single frame of 620x320px, then fill that frame with whatever content you want as your thumbnail.

Customize Project Thumbnails in Figma

2. Keyboard Shortcuts to Navigate Between Pages

Navigating between pages with a keyboard shortcut makes things much quicker. On Mac OS use fn + up or down arrow keys, and on Windows or Linux use PageUp or PageDown.

Keyboard Shortcuts to Navigate Between Pages

3. Keyboard Shortcuts to Navigate Between Artboards

It’s also possible to navigate between artboards using the keyboard. On Mac OS use fn + left or right arrow keys, and on Windows or Linux use Home or End.

Keyboard Shortcuts to Navigate Between Artboards

4. Navigate and Zoom Between Artboards

By default, when you’re navigating through your artboards with the keyboard shortcuts they’ll remain at the same zoom level. However, by pressing n or SHIFT + n, you’ll navigate left or right respectively, whilst zooming into the whole artboard automatically.

5. Enhance Artboard Boundary Visibility

When you have artboards with the same backround color as your overall document it can be difficult to see where the edges of your frames are. Assuming your artboard is actually a top-level frame, to solve this go to the View menu and turn on Frame Outlines.

Border visibility in Figma
Here you can see the “Features” artboard has a visible frame

Figma Learning Resources

Those were some quick tips for working with projects, pages, and artboards in Figma. To help you take things to the next level we have a series of Figma courses on Tuts+:

The UI kit used in this tutorial is fully compatible with Figma and available from Envato Elements:

First Order UIUX Tool
First Order UI/UX Tool

Comments 0
There are currently no comments.