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:

1. Open a Figma Design file.
2. Click Ready for dev in the left sidebar.

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 →