Related Videos

• Set small and big nudge values

  Before you start

  Who can use this feature

  Supported on any team or plan

  Only people with can edit access to the file can make changes to a layer's position, dimensions, or alignment.

  You can use your arrow keys to nudge the position of your layers. Figma allows you to set two default nudge amounts: small nudge and big nudge.

  By default, small nudge is set to 1 and big nudge set to 10. Both of these values are in resolution-independent points.

  Adjust nudge settings

  1. Click on the menu.
  2. Go to Preferences > Nudge amount...
  3. Enter your desired Small nudge and Big nudge in the fields provided.
  4. Click outside the window or use the icon to apply and close.
• Adjust your zoom and view options

  Who can use this feature

  Supported on any team or plan.

  Anyone with at least can view access to a file can adjust their zoom and view options.

  You can customize your preferences for design files the Zoom/view options menu. Adjust your zoom settings, or toggle on other view options like layout grids or multiplayer cursors.

  In this article, we'll explore the settings available in this menu.

  Tip! Each setting in this menu can be toggled off or on. If there's a checkmark next to the setting then it is on. If there isn't a checkmark, then it's off. 

  Canvas zoom settings

  There are a number of ways to adjust canvas zoom in design files. Any changes you make to zoom only apply in the current tab for that file.

  When you first open a file, the default zoom level will be set to Zoom to fit. This focuses the viewport so you can see everything on the current page.

  Note: These zoom settings only apply to layers and objects on the canvas. If you're using the desktop app, you can adjust the scale of Figma's interface, which includes the toolbar, and the left and right sidebars. If you're using Figma in a browser, you can use your browser's zoom settings to adjust the size of the interface.

  Zoom percentages

  View the current zoom percentage in the top-right corner of the toolbar.

  • Click to open the zoom/view options menu.
  • Figma focuses on the current percentage field. Start typing to enter a specific percentage.
  • Select one of the default zoom percentages:
    • Zoom to 50%
    • Zoom to 100%
    • Zoom to 200%

  

  Keyboard shortcuts

  • Zoom in: Shift +
  • Zoom out: Shift -
  • Zoom to fit: Shift 1
  • Zoom to selection: Shift 2

  Tip! If you are opening a Figma URL that links to a specific node, the canvas will be zoomed to fit that specific node.

  Mouse and trackpad gestures

  You can also use your mouse or trackpad to zoom the canvas.

  On both Mac and Windows trackpads, you can use the following gestures to adjust zoom:

  • Stretch two fingers apart to zoom in
  • Pinch two fingers together to zoom out

  On an Apple Magic Mouse:

  • Hold down ⌘ Command (Mac) or Ctrl (Windows) and scroll up and down
  • Double-tap with one finger to zoom in and back out

  On another type of mouse:

  • Hold down ⌘ Command (Mac) or Ctrl (Windows) and scroll the mouse wheel up to zoom in or down to zoom out.

  Pixel preview

  By default, vectors in Figma are rendered as resolution-independent. This means that there aren't fixed resolutions for the paths you create in the canvas.

  To support pixel-precise editing, you can enable Pixel preview. This allows you to preview vector objects in their rasterized format.

  You can view Pixel preview in either 1x or 2x mode. This allows you to preview how objects will appear on both low and high resolution displays.

  To enable Pixel preview

  1. Open the zoom/view options menu.
  2. Hover over the Pixel preview option to open the menu. This defaults to Disabled.
  3. Select either 1x or 2x from the options:
  4. A checkmark will appear next to the setting in the menu. You will also see a toast notification at the bottom of your scree to confirm Pixel preview is enabled.

  

  To disable Pixel preview:

  1. Select the Zoom/view options menu in the toolbar.
  2. Hover over the Pixel preview option.
  3. Select Disabled from the options.

  

  Tip! You can also use the shortcut to toggle pixel preview off and on:

  • MacOS: ⌃Control P
  • Windows: Control Alt P

  Pixel grid

  For greater accuracy when placing and aligning objects, you can enable the pixel grid. Each square in the pixel grid represents a single pixel, when exported at 1x resolution.

  1. Open the Zoom/view options menu (from the zoom level in the toolbar).
  2. If there is no check next to it: select Pixel grid to toggle this on.
  3. If there is already a check next to Pixel grid, you can click it again to toggle it off.
  4. You can also use the keyboard shortcuts to toggle the Pixel Grid off and on:
     1. MacOS: ⌘Command '
     2. Windows: Ctrl '

  Snap to Pixel grid

  The Pixel grid itself will only be visible at zoom levels of 400% or higher. If you want to use the Pixel grid while zoomed out, the Snap to pixel grid setting is a great tool.

  When you enable this functionality we will align objects to the underlying grid when placing or moving them. This can help to prevent mis-aligned pixel errors when exporting elements.

  

  To toggle snap to pixel grid, open the Zoom/view options menu (from the zoom level in the toolbar) and select Snap to pixel grid.

  Or use keyboard shortcut:

  • Mac: ⌘Command ⇧ Shift '
  • Windows: Control ⇧ Shift '

  Tip! You can temporarily disable Snap to pixel grid by holding Control while in vector edit mode and zoomed in to the canvas.

  To know if you’ve zoomed in to the canvas enough, turn on the pixel grid ⇧ Shift' and zoom in until the grid is visible. You can disable the pixel grid at anytime as it isn’t needed to disable snap to pixel grid.

  Layout grids

  You can toggle the visibility of all layout grids in your files, from the Zoom/view options menu. This is great if you'd like to preview how a design will look, without having to remove or hide layout grids for individual objects.

  

  1. Open the Zoom/view options menu (from the zoom level in the toolbar).
  2. If there is no check next to the Layout grids option, click to display them:
  3. If there is a check already showing, clicking Layout grids will hide them:
  4. You can also use the keyboard shortcuts to toggle layout grids:
     • MacOS: Control G
     • Windows: Ctrl Shift 4

  Learn more about Layout grids →

  Multiplayer cursors

  If you're collaborating with other team members in a file, you will be able to see their actions via the Multiplayer cursors. Collaborator names and cursors are shown next to their location on the canvas.

  If you don't want to be distracted by other team member's actions, you can hide their cursors from your view.

  1. Open the Zoom/view options menu (from the zoom level in the toolbar).
  2. If there is no check next to the Multiplayer cursors option, click to display them.
  3. If there is a check already showing, click Multiplayer cursors again to hide.
  4. You can also use the keyboard shortcut Option-Command-\to toggle multiplayer cursors.

  

  Prototype flows

  A prototype is the network of frames and connections in a single page. Prototypes can map out a user's entire journey through your app or website, or can focus on a specific segment or flow.

  For example: your prototype covers all possible interactions on an eCommerce site. You then have flows for creating an account, adding items to a cart, and making a purchase. Guide to prototyping →

  If you only have view access to a file, you can't create prototypes or make changes to an existing prototype. Viewers can still view existing prototype connections by toggling the Prototype flows setting.

  Note: If you have edit access to the file, you can view prototype flows by switching to the Prototype tab. View prototype connections →

  To toggle prototype flows on or off:

  1. In the toolbar, click the current zoom percentage to open your view options menu.

  2. Select Prototype flows to toggle on prototype connections. Figma will add a checkmark next to the setting in the menu, and show any connections on the current page.

     If there are multiple flows on the current page, you can select one starting point at a time. This allows you to view the details of any Interactions in the Inspect tab of the right sidebar.

     To view connections on another page, select another page in the left sidebar.

  3. To hide the interactions, select Prototype flows again in the view menu.

  

