Related Videos

• Use the Inspect panel

  Before you Start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can edit access to a file can access the Design tab of the right sidebar.

  Anyone with can view access to a file can only access the Inspect tab, Export tab, and the Layers panel in the left sidebar.

  The Inspect tab lets you and your collaborators view and copy the existing code and values for your designs. Copy single line items or entire sets of values to help streamline the development process.

  Editors can access both the Design and Prototype tabs in the right sidebar. Viewers only have access to the Inspect and Export tabs.

  View property values

  Use the Inspect panel to view and copy values for your selection.

  1. Properties include values for an object's dimensions and constraints.
  2. View the Content in a text layer.
  3. View the Typography values for a text layer, including font, weight, line height, and more.
  4. Use the Color section to view values in Hex, RGB, CSS, HSL, and HSB color models.
  5. Copy values for an object's Shadows (inner and drop shadow) and Borders (stroke).
  6. View the details of any prototyping Animation, including the trigger, action, and destination. You can also see the animation, the easing curve, and duration of the transition.
  7. View CSS, iOS, and Android Code for your selection.

  

  Select objects in view-only mode

  There are a few ways to select objects in a file, but for collaborators with can view access, the experience is a bit different.

  When you make your selection in the canvas, Figma will:

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

  

  Copy selection values

  Each section of the Inspect panel lets you copy individual values or entire sets of related properties.

  1. Select an object or layer in the canvas or Layers panel.
  2. In the Inspect panel, hover over the section you'd like to copy values from. For example, select a text layer to copy the Content or a layer to copy its Color or Shadow values.
  3. Click the blue Copy button to copy all values in the section, or click a single line item to copy a single value.
  4. Paste the copied value(s) anywhere.

  

  Export assets

  You or a collaborator may need to export your designs as part of the development process. Figma supports the following export formats: PNG, JPG, SVG, and PDF.

  Learn more about exports in Figma →

  To export your assets:

  1. Make your selection and click in the Export section.
  2. Access the export options in the right sidebar:
     • Collaborators with can view access can access export settings from the Export tab of the right sidebar.
     • Collaborators with can edit access can can find the Export section in the Design tab.
  3. Apply export settings to your selection.
  4. Export your current selection.

  

  To speed up the process for developers or engineers, you can do the first two steps yourself. This will add all those assets to your Export list. The developer/engineer can then export all those assets at once via the Export list.

  You can access your Export list from a few places:

  1. Go to the menu > File > Export.
  2. Use the keyboard shortcut to open the Export list:
     • Mac: ⇧ Shift - ⌘ Command - E
     • Windows: Shift + Ctrl + E

  Learn more about exports in Figma →

  Note: You can also add your own Export settings, on top of the original settings added by the designer. Figma won't update these for other Viewers or Editors on the File.

  View prototype animation values

  The Animation section of the Inspect panel shows you values for prototype animations for the selected frame. This includes:

  1. The animation's trigger
  2. The prototype action and a link to the destination frame when using Navigate to, Swap overlay, and Open overlay
  3. The prototype's animation type
  4. The animation's easing type
  5. The duration of the animation

  

  View component details

  Anyone with can edit access to a file has the option to add a description and link to external sites for component documentation. Anyone with can view access to a file can a selected component's:

  1. Name
  2. Description when provided
  3. Link to external documentation when provided

  Learn how to add descriptions and documentation links to components →

  

  View code

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

  1. Select an object to view its properties in the Inspect panel. Use the Select Parent keyboard shortcut to jump to a layer's parent frame:

     • Mac: ⇧ Shift - Return
     • Windows: Shift + Enter

  2. Choose between the following formats:

     • CSS (CSS only, no HTML)
     • iOS (Swift)
     • Android (XML)

  3. Switch between  Code view and  Table view using the toggles.

  

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

  • Names and Descriptions of any Components
  • Names and Descriptions of any Styles
  • View the content of a text layer
  • Any alternative values available for the selected object

  The Table view shows you a list of attributes for that object. 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
  • View detailed information about text properties e.g. font family, Size, font weight, line height, etc.
  • A swatch and the CSS notation for any colors

  Tip! When you have the Inspect tab open, you can quickly measure distances without using the modifier key:

  1. Select an object or layer.
  2. Hover over nearby objects to view the distance between them.

  Notes on CSS

  • 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.

  Notes on iOS

  • 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.

  Notes on Android

  • 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.
• 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 you might use when in Figma. 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.

  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.

