annotations

1 posts

figma

5 Things Designers Need to Know for a Smooth Handoff | Figma Blog (opens in new tab)

Design handoff should be treated as an ongoing process of communication and collaboration, not a single event at the end of design. The article argues that clear annotations, shared terminology, and organized files help ensure that “Ready for dev” genuinely means developers have the context they need. These practices reduce ambiguity while preserving conversations between designers and developers. ## Streamline and Clarify Callouts - Use annotations to explain design intent and highlight details that might otherwise be missed. - Focus callouts on information developers actually need, such as: - New components - Specific interactions not obvious from a prototype - Platform-specific differences - Specs, measurements, and behavior - Avoid duplicating information already captured through variables or styles. - Figma’s annotations in Dev Mode can pin measurements, properties, and notes directly to designs. - Annotations are intended to improve—not replace—designer-developer discussions. ## Adopt a Shared Language - Design and development may use different terms for similar concepts, so teams should align on naming early. - Clarify terms such as “toggle” or “switch” to avoid misunderstandings. - Coordinate variable, style, and component names with conventions already used in code. - Use variables and styles for foundational properties such as: - Fonts - Colors - Spacing - Shared names like `bg-primary-active` are more reliable than manually communicating hex codes or font specifications. - A color wheel within the design system can help teams consistently reference shades and tints. ## Organize Files with Labels - Infinite canvases can become difficult for developers to navigate, especially when they contain unfinished explorations. - Clean up and structure files before inviting developers to build. - Use sections to group related designs and reduce navigation overhead. - Mark completed sections or frames with a “Ready for dev” status so developers know where to focus. - Standardized team templates can reduce context switching and create a more predictable handoff process. A smooth handoff depends on shared context, precise communication, and intentional file organization. Designers should tailor annotations and terminology to their development partners, then clearly separate exploratory work from implementation-ready designs.