What to finish in Figma before Dev Mode

Quick answer

Dev Mode shows the file you actually left, not the file you meant. Before anyone opens it, put the in-scope screens on one page or section, use real copy, and name the layers and components. Move exploration somewhere else. Write down the states Inspect cannot invent: error, empty, loading, no permission. Then follow the Dev Mode checklist. This page is the prep. That one is the pass with engineering.

Who this is for

• Designers handing a flow to engineering this week.
• Leads who keep finding “final_v7” on the same page as the discarded concept.
• Engineers who have been asked to inspect a file that is still a workshop.

This is not the Framer or Webflow path. Those start on Ship.

In scope, and obviously so

One page, or one section, is the work to build. Title it with the feature name. Everything else is either supporting (a component page) or out of scope.

Out of scope frames do not sit beside the final screens with a similar name. Park them on a page called Exploration, or delete them if the decision is made. A muted label that says “not for build” still gets built if it is the frame someone clicks first.

If the workshop happened on a board, the decision sentence should already be on the cover. That split is FigJam or a design file.

What has to be true on those frames

Check	Why Dev Mode cannot fix it
Real copy, including errors	Placeholder text ships, or engineering invents the string
Type and color from styles or variables	A one-off hex becomes a one-off in code
Repeated UI as components, not detached copies	Three buttons that look the same and are not the same component will be built three ways
Layers named for what they are	Frame 184 is not a spec
Images exported from the frame you mean	A soft or wrong-size export is fixed in Figma. See blurry exports

You do not need a perfect system. You need the screen they will build to use the names you want in the product. The variables walkthrough is variables and modes if the file is still raw colors.

States that are not on the happy path

Draw them, or write them next to the flow. Inspect does not guess:

• Empty, before the person has data.
• No results, after a filter.
• Loading.
• Error, including the sentence and what the button does.
• No permission.

If a state is a pattern you already use, link that guide from the handoff note instead of inventing a one-off.

What you leave in writing

A short note on the page, not a plugin:

• What is in this delivery, in one sentence.
• What is explicitly later.
• Which interactions are prototypes only. A prototype connection is not a promise that the animation ships.
• The version name from version history, so “latest” means the named review, not an autosave from this morning.

Then the checklist

When those are true, go through Dev Mode for designers with engineering. Descriptions, the review, and what Dev Mode does not do are that guide’s job. Plugin roundups for inspect and tokens stay at dev handoff plugins. You do not need a plugin to do the prep on this page.

Common mistakes

• Marking the whole file ready because one flow is done.
• Leaving the discarded concept on the same page because you might need it. History and an exploration page exist so the delivery page can be boring.
• Cleaning layer names on the component page and not on the screen they will inspect.

FAQ

Should I hide the component page?

No. Hide exploration. Keep the components they will match against. A locked, named component page is useful. A junk drawer page is not.

What if copy is still with marketing?

Do not mark the file ready. Put draft copy in, label the page Copy not final, and do not ask for a build estimate off that file.

Does this apply to a marketing page going to Framer or Webflow?

The same prep, then a different path. Finish the frames, then Figma to Framer or Figma to Webflow. Dev Mode is the wrong tool if nobody is implementing the frame in a codebase.

Next

The pass itself is the Dev Mode handoff checklist. The set of paths is on Ship.