• 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. 

  

• Optimize design files for developer handoff

  Before you Start

  Who can use this feature

  Users on any team or plan

  Users with can edit access to a file can set up files for developer handoff

  Users with can view access to a file can only access the Inspect panel and the layers list

  While handing off designs to developers frequently happens after a major project milestone, here are some things you can do earlier in the design process to set up your files to improve handoff.

  Want to learn how other companies are approaching Developer Handoff? Check out our blog post: A Guide to Developer Handoff.

  Set up files for Collaboration

  There are lots of different ways to collaborate in Figma. We've rounded up a few tips that we've used ourselves, or seen in action.

  Files

  • Right-click any frame and set a custom thumbnail so you can identify files at a glance. The thumbnail can also include information such as the project's current status.
  • Link to Figma design files in your project specification documents or project plans.
  • Create "sticky note" components and add them to the canvas to explain or draw attention to design decisions.
  • Apply Export Settings to frames, Components and Assets your Developers may need to export for the final production build.

  Pages

  • Name pages descriptively to let others know what's ready for development.
  • Create a single page with Instances of all your components. Collaborators only have to check this page, as you make changes to your components.
    • Right-click on a component and choose Move to Page or check out the Component Page plugin.

  Styles and components

  • Give Styles relevant and descriptive names.
  • Add component documentation to your design system. Collaborators can use Go to Main Component to learn more about how to use it.
  • Name layers and components based on their IDs
  • Add meaningful descriptions to components:
    • When and how collaborators can use them
    • Any variants or states
    • Accessibility and contrast guidance

  Want to a bit more detail? Check out our Tips for a better developer workflow post.

  Invite collaborators to files and prototypes

  You can invite collaborators to a prototype, or to the file itself.

  • Share a prototype
  • Invite a collaborator to a file

  When inviting someone to a file, you can choose to give them access as a Viewer or Editor. In most situations, inviting a collaborator as a Viewer will be enough.

  Viewers can:

  ✅  Select layers from the Layers panel or canvas
  ✅  View properties of selected layers in the Inspect panel
  ✅  Copy text content from Text objects
  ✅  Measure distances between objects in the canvas
  ✅  Add or reply to comments in files and prototypes
  ✅  View Prototypes in Presentation View
  ✅  Access components via the Go to Main Component link

  Note: You have the option to allow Viewers to copy and share the contents of a file. If you enable this, Viewers will not be able to explore or export assets from a file.

  Learn how to view code for your designs with the Inspect panel →

