Dev Mode ready for dev view
This article is available for both the previous Figma UI and the new Figma UI. Use the toggle at the bottom left of the page to select your current UI. Get to know UI3: Figma’s redesign →
Before you start
Who can use this feature
Available on the Organization and Enterprise plans.
Users with full, dev, or viewer seats can access the ready for dev view.
Users with full or dev seats can change statuses.
Users with full or dev seats can access the focus view.
The developer handoff process doesn’t happen in a single moment. Instead, designs may go through several iteration cycles as the team continues to refine ideas and apply feedback.
One of the key moments of the process, and one that may reoccur frequently, is when you need to review designs that are ready for development. As designers in your org are working on designs, they’re marking sections, frames, and components in design files as Ready for dev. Before you implement the designs in your codebase, you and your developers need to view the design.
To avoid confusion and prevent important details from getting lost, developers can access a view in Dev Mode that displays a list of all designs in a given file that are marked with a dev status. In addition, the ready for dev view highlights when a design has most recently been updated, so you can understand if it’s changed since the initial handoff.
Ready for dev view
The ready for dev view in Dev Mode displays all designs that have been marked as Ready for dev in a single location. This allows developers to quickly find what they need without having to navigate around the canvas or across multiple pages. A counter displays the number of designs that have been marked as Ready for dev.
To access the ready for dev view:
- Open a Figma Design file.
- Click Ready for dev in the left sidebar.
Note: The ready for dev view only appears in files that have a ready for dev status on at least one design.
The ready for dev view opens, displaying a list of all designs marked with a dev status. From here, you can do the following:
-
Filter designs: Use the options to filter by the following categories:
- All
- Ready
- Completed
You can also sort the display by:
- Recent activity
- Pages
- Name (A-Z)
-
Focus on a design: In the ready for dev view, click on a design to enter a focused view.
Statuses
In Dev Mode, a dev status indicates the current state of the designs in terms of handoff. Statuses can include notes from designers about the design and what’s changed. Dev Mode provides a few statuses to help manage handoff:
- Ready for dev: Set on sections, frames, and components that are ready for a developer to review and implement.
- Completed: Indicates that dev work for the design is done (Organization and Enterprise only).
For more information about statuses, see Dev Mode statuses and notifications.
In the context of the ready for dev view, the status appears in the upper-right corner of each listed design.
Focus view
The focus view in Dev Mode isolates a specific design that’s ready for development. When focused on a design, you can inspect the design’s layers, view a version history for the design, as well as take advantage of all the usual Dev Mode features. Learn more about focus view →
Before you Start
Who can use this feature
Available on the Organization and Enterprise plans.
Users with full, dev, or viewer seats can access the ready for dev view.
Users with full or dev seats can change statuses.
Users with full or dev seats can access the focus view.
The developer handoff process doesn’t happen in a single moment. Instead, designs may go through several iteration cycles as the team continues to refine ideas and apply feedback.
One of the key moments of the process, and one that may reoccur frequently, is when you need to review designs that are ready for development. As designers in your org are working on designs, they’re marking sections, frames, and components in design files as Ready for dev. Before you implement the designs in your codebase, you and your developers need to view the design.
To avoid confusion and prevent important details from getting lost, developers can access a view in Dev Mode that displays a list of all designs in a given file that are marked with a dev status. In addition, the ready for dev view highlights when a design has most recently been updated, so you can understand if it’s changed since the initial handoff.
Note: This video explains collaboration and handoff in Dev Mode using Figma's redesigned interface. For examples of the old interface, see the images in this article.
Ready for dev view
The ready for dev view in Dev Mode displays all designs that have been marked as Ready for dev in a single location. This allows developers to quickly find what they need without having to navigate around the canvas or across multiple pages. A counter displays the number of designs that have been marked as Ready for dev.
To access the ready for dev view:
- Open a Figma Design file.
- Click Ready for dev in the left sidebar.
Note: The ready for dev view only appears in files that have a ready for dev status on at least one design.
The ready for dev view opens, displaying a list of all designs marked with a dev status. From here, you can do the following:
-
Filter designs: Use the options to filter by the following categories:
- All
- Ready
- Completed
You can also sort the display by:
- Recent activity
- Pages
- Name (A-Z)
-
Focus on a design: In the ready for dev view, click on a design to enter a focused view.
Statuses
In Dev Mode, a dev status indicates the current state of the designs in terms of handoff. Statuses can include notes from designers about the design and what’s changed. Dev Mode provides a few statuses to help manage handoff:
- Ready for dev: Set on sections, frames, and components that are ready for a developer to review and implement.
- Completed: Indicates that dev work for the design is done (Organization and Enterprise only).
For more information about statuses, see Dev Mode statuses and notifications.
In the context of the ready for dev view, the status appears in the upper-right corner of each listed design.
Focus view
The focus view in Dev Mode isolates a specific design that’s ready for development. When focused on a design, you can inspect the design’s layers, view a version history for the design, as well as take advantage of all the usual Dev Mode features. Learn more about focus view →