Figma Dev Mode: Inspect Measurements
Inspect the selected layer and its surrounding layout, then distinguish measured values from intended behavior. A single frame reveals one design state; it cannot tell an engineer how every width, string length or overflow case should behave.
Before you start: Use a file you can access and confirm Dev Mode availability for your seat. Agree on the target platform and have a developer compare the result with the code component.
Worked example: A card measures correctly at a desktop width but its title wraps on a narrow screen. The useful handoff explains padding, minimum width and wrapping instead of prescribing only the card’s current height.
Step-by-step guide
Select the correct object
Start with the card frame, then inspect the text and nested controls individually. Distinguish the container bounds from the bounds of its children before writing a spacing rule.
Read layout relationships
Compare the visible distances with the design’s layout settings. Record which values belong to padding, internal gap or neighboring layout so implementation does not reproduce spacing twice.
Trace reusable values
Check whether inspected values reference variables or reusable styles. Map their meaning to the application’s tokens instead of creating a new arbitrary number for every inspected property.
Test a second width
Ask the designer to show the component with narrow and wide content. Annotate what should wrap, stretch or remain fixed; do not extrapolate responsive behavior from the desktop snapshot alone.
Compare with the code component
Have the implementer check typography and control states against the existing component. Resolve differences in line height or intrinsic sizing before treating pixel differences as independent defects.
Record exceptions
Keep unusual offsets or platform-specific behavior beside the relevant frame. Review those exceptions during implementation rather than forcing every measurement into a universal token.
Common mistakes
Copying every number literally
A rendered dimension may be an outcome of layout rather than a fixed requirement. Identify the underlying relationship first.
Inspecting only the outer frame
Inner text, icons and nested spacing can explain apparent mismatches. Inspect children before adding compensating margins.
Ignoring export restrictions
Missing inspect or copy information can reflect file sharing settings. Ask the owner to check permissions before assuming the design lacks the data.
Tips
Compare a long label before finalizing the control width.
Write implementation rules in platform terms alongside visual measurements.
Keep intentional exceptions visible instead of burying them in chat.
Sources and verification
Based on product documentation checked on 2026-10-24. This is a documentation-based guide, not a hands-on benchmark. Features and availability can change.