Related Videos

• Explore the canvas

  Before you Start

  Who can use this feature

  Supported on any team or plan

  Anyone with can view access to a file can explore and move around the canvas

  The canvas in Figma is the backdrop on which all of your frames, groups, and other layers live. It has a finite size of -65,000 through +65,000 on each axis.

  By default, vectors are rendered as resolution-independent paths in the canvas though you can turn on Pixel Preview at 1x and 2x resolutions to enable pixel-precise editing for raster assets.

  The default background color of the canvas is determined by your current theme: light or dark. While in light mode, newly created files default to a light-gray background color #F5F5F5. While in dark mode, they’ll default to an off-black color #1E1E1E. New pages determine their background color based on the current page’s background color, and don’t rely on your current theme.

  Change a background color by de-selecting any layers and using the color picker from the Background section of the right sidebar.

  

  If you like having rulers visible on your canvas, you can use the Shift + R shortcut to enable them. You can also use the search feature under the menu icon to search for rulers. 

  

• Access design tools from the toolbar

  Before you start

  Who can use this feature

  Users on any team or plan can access the toolbar in the Editor.

  Users will need can edit access to use every tool in the toolbar. Users with can view access can use some functions in the toolbar.

  The toolbar contains a variety of tools and functions. What appears in the toolbar depends on what you have selected on the canvas.

  Access the toolbar at the top of your screen in Figma.

  

  Menu

  Click the menu icon to access the main menu. The menu contains Figma's search feature and various other functions organized in the menu.

  Search by name, or browse by general section (e.g. file, Edit, View, etc). If there is a keyboard shortcut for the function you're trying to perform, Figma will list it next to the setting.

  • Back to Files: Open the file Browser in the current location.
  • File: Perform file-level permissions, including importing and exporting.
  • Edit: Access undo/redo, copy/paste, and advanced selection functions.
  • View: Control view settings for layout grids and rulers, perform zoom functions, and navigate within a file.
  • Object: Apply object-level functions like grouping, framing, rotating, and more.
  • Text: Format text with bolds or italics, and set size, height, and spacing.
  • Arrange: Tidy up objects with alignment and distribution functions.
  • Plugins: View, manage, and run any plugins you have installed.
  • Integrations: View, manage, and use any applications you have connected.
  • Preferences: Adjust your preferences.
  • Libraries: Open the Library modal.

  Tools

  Move and Scale tools

  When you open files in the Editor, Figma will select the Move Tool V by default .

  The Move tool allows you to select and reorder layers in the Layers Panel, or move objects around on the canvas.

  Click the arrow to the right of the Move Tool to access the Scale tool K. This allows you to resize entire objects or layers.

  Frame and Slice tools

  If you've used design tools before, you'll be familiar with Artboards. Like Artboards, frames allow you to choose an area of the canvas to create your designs in.

  Use the keyboard shortcuts A or F to select the frame tool. Create a frame with your own dimensions in the canvas, or select a frame size from Figma's presets in the right-hand panel.

  Click the arrow next to the frame tool to access the Slice tool. The Slice tool allows you to specify a region of the screen you want to export.

  Use the keyboard shortcut S to select the Slice tool.

  Shape tools

  In addition to drawing your own shapes using the Pen Tool, there are a number of default shapes you can use in Figma. Click the drop down menu to choose from:

  • Rectangle R
  • Line L
  • Arrow Shift L
  • Ellipse O
  • Polygon
  • Star
  • Place Image ⌥ Option ⌘ Command K

  Pen and Pencil tools

  The Pen tool P allows you create custom shapes and icons. Build complex Vector Networks using vector paths, anchor points, and bezier curves.

  The Pencil tool allows you to add freehand drawings or annotations to your design files.

  Figma will apply some basic smoothing to any paths you create with the Pencil tool. Press the Enter / Return key to edit the path and any anchor points in Vector Edit mode.

  MacOS: ⌥ Option P

  Windows: Shift P

  Text tool

  Text is one of the crucial components of interface design. Everything from the placement and arrangement of text, to the choice of font, has a part to play.

  Select the Text tool from the Toolbar, or press the T key to add text layers to your file.

  • Click once in the canvas to add a text layer that grows horizontally
  • Click and drag to create a text layer that is fixed in size

  Learn more about creating text layers.

  Hand tool

  The Hand Tool allows you to click around within a file without accidentally activating hover outlines, making selections, or moving objects.

  If you're using Figma on a device with a touch screen, the Hand Tool allows you to pan around a file using your fingers.

  Tip! Press and hold the Space bar to activate the Hand Tool.

  Comment tool

  The Comment tool allows you to quickly exchange ideas with collaborators. Use comments to respond to feedback, tweak your designs and iterate faster - all from the original design file.

  Comments are accessible to anyone with view or edit permissions to the file.

  Resources modal

  The Resources modal allows you browse components from enabled libraries and browse, try, and install plugins and widgets. You can also access the Figma Community from the Resources modal. Learn more about widgets and plugins in the Figma Community →

  Contextual tools

  When you have a layer or object selected, you will see the Contextual tools in the center of the toolbar. Which tools you see here will depend on your specific selection.

  Edit Object

  Click the Edit Object icon to enter Vector Edit mode. This allows you to add, remove, or adjust the individual anchor points within a vector path.

  This option will only be available when you select a single vector path. Learn more about working with Vector Networks.

  Or, click the Enter / Return key to enter Vector Edit mode.

  Reset Instance

  You will see this option when your selection includes a Component Instance with overrides. Click the Reset instance icon to reset any Overrides and restore the main Component.

  Create Components

  Components are elements that you can reuse across your designs. They help to create and manage consistent designs across projects. Click the Create component icon to create a Component out of your selection.

  If you select more than one layer or frames, use the arrow next to the icon to choose how to create Components:

  • Create Component: Create a single Component from your selection.
  • Create Multiple Components: Create a Component for each layer or frame in your selection.

  MacOS: Control Commmand K

  Windows: Ctrl  Alt K

  Use as Mask

  Masks let you show or hide specific portions of a layer or object. Click the Mask icon to create a mask out of the current selection.

  When you create a mask, Figma will place every layer within that selection inside a Mask group. Figma will use the outline of the current layer to determine what you can see of any layers underneath.

  MacOS: Control Commmand M

  Windows: Ctrl  Alt M

  Boolean Operations and Flatten Selection

  Combine shape layers using Boolean operations, or by flattening the selection:

  • Union Selection: Combine overlapping vector paths into a single path.

  • Subtract Selection: Remove any overlapping paths from the base layer.

  • Intersect Selection: Create a single path from any overlapping paths.

  • Exclude Selection: Create a single path from the part of the layers that don't overlap.

  • Flatten selection: Create a single layer from the selection.

    MacOS: Commmand E

    Windows: Ctrl E

  Note: This option is only available when you have more than one layer selected.

  When you have no layers selected, Figma will show the project and the file name in the middle of the toolbar. This lets you access the following file-level actions:

  • Publish Styles & Components: Open the Library modal
  • Show Version History: Open Version History in the right-hand panel
  • Export: Open the Export List
  • Duplicate: Make a copy of the file in it's current location
  • Rename: Give the file another name
  • Delete: Delete the file for you any collaborators
  • Move to Project: Change the file's location

  Share and view settings

  Multiplayer and observation mode

  See who else is active on the file. This includes anyone who is currently viewing or editing the file.

  Click on a users' avatar to enter observation mode and view their actions in real-time. This is great for presentations and design critiques.

  Share

  Click the Share button to open the share modal. This lets you manage who has access to your file. From the share modal you can:

  • Invite Viewers or Editors to a file
  • Share files with others using Link Sharing
  • Transfer ownership of a file
  • Adjust permissions on a file
  • Remove a collaborator from a file
  • Prevent Viewers from copying, sharing, or export from files

  Present

  Click the Present icon to open the file in Presentation View. This lets you preview your designs and interact with any prototypes you've created.

  View Settings

  Adjust your view settings on your file, including:

  • Zoom Settings
  • Pixel Preview
  • Pixel Grid
  • Layout Grids
  • Multiplayer Cursors

  When you update these settings, they will only apply to your view of the current file.

