Overview
Clear annotations can assist developers and testers to ensure that proposed designs are delivered to the highest standard.
Annotations should aim not to be overloaded, but finding the right balance between required information and possible extreme cases.
Document Structures
When working with the same development team on multiple handovers it makes sense to stick to a structured format. Overtime this consistency will build up between design and development of what to prepare and expect. Each time this structure can be refined to create the previously managed balance.
Before setting out the annotations, you should workout what you are trying to convey and how concisely can you do this. A few questions to ask yourself:
- How many variations are there in my designs, this could be screens or component variants?
- Is there overlaps to other projects that you should use as examples e.g. component variants or similar flows?
- Does anything change based on the device or viewport size?
- Are there edge cases that should be highlighted?
- Are any styles different to our current design system of branding?
- Am I using new components, branding or content that will be new to the development team?
Example Documentation Template
More questions will crop up as you work through this but below is a possible annotation template, or use our Figma Annotation Template:
- Overview - Give an overview of what you are creating; either the top flow or component variations.
- Key Variations - Highlight any key variations that change such as the unhappy path on a flow, examples from other projects or changes to the components.
- States - Annotation specific states of component(s) and highlight any style differences.
- Dimensions and Styles - This may be split up over sub headings but key elements should have all the expected sizes and styles clearly annotated. Our Redlines Library provides some components to highlight key information.
- Typography/Real Data - Illustrate anything that is key when using real content such as text wrapping, long and short content from an API, nested component visibility. Providing clear extremes will help developers and testers work out the range of a component.
- Responsive Variations - Although all of our work is mobile first it is beneficial to show key variations of a page or component as you expect them to be displayed in other viewports.