• Set custom thumbnails for files

  Before you start

  Who can use this feature

  Supported on any team or plan.

  Applies to Figma design files only.

  Anyone with can edit access to the file can set a custom thumbnail.

  Every design file will have a thumbnail that shows you a preview of a file's contents. Figma shows this thumbnail wherever the file appears in the file browser.

  Figma will base the file thumbnail on the contents of the first page in your file, by default.

  You can use the Set as thumbnail setting to choose any frame to use as the thumbnail. This is a great way to set expectations and communicate the file's contents.

  Thumbnail dimensions

  The exact dimensions of a file thumbnail depends on your display. To make sure your thumbnails aren't awkwardly cropped, we recommend setting the frame’s dimensions to 1600 x 960.

  Tip! If you're publishing a file to the Figma Community, use the Plugin / file cover preset from the Figma Community frame templates in the right sidebar.

  Set a file's thumbnail

  1. Open the design file and find the frame you want to use as the thumbnail.
  2. Figma will scale the selected frame so it fills the thumbnail. We recommend setting the frame’s dimensions to 1600 x 960 for a proper fit.
  3. Right-click on the frame in the canvas.
  4. Select Set as thumbnail from the options:
  5. Figma will update the file's thumbnail and show the custom thumbnail icon next to the frame.

     

  Want to remove the frame from the thumbnail? Right-click on the frame in the canvas and select Restore default thumbnail. Figma will use the contents of the first page in your file as the default thumbnail.

  FigJam file thumbnails

  By default, Figma uses an overview of the entire FigJam board to create a file's cover.

  While it's currently only possible to create custom thumbnails in Figma design files, you can still use them for FigJam file covers.

  1. Create a frame to use as a custom thumbnail.
  2. Copy/paste the frame to your FigJam file.
  3. Right-click on the frame in the FigJam board.
  4. Select Set as thumbnail from the options.