• Select layers and objects

   

  Before you Start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can view or can edit to a file can select objects in the canvas or Layers panel

  Before you can update any properties associated with an object or layer, you will need to select it. We'll cover all the basics for selecting objects, as well as some lesser known tips and tricks.

  Select individual layers

  You can select layers in the canvas itself, or from the Layers panel. Click on an object in the canvas to select it.

  

  Select nested layers

  If you're working on more complex designs, you may have objects nested within groups or frames.

  We refer to nested objects as children, and the Frames or Groups that they nest within as parents. Learn more about parent, child and sibling relationships.

  When you click on an object that is part of a group or frame, we'll select the parent by default.

  Double-click on the object - or press the enter key - to select one level of nesting down. Repeat this process until you select the correct child elements.

  Deep select

  If there are many levels of nesting, you can use Deep select to select a nested child layer or the top-level frame. Hold down the modifier key to select the top-level frame or a nested layer or object by clicking it on the canvas.

  • Mac:  ⌘
  • Windows: Ctrl

  Select layer menu

  We have a couple of different ways to select nested objects. The Select Layer menu allows you to choose which specific you'd like to select, in the canvas.

  1. Right-click to open the context menu:
  2. Hover over the Select layer option.
  3. Select a layer from a list of layers underneath the cursor's location. We show the layer name and icon in the same order as the Layers panel.

  

  Tip! Move between nested objects using the keyboard shortcuts:

  • Select Child enter
  • Select Parent shift enter
  • Select Next Sibling tab
  • Select Previous Sibling shift tab

  Layers panel

  Every object in the canvas will have a corresponding layer in the Layers panel.

  Click the Layers tab in the left sidebar to open the layers panel. Or, use the keyboard shortcut:

  • Mac: Option 1
  • Windows: Ctrl 1

  If you hover over the layer in the panel, a blue box will highlight that layer's location on the canvas.

  Click on the layer name in the layers panel to select it.

  If there are any Frames or Groups on the canvas, we will nest the child objects within the parent. Click the arrow next to a Frame, Group, or Component to view any child layers.

  

  Can't see the layer highlight on hover? Adjust your preferences in the menu: select Preferences > Highlight on hover.

  Select multiple layers

  You can also select more than one object or layer at a time.

  This is great when you want to:

  • Update a property across more than one layer
  • Resize layers in bulk
  • Move a collection of objects
  • Create a group, frame, or component from the selection

  Note: When you select more than one layer, you can access Selection Colors in the right sidebar.

  This allows you to update individual Fills, Styles and Strokes in a mixed selection. Learn more in our View and adjust colors in a mixed selection article.

  Canvas

  1. Select an object in the canvas.
  2. Hold down the Shift key and click on another object.
  3. This will allow you to select as many objects as you like.

  

  Tip! Click an object a second time while holding Shift to remove it from from the current selection.

  Selection marquee

  The marquee tool allows you to select all objects in a specific area of the canvas.

  1. Click and hold on a empty part of the canvas.
  2. Drag the cursor across any objects you'd like to select.
  3. A blue box will appear around each object are in the selection.
  4. To select nested layers, hold down the modifier key and drag the marquee across the objects:
     • Mac: ⌘
     • Windows: Ctrl
  5. To remove an object from the selection, hold down the Shift key and click on the object.

  

  Note: It's possible to select nested objects without selecting the parent object. This is something to be mindful of, especially when selecting objects to move them!

  When you select a parent object, this also selects any child objects. This allows you to move everything at once.

  Select multiple layers in the Layers panel

  When you select layers in the Layers panel, there are some different rules:

  To select every layers between two layers:

  1. Click on the first layer to select
  2. Hold down the Shift key
  3. Select the last layer.
  4. Figma will select every layer between those two layers in the Layers panel.

  To select individual layers:

  1. Click on the first layer to select
  2. Hold down the modifier key
     • Mac: ⌘
     • Windows: Ctrl 
  3. Select any other layers you want to select

  

  Select all layers

  The Edit menu allows to select multiple objects based on their properties. This allows you to select all layers in your file that have the same properties.

  This is super handy when you want to adjust the properties of all those layers at once.

  1. Select a layer or layers in the

  2. Go to the File menu ☰ and select Edit from the options.

  3. Choose to Select All other layers that have the same:

     • Properties
     • Fill
     • Stroke
     • Effect
     • Text Properties
     • Font
     • or another Instance

     

  Want to select everything on the canvas?

  Use the keyboard shortcut ⌘ Command / Ctrl A.

  Locked and hidden layers

  If you hide a layer we won't show in the Select layer menu. You will need to toggle visibility on to select it.

  If you lock an object or layer, you can't select it via the normal left-click selection process. However, you can select it via the Select layer menu.

  We include locked layers in the Select layer menu with a padlock icon.

  Tip! Smart Selection allows you to select 2 or more objects in the canvas. From there you can adjust their arrangement, or the spacing between them.

  Create a 1D Smart Selection from a list of objects that align on one axis, like a column or row. Or, a 2D Smart Selection of objects in a grid or gallery-like structure.

  Deselect objects or layers

  To clear your selection entirely:

  • Click anywhere on the canvas
  • Use the keyboard shortcut: Esc

  To remove an object from a selection:

  • Hold down the Shift key and click on the object again

  Note: If you click on a parent object, this will deselect the parent and any child objects within it.

  To select the inverse of your current selection:

  • Use the keyboard shortcut:

    Mac: ⌘ A Shift

    Windows:  Ctrl A Shift

  This removes the current selection, then selects everything on the canvas you didn't select before.

  Select objects in view-only mode

  There are a few ways to select objects in a file, but for collaborators with can view access, the experience is a bit different.

  When you make your selection in the canvas, Figma will:

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

  