• View layers and pages in the left sidebar

  Who can use this feature

  Supported on any team or plan.

  Anyone with can edit access can view and interact with all panels in the left sidebar.

  Anyone with only can view access can view layers or navigate between pages in the file.

  Figma design files have four distinct interactive areas: a toolbar, two sidebars, and a scrollable canvas. These areas allow you to access, create and adjust elements of your design.

  In this article, we're going to cover the left sidebar which gives you access to layers and pages in your file. You can also use the left sidebar to view local components and access components from other libraries.

  Open the left sidebar

  There are three headings in the left sidebar: Layers, Assets, and Pages. Use these headings to switch between each panel in the sidebar. You can also use keyboard shortcuts:

  Mac

  • Layers panel and Pages: ⌥ Option 1
  • Assets panel: ⌥ Option 2

  Windows

  • Layers panel and Pages: Alt 1
  • Assets panel: Alt 2

  

  Toggle layers panel

  Toggle visibility of the left sidebar using the keyboard shortcut:

  • Mac: ⌘ Command Shift \
  • Windows: Ctrl Shift \

  You can also toggle the visibility of the entire Figma UI by using the Show/Hide UI keyboard shortcut:

  • Mac: ⌘ Command \
  • Windows: Ctrl \

  This allows you to view your designs in the canvas, without the Figma UI.

  

  Tip! You can adjust the width of the left sidebar. This allows you to better see layer or asset names.

  1. Hover your cursor over the right-edge of the sidebar. A bidirectional arrow will appear.
  2. Click and drag to adjust the width of the panel.
  3. Release to set the sidebar width.

  View layers

  Any Frames, Groups or Objects you add to the canvas will be visible in the Layers panel. You can determine if a Layer is a Frame, Group or a specific type of Object by the icon next to it:

  • Frame
  • Group
  • Component
  • Instance
  • Text
  • Shape—Icon varies depending on the shape. Learn more → 
  • Image
  • Auto layout—Icon varies depending on the auto layout configuration. Learn more → 
  • Section
  • Animated GIF or video

  Figma nests any child objects within their parent group or frame. This allows you to collapse and expand layers within a group or Frame.

  New layers will be added to the top of the list, or the top of the group or frame it is contained within. Or, just above the layer you currently have selected.
  
  If your layers are inside a section, the section will always be the parent-level layer.

  There are lots of interactions you can have

  • Select layers, groups and frames
  • Adjust the z-index with layer order
  • Rename layers individually or in bulk
  • Toggle layer visibility
  • Lock and unlock layers

  Tip! You can enable or disable the Highlight layers on hover setting. Search for Highlight in the menu. Or head to Menu > Preferences > Highlight layers on hover

  View components in the assets panel

  Components are aspects of your designs that you can reuse. These could be buttons or icons, or more complex UI elements like navigation menus or status bars.

  The Assets panel is where you can find all of your Components. You can drag any Component from the Assets panel into the canvas to create an Instance.

  To open the Assets panel, click on the Assets heading in the Layers panel.

  Or, use the keyboard shortcut:

  • Mac: ⌥ Option 2
  • Windows: Alt 2

  Once you've opened the Assets panel, you can:

  1. 1 Use the Search field to find a specific component. Figma looks for components in the current file, as well as any libraries you can access.

  2. 2 Switch between a Grid and List view of Components

  3. 3 Open the Library modal

  4. 4 View Local components that were created in the current file

  5. 5 View components that are Private to this file

  6. 6 View components that are Used in the file

  7. 7 Explore any enabled libraries

  

  Note: Figma groups components in the Assets panel by heading. If you have many components, Figma will present them as a path: file > page > frame

  • Explore a file, page or frame by clicking on the arrow to expand it
  • Collapse each heading to create more space in the Assets panel
  • Figma lists enabled team or organization libraries in the Assets panel
  • Create an instance by dragging a component from the Assets panel to the canvas

  Libraries

  Libraries allow you to publish styles and components from your files as a library. You can then apply styles or create instances of your components across files. Get started with libraries →

  To access your libraries from the Assets panel, click to open the Library modal.

  Pages

  Within a file, you can create as many pages as you need. Each page has its own canvas, where you can explore and iterate on your designs. You can even create separate prototypes on each page. Create and manage pages →