• Add guides to the canvas or frames

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can create and edit Guides.

  Users with View access to a File can toggle Rulers on and off to show/hide Guides.

  Looking for more? Check out our blog post about Guides...

  Guides are helpful when you're trying to precisely position layers or objects in your designs. They can be added to Frames to create useful templates to align content that might be changing.

   

  Add guides

  Toggle rulers

  In order to use guides, you will first need to enable rulers on the canvas.

  1. Click on to open the main menu.
  2. Go to View > Rulers.

  You can also enable rulers by using the keyboard shortcut Shift + R, or by using the quick actions bar.

  

  Create a new guide

  Once you've enabled rulers, click and drag on the horizontal and vertical rulers to pull guides onto your canvas.

  

  You can also create a new guide from an existing guide by holding Option (Mac) or Alt (Windows), then clicking and dragging from an existing guide.

  Figma has both canvas and frame level guides for positioning and aligning objects in your designs. 

  The dotted line acts as visual indicator that your guide is intersecting with a frame on the canvas.

  View distances (redlines)

  With a top level frame selected, hold Option (macOS) or Control (Windows) as you click and drag out a guide. You will see the distance (in pixels) between the guide and the frame. This distance is also reflected in the ruler. When the guide intersects your frame it will begin measuring distances between the guide and objects in the frame. 

  In addition, with a frame selected the rulers highlight in blue, calling attention to the coordinates of the frame on your canvas. When you select objects in the frame, you'll see the same blue highlights for the selected object. 

  

  Guides inside frames are recognized as another object in the frame. This means you can view redline distances between the guide itself and other elements in the frame, as well as the parent frame. 

  Remove guides

  To remove guides from the canvas, you can do any of the following:

  • Click and drag the guide back to the rulers
  • Select a guide, then press delete
  • Right-click on either the vertical or horizontal ruler, then select Remove all vertical guides or Remove all horizontal guides
  • Right-click a guide, then select Remove guide

  

• View layer outlines in Figma design

  Before you start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can view access can do view layer outlines

  Viewing outlines in Figma design is like putting an x-ray machine to your canvas, making it easier for you to inspect, select, and adjust hidden and nested layers.

  • View and select hidden or clipped objects
  • Select objects on the canvas that are behind other layers
  • View stroke details like inner, center, and outer placement
  • View all parts of a boolean operation

  

  Show outlines

  From the toolbar

  1. Click the Zoom/view options menu in the right corner of the toolbar.
  2. Click Outlines > Show outlines.
  3. Select if you’d like to Include hidden layers and Include object bounds.

  Keyboard shortcut

  • Press the keyboard shortcuts ⌘ Command / ControlY or ⇧ ShiftO.
  • Press ⌘ Command / Control/ to search outline in the quick actions menu.

  Learn how to toggle layer visibility →