Designers · problem and fix
Design handoff missing specs developers: states, measurements and motion on Mac, 2026
Design handoff misses specs when developers get finished screens but no written states, measurements, or motion. Developers then guess at hover colors, error text, and how fast a panel slides. Fix it by writing every state, measuring every gap, and describing motion in plain numbers before you hand off. Lazur can point at the layer you forgot, but the spec is still yours to write.
The short answer
- Developers guess when a handoff shows only the resting state of a screen.
- Write a state table for every interactive part, including disabled and error.
- In Figma, press Shift+D for Dev Mode. Select one object, hold Option, and hover the other to measure.
- Describe motion as a trigger, a duration in milliseconds, and an easing curve.
- Check seats first. View seats cannot open Dev Mode.
What developers lack states, measurements, and motion specs costs you
Rework after the build
A developer builds the default state, then rebuilds it when the disabled state arrives. Rework costs build time, review time, and QA time. The same component can be rebuilt across several screens before anyone notices.
Questions that never end
Every missing value starts a thread. The developer asks, you answer, and they wait. Each question costs two people's attention. The answer often lives in your head, so the next question also lands on you.
QA tickets that were design decisions
When a state is missing, QA tests what the developer guessed. Bugs logged this way are design decisions, not defects. They take triage time, and the fix still needs your call.
Motion cut at the last minute
A transition nobody specified tends to get dropped in review, because nobody can say what it should do. You lose the detail that made the screen feel right, and the build time already spent is gone.
Late changes to shared components
A guessed hover state on a shared button can spread to every screen that uses it. Fixing it later means touching several screens, and each one needs review again.
Why it happens
Frames show one moment
A static frame shows the resting state. It hides hover, focus, loading, empty, and error states. The developer sees one picture and fills in the rest. That is where most guesses start.
The spec lives in your head
Decisions made in a meeting or a direct message rarely reach the file. The developer never sees the reason behind a radius or a timing value. They build what they can see, not what you decided.
Motion does not fit in a frame
A still frame has no time in it. Without a trigger, duration, and easing, motion becomes a guess. Teams often assume the prototype explains it, but the developer may never open the prototype.
Developers join after the design
If a developer sees the design late, they build from the frame. Questions get answered after the code exists. Late review is where missing states turn into rework.
Seats and access hide the details
Dev Mode needs a Full or Dev seat. View seats get basic inspection and cannot open Dev Mode. A developer who cannot see the inspect panel will ask for values in chat instead.
No shared definition of done
If nobody defines a finished handoff, the designer hands over a frame and calls it done. The developer thinks done means every state is specified. Both are right by their own rules, so the gap stays hidden.
Components without variants
When each state is a separate frame, nothing links them. A developer sees four loose screens and cannot tell which one is the component. Variants tie the states to one component.
How to fix it
These work with or without any app.
Write a state table for every interactive part
Make a table with one row per state and one column per fact. Cover default, hover, pressed, and disabled at least. Add error, loading, and empty wherever they can appear. Write not applicable for any state that does not exist.
Build states as variants in one component set
Figma's variants help page says all variants in a set must share the same properties and values. Each variant must be a unique combination. Select the layers, then choose Combine as variants in the right sidebar. If your plan lacks variants, check the pricing page, then use one labeled frame per state.
Use Dev Mode for values, not screenshots
Press Shift+D to enter Dev Mode, then read values from the Inspect tab. Dev Mode needs a Full or Dev seat. Without one, copy each value into a text layer beside the frame, such as spacing, radius, color token, and type size.
Measure only the gaps developers ask about
Select the first object, hold Option, and hover over the second to read the gap. Use Shift+M for a measurement that stays on screen. Measure the gaps a developer must match. Too many lines hide the one that matters.
Write motion as three lines
Write the trigger, the duration in milliseconds, and the easing name. Add the reduced-motion behavior, then test it under Apple menu > System Settings > Accessibility > Display. A line that says smooth gives the developer nothing to match.
Record motion with the Screenshot app
Press ⇧⌘5 to open the Screenshot toolbar. Record the trigger and the result, then stop. Name the file after the screen and the trigger. Attach the clip next to the frame or in the ticket, so the timing is never a guess.
Agree on the definition of done with the developer
Ask the developer what they need before the handoff. Agree on a short list: states, values, motion, and empty or error copy. A handoff is done when that list is complete. Both of you can check the list without another meeting.
What missing specs cost your team
A missing spec does not look like a missing spec. It looks like a Slack thread, a rebuilt component, or a QA ticket that reads like a design bug. Each one pulls time from someone who was already busy.
Start with the numbers that have sources. Zeplin's UX tools design delivery survey reports that 90% of respondents say the design does not match the final product. It also reports that 80% say developers miss changes to designs. The page gives no sample size and no survey date. Read these as a warning sign, not a measurement.
Atlassian's State of Developer Experience 2025 is broader. It surveyed 3,500 developers and managers in six countries. Half of the developers say they lose more than 10 hours a week to organizational inefficiencies. That covers everything from finding docs to switching tools. It is not a handoff statistic, so do not quote it as one.
90%
of Zeplin survey respondents say the design does not match the final product. The page gives no sample size or date.
Report: UX Tools Design Delivery Survey (Zeplin)80%
say developers miss changes to designs. Same Zeplin page, same caveat on sample size and date.
Report: UX Tools Design Delivery Survey (Zeplin)50%
of developers in Atlassian's 2025 survey lose more than 10 hours a week to organizational inefficiencies, not handoff alone.
Atlassian research: AI adoption is rising, but friction persistsWhat the lost time costs in dollars
Use your own rates first. The U.S. Bureau of Labor Statistics reports a median pay of $64.44 an hour for software developers, quality assurance analysts, and testers combined. Take the hours your team lost on one feature, multiply by the rate, and you have a number a manager will read. Keep in mind that the BLS figure covers a group, not one company.
Why developers end up guessing
A static frame shows one moment. Usually that moment is the resting state of a button, with clean text and perfect data. It does not show hover, focus, loading, the empty list, or the error after a failed save. The developer sees the frame and fills in the rest. Their guess may be fine. It may also be wrong in a way that shows up in review.
Figma's variants help page uses four states as its standard example: default, hover, pressed, and disabled. If those four are not written down, they live in your head. A 2017 CSCW paper by Maudet, Leiva, Beaudouin-Lafon, and Mackay studies designer-developer gaps in how each side represents and reads interactive systems. Its findings are not summarized here.
Fixes you can use today without buying anything
None of these fixes need a new tool. They need a habit and a short checklist. Start with states, since they touch every interactive part. Measurements and motion come next. Keep the checklist in the same file as the design, so nobody has to hunt for it.
- Name every interactive part in the frame, including buttons, fields, toggles, and menus.
- List each state that applies to each part, including disabled, error, loading, and empty.
- Measure any gap that matters with Dev Mode or the Measure tool, then write the value down.
- Write each motion as a trigger, a duration, and an easing name.
- Record any motion you cannot describe in words, and attach the clip to the frame.
Write a state table for each component
A state table is a grid. Each row is one state. Each column is a fact a developer needs to build it. Keep the table in the Figma file next to the component, or in a shared doc. Here is a short example for two common parts.
| Component | State | What to write | Developer check |
|---|---|---|---|
| Primary button | Default | Fill token, label text, corner radius, padding | Values match tokens in code |
| Primary button | Hover | Fill change, cursor, timing of the change | Pointer hover shows the same change |
| Primary button | Pressed | Fill or scale change, what happens on release | Release triggers the action once |
| Primary button | Disabled | Opacity, label color, no hover response | Keyboard focus is skipped on purpose, or kept |
| Text field | Error | Message wording, border color, icon, where it appears | Message copy is final, not placeholder |
| Sheet | Loading | Spinner position, copy, timeout behavior | Empty and loading copy both written |
Read the table as a checklist. Every interactive part needs a row for each state that applies. If a state does not apply, write that too. A row that says not applicable saves a question later. Match the names to your code component names, so the developer does not translate them.
Measurements developers need in Figma
Dev Mode is the fastest way to hand over measurements. Press Shift+D, or use the Dev Mode toggle at the top of the file. Open the Inspect tab in the right sidebar. It lists layout, color, typography, text, component properties, styles, and variables. Developers copy values from there instead of guessing from pixels.
To measure the gap between two objects, select the first, hold Option, and hover over the second. For a measurement that stays on screen, use the Measure tool or press Shift+M. Press Shift+T to add an annotation for a rule you cannot show in a number, such as when a list scrolls.
The Figma pricing page, checked on 2026-11-08, lists a Full seat at $16 a month on the Professional plan. A Dev seat lists at $12 a month. That page showed monthly prices only, so check annual rates yourself. Dev Mode is not available on the Starter plan.
Motion specs: write the timing, not just the arrow
A frame cannot show how a panel slides in or how long a toast stays on screen. Motion needs three things written down: the trigger, the duration in milliseconds, and the easing curve. Add what happens when someone turns on Reduce Motion. To test that case, open Apple menu > System Settings > Accessibility > Display and turn on Reduce motion.
- Trigger: tap on Add, or the sheet opens after the save succeeds
- Duration: write milliseconds, never 'quick' or 'slow'
- Easing: name the curve your team uses and link to it
- Reduced motion: what replaces the movement, such as a fade or no change
- Clip: a short screen recording saved next to the frame
To record motion on a Mac, press ⇧⌘5 and choose a recording option from the Screenshot toolbar. Name the file after the screen and the trigger. Attach it to the Figma frame or the ticket. If you prototype with Smart Animate, test the prototype before you hand off. The Smart Animate fix page covers the common failures.
Where Lazur helps, and where it does not
Lazur is a voice assistant for the Mac. Hold ⌥⌘ and ask about anything on screen. Lazur answers out loud. Ask where a layer is, and it draws a circle and a label around it on your screen. That helps when a state hides in a component set you forgot to open.
It helps most with the work around the spec. Ask it to guide you through combining layers into variants, one click at a time. Hold fn to dictate a handoff note into Slack or Linear. Ask it to draft a checklist, then rewrite the draft in your own words.
It can draft a checklist, but it does not know your product decisions. It does not click through Figma or change your file. Check every state, value, and timing against the design yourself. Lazur sees your screen only while you hold the shortcut.
A one-week handoff routine
Run the routine on one screen first. A button, a form, and a modal make a good test. Once the routine works, use it on each new feature. Treat the days as a rhythm, not a deadline.
Mistakes people make with handoff specs
- Documenting only the happy path, with real text and perfect data.
- Writing 'looks good' where a developer needs a value to match.
- Adding specs after the developer has already built the screen.
- Leaving motion for a later pass that never happens.
- Keeping specs in Slack threads that nobody can find next month.
Put every spec in one place, next to the frame. Link to that location from the ticket. When the design changes, update the spec and say so in the thread. A spec that is one click away gets read. A spec buried in a thread gets guessed around.
What to do next
Pick one screen this week. Write its state table, measure its gaps in Dev Mode, and add motion lines for anything that moves. Then walk through it with the developer who will build it. Ask which line they had to guess, and fix that line first. Lazur is on the download page. Lazur Pro is $18 a month, or $15 a month billed annually, after a 3-day trial with no credit card. See pricing for the details.
Faster with Lazur
Where Lazur helps with developers lack states, measurements, and motion specs
Hold ⌥ ⌘ and say what you want. Lazur sees your Figma window. Lazur draws a circle and a label around the button or menu you need.
- 1
Hold ⌥⌘ and talk
- 2
Lazur draws a circle and a label around the button or menu you need.
- 3
You stay in Figma. Nothing to copy into a chat window.
More things to say in Figma
- “Where is the disabled state for this button?”
- “Walk me through combining these layers into variants.”
- “Hold fn and dictate a handoff note into Linear.”
- “Draft a checklist for a modal with error and loading states.”
- “What does Smart Animate do between these two frames?”
- “Remind me Thursday to check the motion specs.”
Free for 3 days, then $18/month. Download for Mac
You say“Where is the hover state for this button?”
Lazur · points at itLazur draws a circle and a label around the hover variant, if it is on screen.
What designers say to Lazur for this
Each one is a single hold of ⌥ ⌘.
“Where is the disabled state for this button?”
If the disabled variant is on screen, Lazur draws a circle and a label around it.
Points at it
“Walk me through combining these layers into variants.”
Lazur guides you one click at a time and waits for each click. It does not click for you.
Walks you through it
“Hold fn and dictate a handoff note into Linear.”
Clean, formatted text lands at the cursor in any app. You still read it before you send it.
Types what you say
“Draft a checklist for a modal with error and loading states.”
Lazur drafts text you can edit. It does not know your product rules unless you tell it.
Drafts it
“What does Smart Animate do between these two frames?”
Lazur answers out loud, using what it sees on screen while you hold ⌥⌘.
Explains what's on screen
“Remind me Thursday to check the motion specs.”
Lazur adds the reminder to Apple Reminders at the time you give.
Handles the small stuff
A plan you can start this week
- Day 1
List parts and states
Name every interactive part on one screen. Write each state that applies, including disabled, error, loading, and empty. Mark the states you are not sure about so you can ask.
- Day 2
Build variants
Combine the states of each interactive part into a component set. Use a State property with default, hover, pressed, and disabled. Add error or loading where they apply.
- Day 3
Measure the gaps
Open Dev Mode with Shift+D. Hold Option and hover to measure gaps that matter for layout. Add persistent measurements with Shift+M for the values a developer will ask about.
- Day 4
Write motion lines
For each moving element, write the trigger, the duration in milliseconds, the easing name, and the reduced-motion behavior. Record a clip with ⇧⌘5 and attach it to the frame.
- Day 5
Run the handoff check
Walk through the spec with one developer. Ask which line they had to guess. Fix that line in the spec itself, not in a chat thread.
- Ongoing
Keep the spec current
When the design changes, update the table and the variants together. Say what changed in the ticket, so the developer knows what to rebuild.
Questions people ask
Does a design handoff need Dev Mode to include specs?
No. Dev Mode helps developers read values from the file. Without a Full or Dev seat, write the states, values, and motion as text beside the frame. Developers can still build from it. Check your team's seats before you plan the handoff around Dev Mode.
How many states should a button have in the spec?
Figma's variants help page uses default, hover, pressed, and disabled as its standard example. Add focus, loading, or error if the button can show them. Write not applicable for any state that does not exist, so nobody asks later.
How do I describe motion without a video?
Write the trigger, the duration in milliseconds, and the easing curve name. Add the reduced-motion behavior. Text covers the rules. A short clip shows the feel, and you can record one with ⇧⌘5 in the Screenshot app.
What if the developer already built the screen?
Do not wait for the next sprint. Walk through the built screen with the developer. List the states that were guessed, write them into the table, then fix the differences in the component first.
Can Lazur write the spec for me?
Lazur can draft text and answer questions about what is on screen while you hold ⌥⌘. It does not know your product decisions, and it does not change your Figma file. You still check every value, state, and timing.
What if my developers only have View seats?
View seats can inspect properties and measurements, and they can copy code. They cannot open Dev Mode. Put the values in text next to the frame, and confirm the seat setup with your Figma admin before the handoff.
Does Lazur work on Windows?
Not yet. Lazur runs on macOS, on Apple silicon and Intel. Windows is planned, not available.
Is it safe to show screenshots to Lazur?
Lazur sees the screen only while you hold the shortcut. Audio and the screenshot go to AI providers to answer, and they are not stored. If the screen holds client or patient data, follow your employer's rules first.
Sources
- Atlassian research: AI adoption is rising, but friction persists · Atlassian · checked 2026-11-08
- Report: UX Tools Design Delivery Survey · Zeplin · checked 2026-11-08
- Software Developers, Quality Assurance Analysts, and Testers · U.S. Bureau of Labor Statistics · checked 2026-11-08
- Figma Pricing · Figma · checked 2026-11-08
- Dev Mode for admins · Figma Help Center · checked 2026-11-08
- Guide to inspecting · Figma Help Center · checked 2026-11-08
- Create and use variants · Figma Help Center · checked 2026-11-08
- Design Breakdowns: Designer-Developer Gaps in Representing and Interpreting Interactive Systems · Aarhus University Research Portal · checked 2026-11-08
Fix developers lack states, measurements, and motion specs with Lazur, free for 3 days
Hold a key and ask. Lazur sees your screen, points at the button and talks you through it, in any Mac app. No credit card.