Figma commonly presents dimensions as pixel values, while production CSS may use rem. A good handoff converts relationships and tokens—not every visible number mechanically.
Confirm the production root before converting
Ask what the application actually uses for the computed root font size. If it is 16px, divide a Figma value by 16 to get rem. A 24px heading becomes 1.5rem and a 32px spacing value becomes 2rem.
Do not assume the Figma canvas pixel is a physical screen pixel. Treat the design measurement as a CSS reference value and validate the resulting interface at real breakpoints and zoom levels.
/* 24px design value at a 16px root */
.heading { font-size: 1.5rem; }
/* 32px design value */
.section { padding-block: 2rem; }Convert the token system before isolated layers
Group repeated Figma values into typography, spacing, radius, and component tokens. Convert the shared token once, then reference it throughout the codebase. This reduces rounding drift and prevents almost-identical values from multiplying.
Preserve exceptions intentionally. One-pixel borders, raster image dimensions, canvas coordinates, and some shadow offsets may reasonably stay in px because they do not represent scalable type or spacing relationships.
- Identify repeated values and name their intent.
- Convert against the documented root size.
- Keep high precision in tokens and round only presentation where necessary.
- Review optical adjustments rather than forcing them into the nearest scale step.
Translate responsive intent, not separate screenshots
If Figma shows mobile and desktop sizes, determine whether the production value should jump at a breakpoint or scale fluidly between bounds. A CSS clamp value can encode the latter without adding many intermediate media queries.
Use container behavior and content requirements to choose breakpoints. Device labels in a design file are examples, not universal boundaries for every browser window or embedded context.
Convert fixed values with the PX-to-REM tool, then use the clamp generator only for properties that should genuinely scale between two bounds.
Complete the handoff with rendered QA
Compare the application and design at their shared reference viewport, then deliberately leave that viewport. Check wrapping, localization, zoom, minimum text size, focus indicators, and dense component states.
Record any production changes back in the design system. A handoff remains trustworthy when Figma tokens and code tokens evolve together instead of becoming two unrelated sets of numbers.
Sources and further reading
These references define the technical behavior described in this guide. Project-specific computed values should still be verified in the rendered application.
Last reviewed: August 17, 2026