Design system annotations, part 2: Advanced methods of annotating components

How to build custom annotations for your design system components or use Figma’s Code Connect to help capture important accessibility details before development.

GitHub logo
GitHub
•
Jan Maarten
•12 min read•beginner•
--
•View Original
HTMLRailsReact

Overview

This article discusses advanced methods of creating Preset annotations for design system components, focusing on how to enhance accessibility and usability. It outlines the process of assessing components, mapping properties, and utilizing various resources to build effective annotations tailored to specific design systems.

What You'll Learn

1

How to assess which components need Preset annotations

2

Why mapping out component properties is crucial for effective annotations

3

How to utilize Figma’s Code Connect to enhance accessibility in design systems

Prerequisites & Requirements

  • Understanding of design systems and accessibility principles
  • Familiarity with Figma and Storybook(optional)

Key Questions Answered

How do you prioritize components for Preset annotations?
To prioritize components for Preset annotations, assess their alignment with organizational priorities, frequency of accessibility audit issues, and their implementation in React. Focus on components that are frequently used and have a high impact on user experience.
What sources can be used to map out properties for annotations?
Sources for mapping out properties include component documentation on Primer.style, coded demos in Storybook, and component properties in the Figma asset library. Additionally, insights from team members and recent audit findings can provide valuable information.
What are the benefits of using Figma’s Code Connect?
Figma’s Code Connect allows designers to add accessibility attributes directly into the code, reducing the need for extensive annotations. This feature enhances the developer experience by ensuring that key details are exported with the component's code.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Design Tool
Figma
Used for creating design components and annotations.
Development Tool
Storybook
Used for visualizing and testing component implementations.

Key Actionable Insights

1
Assessing components for Preset annotations should be a systematic process that prioritizes those with the highest impact on accessibility and user experience.
By focusing on components that align with organizational priorities and frequently appear in audit issues, teams can ensure that their design system is both effective and user-friendly.
2
Utilizing multiple sources, such as Storybook and Figma, is crucial for accurately mapping out component properties.
This comprehensive approach helps capture all necessary attributes that may not be visually represented, ensuring that annotations are thorough and effective.
3
Implementing Code Connect can streamline the annotation process by embedding accessibility attributes directly into design components.
This reduces redundancy and enhances the overall efficiency of the design workflow, allowing designers to focus on creating optimal user experiences.

Common Pitfalls

1
One common pitfall is assuming that all necessary accessibility information is included in the design components without thorough verification.
This can lead to missing critical details that affect user experience, especially for users relying on assistive technologies. Regular audits and checks against documentation can help mitigate this issue.

Related Concepts

Accessibility In Design Systems
Component Documentation Best Practices
Figma Design Tools
React Component Implementation