• Follow collaborators in a file

  Before you Start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can view or can edit access to a file or prototype can follow.

  Whenever you view a file or prototype, we will also add your avatar to the toolbar. This allows everyone to see who is currently accessing the file.

  If you click on a person's avatar, you will begin to follow their view of the canvas of FigJam board.

  Like screen-sharing, following shows you what's happening on their screen in a Figma design or FigJam file. You can also request everyone in a file follow you using spotlight →

  This allows you to follow along with their actions and track each movement they make in the canvas. This includes actions like zooming in on the canvas, or switching between pages.

  You won't be able to see actions with the toolbar, sidebars, or anything outside of the canvas.

  Note: We won't tell someone if you follow them. We do still show your cursor's location when you're following a presenter or someone else in a file. If they have Multiplayer Cursors enabled, they will be able to see your cursor in their viewport.

  Follow someone in a file

  You can follow when you're viewing a Figma design or FigJam file. This allows you to track another user's actions as they move around the file.

  You can use this to:

  • Walk-through designs with remote collaborators
  • Present designs during a design crit
  • Demonstrate tasks and specific actions
  • Reference a particular part of the file when talking with collaborators
  • Remove the need for screen-sharing when you have a slow internet connection
  • Follow students as they complete exercises

  Whenever you access a file, we will add your avatar to the toolbar. This allows everyone to see who is currently accessing the file.

  We will give each collaborator's avatar a color, which we use when you are following them.

  1. In the toolbar, click on a person's avatar to follow them.
  2. We will show a border around your canvas, in the color of the person's avatar. You will see a confirmation at the top of the screen that you are following them:
  3. You can now see their actions as they move through the prototype.
     • We will mirror what they can see in their viewport. This includes their location, zoom level and page.
     • We'll include their cursor so you can see exactly where they are.
     • We don't show any interactions they have with the Figma UI (Tool bar and sidebars). You can still see their cursor's location as they interact with the Figma UI.

  Want to be in the spotlight? Gather everyone and facilitate meetings, workshops, design crits, and more using spotlight →

  Follow in a prototype

  You can follow others while you are in Presentation View. This allows you to follow along with a user while they interact with your prototype.

  You can use this to:

  • Walk-through prototype Interactions with remote collaborators
  • Track what actions a user is performing during a usability test
  • Switch between presenter views during a presentation
  • Remotely control a presentation from your phone

  1. Open the prototype in Presentation View.
  2. Hover over the top of the screen to show the menu bar.
  3. Click on the user's Avatar in the menu bar to follow them:
  4. You can then see their actions as they move through the prototype. We'll include their cursor so you can see exactly where they are.

  Tip! If someone has logged in to Figma, we will show their profile picture and display name. If they aren't logged in, we will show a question mark icon and an "Anonymous" name.

  Stop following

  To stop following, you can interact with your screen in the following ways:

  • Selecting an object in the Canvas
  • Zooming in or out
  • Navigating out of the current viewport e.g. pan around the canvas

  In a prototype, you can stop following by interacting with the prototype. This won't affect what the person you were following sees at their end. Although, they could choose to now follow along with your actions!

• Use cursor chat in Figma design

  Before you start

  Who can use this feature

  Anyone with can view or can edit access in a Figma design file can use cursor chat.

  This article is for using cursor chat in Figma design. Read about cursor chat in FigJam →

  Cursor chat allows you to type live, temporary messages to others in your FigJam file. This is great for quick communication, such as:

  • Getting a collaborator's attention ("Love this!")
  • Lightweight collaboration ("Is this the latest version for production?")
  • Discussions about the contents of a file ("Is this the right color?")
  • Spontaneous file encounters ("I'm in here too! Wanna voice chat?")

  

  Enter cursor chat

  Enter cursor chat mode through the following ways:

  • Use keyboard shortcut /
  • Right-click the canvas and select Cursor chat

  An empty speech bubble will appear next to your cursor.

  Your chat bubble is anchored to your cursor and follows you around the canvas. You can pan around and pinch-to-zoom the canvas without exiting cursor chat.

  Use cursor chat

  Once cursor chat mode is activated, start typing and other collaborators in your file will see what you're typing as you're typing it. Because cursor chat is live, there is no action to confirm or send your message. Your cursor displays the message for five seconds after you're done typing.

  Clear your chat

  To clear your chat and type a new message, press Esc on your keyboard. Your previous message will disappear, and you can immediately type a new one.

  A single chat has a 52 character limit. You can press Enter / Return on your keyboard to create a new line. When you type on the new line, Figma will remove your previous message.

  Note: Figma does not keep a log of messages from cursor chat. Once you clear your chat, it'll disappear forever. If you need your messages to be permanent, consider dropping a comment instead.

  Exit cursor chat

  There are several ways to quickly exit out of cursor chat mode:

  • Press Esc
  • Click anywhere in your file
  • Switch to a different tool
  • Open a menu

  FigJam also eventually fades your cursor chat and switches you back to the move tool if you haven't typed a new message in a while.

• 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
  • Image
  • Animated GIF

  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.

  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 →