• Use the Inspect panel

  Who can use this feature

  Supported on any team or plan.

  Anyone with can edit access to a file can view, edit, and copy properties in the Design, Prototype and Inspect panels of the right sidebar.

  Anyone with can view access to a file can view and copy from the Inspect and Export panels in the right sidebar.

  The Inspect panel allows you and your collaborators to view and copy properties, values, and code from your designs. Copy single line items, or entire sets of properties, to help streamline the development process.

  People with can access can view, edit, and copy properties from the Design and Prototype tabs in the right sidebar. People with can view access can only view and copy properties using the Inspect and Export tabs.

  Select layers

  There are a few ways to select layers in a file. The default behavior for selecting layers depends on your access. Learn more about default layer selection →

  For people with can view access, the defaul behavior is different to those with edit access. When viewers make a selection in the canvas, Figma will:

  • Outline the selection using a solid purple box.
  • Outline the parent of the current selection using a dashed purple box.
  • Show the name of the selected layer(s) at the top of the Inspect panel in the right sidebar.
  • Show the Parent component underneath the selected layer in the Inspect panel. Click the in the Inspect panel to select the parent component.

  View property values

  Use the Inspect panel to view properties and values for any selection. The properties you will see here depend on the type of layers in your selection. View basic layer properties ↓, prototyping interactions ↓, and code output ↓.

  Layer properties

  1. A View the layer name and type.
  2. B View layer dimensions, auto layout properties, or any constraints.
  3. C View any Color styles and values in Hex, RGB, CSS, HSL, and HSB color models.
  4. D View effects, like inner and drop Shadows, as well as stroke properties (Borders).
  5. E Text layers: view the text Content and any Typography values; including font, weight, line height, and more.
  6. F Components and instances: view the name, description, and a link to any external documentation. Click to view the component library file. Add style and component descriptions →

  

  Prototyping interactions

  The Interaction section shows you values for prototype interactions for the current frame. This includes:

  1. What trigger starts the interaction. Depending on the device, this could be a mouse or touch interaction.
  2. The prototype action and a link to the destination frame when using Navigate to, Swap overlay, and Open overlay
  3. Animation type. Animations create smooth transitions between screens in a prototype.
  4. Animation easing curve. Easing determines the acceleration of the transition between a starting frame and its destination.
  5. Duration of the entire animation, in milliseconds.

  

  Code output

  The Code section of the Inspect tab shows you how to express layers in code.

  1. Select a layer to view its properties in the Inspect panel. Use the Select Parent keyboard shortcut to jump to a layer's parent frame:
     • Mac:⇧ ShiftReturn
     • Windows:ShiftEnter
  2. Choose between CSS (no HTML), iOS (Swift), and Android (XML).
  3. Switch between Code and Table view.

  

  Code view

  The Code view shows you code snippets in your selected language. These may serve as a useful reference while you're implementing a design. This includes:

  • Name and description of any components
  • Name and descriptions of any styles
  • View the contents of a text layer
  • Any alternative values available for the selected object

  Table view

  The Table view shows list of attributes for that layer. This includes:

  • The X and Y co-ordinates of the layer based on its position on the canvas
  • The width (W) and height (H) of the object
  • Any text properties, including font family, size, font weight, line height, etc.
  • A color swatch and the CSS notation for any color values

  Tip! With the Inspect tab open, you can measure distances between layers without a modifier key. Select a layer or object, then hover over a nearby layer to measure the distance between them.

  Additional notes

  CSS iOS Android

  • The CSS option only shows CSS. There is no way to export full HTML code.
  • Switch to the Table view to see a list of all properties applied to a layer or object.
  • If the font style is set to normal, this means it uses that font's default font-weight.
  • If you are missing some text attributes, check that you have the same font installed. If not, you can use local fonts with Figma Font Helper.
  • Figma shows CSS positions in pixels. To show these as a percentage of the viewport, apply scale constraints to your objects.

  • Figma only displays colors in RGBa format. This is because iOS uses UIcolor which is based on RGBA values. This results in an 8 hexadecimal value, where the last two values represent the color's Opacity (a).
  • Our Frame Presets and iOS code are set in points, not pixels. This allows you to create assets for screens at multiple pixel densities. While you can't access these variations in the Code view, you can export any asset at a density of 1x, 2x and/or 3x.

  • Figma uses the ARGB color profile for Android code. This results in an 8 hexadecimal value, instead of the usual 6. The first two hexadecimals will refer to the color's Opacity (A).
  • Our Android code output takes into account the recommended 24dp height of the status bar.

  Copy properties and values

  To copy a property or value, hover over the section you want to copy.

  1. A To copy all values in the section to your clipboard, click Copy next to the section header.
  2. B To copy a single value, click on a single line item.

  

  Export assets

  You, or a collaborator, may need to export layers, assets, and designs as part of the development process.

  You can apply export settings to layers to define the format and any other export settings. Figma supports the following export formats: PNG, JPG, SVG, and PDF. Learn more about exports in Figma →