'%3E%3Crect x='-4.10352' y='0.1875' width='171.875' height='171.875' rx='85.9375' fill='%230C5238'/%3E%3Crect x='82.5566' y='-9.2085' width='133.93' height='133.93' rx='22.7014' transform='rotate(45 82.5566 -9.2085)' fill='%23F79CFF'/%3E%3Crect x='144.375' y='23.677' width='123.75' height='123.75' rx='61.875' transform='rotate(90 144.375 23.677)' fill='%23FF6D38'/%3E%3Crect x='106.562' y='26.198' width='119.396' height='48.125' rx='24.0625' transform='rotate(90 106.562 26.198)' fill='%23252525'/%3E%3Crect x='106.562' y='62.8645' width='48.125' height='48.125' transform='rotate(90 106.562 62.8645)' fill='%2312A720'/%3E%3Cpath d='M106.553 86.927L99.5232 103.942L82.5526 110.99L65.5819 103.942L58.5524 86.927L65.5819 69.9122L82.5526 62.8645L99.5233 69.9122L106.553 86.927Z' fill='%23FFFF00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3971_7584'%3E%3Crect width='165' height='92.8125' fill='white' transform='translate(0 0.1875)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A)
Navigate designs in Dev Mode
🚧 Dev Mode is out of beta
Dev Mode in Figma gives developers everything they need to transform designs into code. Starting January 31, Dev Mode will require a paid seat to access.
Before you Start
Who can use this feature
Included in a full Design seat on Professional, Organization, and Enterprise plans.
Anyone with access to Dev Mode can use Dev Mode features.
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.
- Click in the left sidebar or use the following keyboard shortcut to open the search bar:
- Mac:Command f
- Windows:Ctrl f
- 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
- Click on a result to go to the layer on the canvas.
- To return to the Navigation panel, click or press Esc.
- Click in the left sidebar or use the following keyboard shortcut to open the search bar:
-
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.