• Copy and paste objects in the canvas

  Before you start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can view access can copy objects in a file

  Anyone with can edit access can paste objects in a file

  Hands-on learner? Check out our Copy and paste playground file.

  When you copy and paste an object in your canvas, Figma considers your intended placement of the object while keeping you aware of your location and view of the canvas.

  Paste placement

  Pasted objects try to maintain the same x and y positions within the destination frame relative to its position in the group or frame it was copied from. If the destination group or frame can't accommodate either of the object's x or y position in its previous container, Figma will paste the object in the center of the new frame.

  In the example below, Frame 1 contains a purple ellipse, red star, and green square located at the top left, bottom left, and bottom right corners respectively.

  When we copy the objects from Frame 1 to Frame 2:

  • the purple ellipse keeps its original position because both its x and y coordinates can be matched in Frame 2
  • the red star can only be matched with its original x coordinate and is centered on the y axis
  • the green square is centered on both axes because neither its original coordinates can be accommodated in Frame 2.

  

  When we copy the objects from Frame 1 to Frame 3 below:

  • the purple ellipse keeps its original position because both its x and y coordinates can be matched in Frame 3
  • the red star keeps its original position because both its x and y coordinates can be matched in Frame 3
  • the green square is centered along the x axis because it can only be matched to its y coordinate in Frame 1.

  

  Canvas view

  If you have a frame selected while pasting a copied object, Figma considers your current view of the canvas to determine where to paste the object and whether to adjust your viewing area.

  • If your current view of the canvas is far from the selected frame, Figma will paste the object in the center of your current view to avoid moving you too far from your intended paste area or disorienting you within the canvas.
  • If the selected frame is just outside your current view, Figma will paste the object into the selected frame and adjust your viewing area slightly to bring the pasted object into view.
  • If the object being pasted is larger than your current view of the canvas, Figma will adjust your view's zoom level so you can see the full pasted object.
  • If the object is being pasted into a selected frame larger than your view of the canvas, Figma will place it inside the frame in a centered position to keep you within your viewing area.

  Note: Figma considers an area 50% larger than your current view of the canvas to determine whether to adjust your view after pasting an object. If your pasted object is placed within that area, Figma will adjust your view. Otherwise, Figma will paste your object on the canvas, centered to your current view, and adjust your zoom level to depending on the object's size.

  Paste to replace

  Use the Paste to replace function to remove a selected object from your canvas or frame and replace it with the object copied to your clipboard. This is useful when you want to replace placeholder items in a frame or populate low fidelity wireframes with assets.

  

  1. Select and copy an object using the keyboard shortcut:
     • Mac: ⌘ CommandC
     • Windows: Control+C
  2. Select the objects you'd like to replace with the copied object.
  3. Right-click your selection and click Paste to replace from the menu. You can also use the keyboard shortcut:
     • Mac:⌘ Command⌥ Option⇧ ShiftV
     • Windows: Control+Alt+Shift+V

  Note: The pasted object will adopt the constraints of the object it replaced. Learn more about constraints →

  Paste over selection

  The Paste over selection option will place a copied object on top of a selected frame, not inside it. The pasted object will match the x, y position of the selected object.

  1. Select and copy an object using the keyboard shortcut:
     • Mac: ⌘ CommandC
     • Windows: Control+C
  2. Select the frame you want to paste the copied object on top of.
  3. Click to open the file menu > Edit > Paste over selection. You can also use the keyboard shortcut:
     • Mac: ⌘ Command⇧ ShiftV
     • Windows: Control+Shift+V

  Multi-paste

  Multi-paste is useful when you want to add an object to multiple frames at the same time. For example, adding a navigation bar to multiple mobile wireframes or a footer to slides in a presentation deck.

  

  1. Select and copy an object using the keyboard shortcut:
     • Mac: ⌘ CommandC
     • Windows: Control+C
  2. Select the frames you want to paste your copied object to.
  3. Paste the object using the keyboard shortcut:
     • Mac: ⌘ CommandV
     • Windows: Control+V

  Paste here

  The Paste here option lets you choose the exact placement for a pasted object. The object is placed in the location of your cursor on the canvas or in a frame.

  

  1. Select and copy an object using the keyboard shortcut:
     • Mac: ⌘ CommandC
     • Windows: Control+C
  2. Position your cursor where you want the top left of your copied object to be placed.
  3. Right-click and select Paste here.

  Note: When you use Paste here with an auto layout frame, the object will be pasted on top of the frame, not inside it.

  Paste to clipped frames

  Copy pasting objects that are inside a frame, but visually outside the frame bounds will honor the outside position whether the destination frame is clipped or not.

  This is handy for placing objects outside of the frame that will be animated into or out of a frame in a prototype with smart animate.

  Copy as PNG

  You can copy a selected object as a PNG image to your clipboard to paste inside Figma or other applications. Images created using Copy as PNG will default to a 2× size image output.

  • Select an object.
  • Right-click the object and select Copy as PNG. You can also use the keyboard shortcut:
    • Mac: ⌘ Command⇧ShiftC
    • Windows: Control+Shift+C
  • Paste the image using the keyboard shortcut:
    • Mac: ⌘ Command⇧ShiftV
    • Windows: Control+Shift+V

  Copy and paste image fills

  Images in Figma behave as fills that can be layered and applied to shapes objects. You can select an image fill on a shape and copy paste it onto another shape.

  1. In the Fill section of the right sidebar, select the area just to the left of the image preview.
  2. Copy the fill using the keyboard shortcut:
     • Mac: ⌘ CommandC
     • Windows: Control+C
  3. Select the shape you want to add the copied fill to.
  4. Paste the copied image using the keyboard shortcut:
     • Mac: ⌘ CommandV
     • Windows: Control+V

  Learn more about how copy and paste works in our playground file →

