Enabling Dev Mode changes the interface of a Figma Design file. In Dev Mode, the left sidebar provides an easy way to navigate between designs and identify which sections are ready for development.

• A

  Search

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

  1. Click in the left sidebar or use the following keyboard shortcut to open the search bar:
     • Mac:Command f
     • Windows:Ctrl f
  2. Enter the text or layer name you want to find. The search results automatically populate as you type.
     • You can display results by your current page or see results for all pages
     • Click Settings to add search filters for layer type—such as text, frame, shape, etc
     • Use and to move through your results
     • In the Settings menu, use Other to search for everything else, such as widget or slice names
  3. Click on a result to go to the layer on the canvas.
  4. To return to the Navigation panel, click or press Esc.
• B

  Pages

  The Dev Mode icon indicates which pages contain sections marked Ready for dev. Sections marked as ready appear under Ready for development in the Dev Mode navigation panel.

• C

  Sections marked as Ready for development

  The Dev Mode icon indicates which pages contain sections marked Ready for dev. Sections marked as ready appear under Ready for development in the Dev Mode navigation panel.

• D

  Layers

  The Dev Mode icon indicates which pages contain sections marked Ready for dev. Sections marked as ready appear under Ready for development in the Dev Mode navigation panel.

  Using the cursor to hover over layers on the canvas reveals more information about its layout, such as size, padding, and spacing.

  When a top-level frame is selected, you can use the left and right arrow keys or click the arrows on the screen to move between each frame on the page.