Tutorials
Step-by-step guidance for every annotation type in the library.
Basic Notes
Create interface guidelines and diagrams. Add details that don’t fit within any other type of annotation.
Button annotations
Interactive elements that perform an action such as: open or close a dialog, submitting a form, progressing through a work flow, and toggling the expanded or collapsed state of a component.
Flow lines
Flow lines can help organize design canvases. These components have robust labels for various scenarios to help designers clearly communicate the full range of platform functionality, validation states, and user interactions.
Form element annotations
Form elements allow us to capture information from people. HTML includes a flexible set of fields that we can use for different scenarios.
Heading annotations
Headings allow us to create structure within a page’s content by establishing hierarchy through HTML semantics, or in rare cases, through custom code.
Landmark annotations
Mark important sections of a page and name them to so users can understand their specific purpose in navigating a page.
Link annotations
Links are interactive elements that provide the user with a way to navigate: a section of the same page, a different page within the same website or to a new website, a different to a resource such as a PDF or image, a user's phone app to quick dial a number, or a user's application to start a new message.
List annotations
Lists allow us to group collections of related items. There are different varieties of lists that we can use depending on the type of relationship between list items.
Media annotations
Media is made up of images, video, and audio embeds. These elements provide visual or auditory information (and sometimes both). They often support storytelling, communication, and enhance user engagement across websites and apps.
Metadata annotations
Metadata refers to information about a web document that describes its content and structure, rather than being visible on the page itself. This can include, but is not limited to, the page title, language, character encoding, and instructions for how browsers should display or handle the content.
Mobile annotations
Mobile annotations are designed to support accessible UI design by providing clear, structured notes for interactive elements. Unlike other types of annotation in this library, these annotations assume foundational knowledge of mobile app accessibility. They include iOS, Android, and platform-agnostic annotations to guide implementation across different operating systems.
Ordering annotations
Define the order of elements on a page to help designers visualize intended flows, engineering build said flows, and assistive technology users understand and operate them.
Primer A11y Presets
Annotation stamp support for every component in Primer Web and Primer Brand, as well as limited Details support for Primer Web. Each annotation component contains custom properties pre-set for you to add vital accessibility information that isn’t found in the Primer Web Figma component or the React instance by default.
System Feedback
System feedback such as live region announcements and validation states can enable users, especially those using assistive technologies, to receive clear and timely updates about changes or errors. This boosts accessibility, helps everyone understand status and context, and supports WCAG compliance for inclusive, user-friendly web experiences.
Table annotations
A table is a 2-dimensional data structure where rows and columns are used to represent data about a specific item. Present information in a grid with columns or rows to give quick access to tabular data to help people more easily understand complicated information relationships.
User Interactions
People engage with designs in different ways, often influenced by disabilities, be they permanent, temporary, or situational, as well as personal adaptive strategies. Interaction annotations help designers clearly communicate the full range of user interactions, making sure that diversity is considered and integrated during the build stage.