• Design, prototype, and inspect (right sidebar)

  Before you start

  Who can use this feature

  Users on any team or plan.

  Users with can edit access to a file can access all of the Properties Panel

  Users with View access to a File can only access the Code section

  When you're in the editor, you will see a sidebar on each side of the canvas. Along with the Toolbar, these sidebars make up the Figma UI.

  The Figma UI allows you to access, create and adjust elements of your design.

  • The left sidebar gives you access to the Layers, Assets, and pages included in your file. We call this the Layers panel. Learn more about navigating the Layers panel.
  • The Design tab of the right sidebar lets you view and adjust the properties of any object. You can also access the file's prototype settings and view the code of any selected object(s) in the Inspect panel.

  In this article, we're going to take you on a tour of the right sidebar. There are three tabs at the top the panel.

  Design

  The Design tab allows you to view, add, remove or change the properties of objects within your design.

  When you have nothing selected in the Design panel, you will be able to view any Styles that are local to the file. You'll also be able to update the background color of the canvas.

  

  Once you select a layer, the Design tab will consist of many different settings. The type of layer you've selected will determine what settings are available in the Design tab.

  For example, select a text object to view and adjust the text formatting. When you select a component, you can view, detach, or swap instances in the Instance menu.

  

  Any properties that are currently active will show up in black. Inactive properties that aren't applied to the selected layer will show as greyed out.

  The following properties are available in the Design tab:

  • Alignment and Distribution
  • Frame Size and Orientation 
  • Position on the Canvas (X and Y) 🔗
  • Dimensions of the Object (Width and Height) 🔗
  • Instance 
  • Constraints 
  • Layout Grid
  • Layer (Blend Modes)
  • Text 
  • Fill 
  • Stroke
  • Effects 
  • Export Settings 

  Prototype

  The Prototype tab gives you access to all the prototyping functionality.

  This allows you to establish connections between frames in your design. You can then apply transitions that simulate how a user might interact with them.

  The Prototype tab consists of five sections:

  1. Choose an Interaction

     Allows you to define the Trigger, Action and Destination for any Interactions.

  2. Apply an Animation

     Allows you to define the Transition that moves the users between Frames. You can also adjust the Direction, Easing, Duration and Smart Animation.

  3. Customize an Overlay

     Allows you to create tool-tips, interactive menus, alerts or confirmations.

  4. Define the Overflow Behavior

     Allows you to define how your prototype responds to scrolling. This allows you to create more advanced user interactions e.g. carousels, galleries or interactive maps.

  5. Adjust the Prototype Settings

     Allows you to adjust the Device, Background, and Starting point of your prototype.

  

  Tip! For an even more efficient workflow, you can quickly toggle between the Design and Prototype tabs using the keyboard shortcut Shift E.

  Learn more about about prototyping in Figma →

  Inspect

  The third option in the right sidebar is the Inspect tab. This allows you to see how to express elements of your design in code.

  You can choose from the following formats:

  1. CSS (Web Development)
  2. iOS (Swift)
  3. Android (XML)

  You can also toggle between a Code and List view, using the icons provided:

  Learn more about using the Inspect panel →