Learn how to create, edit, and use labels with color-coded visual overlays in the Infa Chrome Extension.
The Infa Chrome Extension provides powerful label management features that help you organize your design system and visualize component usage directly in the browser.
Copy link
Creating Labels
To create a new label in the Chrome Extension:
Open the Infa side panel by clicking the Infa icon in your browser toolbar
Navigate to the Labels section
Click the "Create Label" button
Enter a name for your label
Choose a color for visual identification
Save the label
Tip
Choose meaningful names that clearly describe the purpose of the label, such as 'Primary Design System', 'Deprecated', or 'Utility'.
Copy link
Label Naming Best Practices
Use clear, descriptive names
Keep names concise but meaningful
Consider using a consistent naming convention across your team
Avoid special characters that might cause issues
Copy link
Editing Labels
To edit an existing label:
Open the Labels section in the Infa side panel
Find the label you want to edit
Click the edit icon next to the label
Modify the name, color, or other properties
Save your changes
Changes to labels are reflected immediately across all elements that use that label.
Copy link
Using Colors for Visual Overlays
One of the most powerful features of labels in the Chrome Extension is the ability to use colors for visual overlays in Discovery Mode.
Copy link
How Color Overlays Work
When you enable Discovery Mode, the extension highlights components on the page using the colors associated with their labels. This creates a visual map that helps you:
Identify design systems: See which design system each component belongs to
Spot patterns: Quickly identify areas dominated by certain component types
Find inconsistencies: Notice where different design systems are mixed
Track adoption: Visualize the spread of your design system across screens
Copy link
Setting Label Colors
Each label can have a unique color. To set or change a label's color:
Open the label editor
Click on the color picker
Select your desired color
Save the label
Copy link
Color Strategy Recommendations
Assign distinct colors to each design system in your organization. For example:
Blue: Primary design system
Green: Secondary/legacy design system
Orange: Third-party components
Gray: Utility/helper components
This helps you instantly see which design system is being used on any page.
Use colors to indicate component status:
Green: Stable, production-ready
Yellow: Beta or experimental
Red: Deprecated, should be replaced
Blue: New components in testing
This approach helps track migration progress and identify components that need attention.
Assign colors based on which team owns the components:
Purple: Core design system team
Blue: Product team A
Green: Product team B
Orange: External/vendor components
Useful for understanding ownership and responsibility across your product.
Copy link
Viewing Overlays in Discovery Mode
To see label colors as visual overlays:
Navigate to any page you want to analyze
Open the Infa side panel
Enable Discovery Mode
Components will be highlighted with their label colors
Hover over components to see label details
Copy link
Applying Labels to Elements
Copy link
Labeling Components
To apply a label to a component:
Select the component in the browser or side panel
Open the component details
Click "Add Label"
Select from your existing labels or create a new one
The label is now associated with the component
Copy link
Labeling Screens
Screens can also have labels applied:
Navigate to the page you want to label
Open the Infa side panel
Access page settings
Add labels to categorize the page
Copy link
Bulk Labeling
For efficiency, you can apply labels to multiple elements at once:
Select multiple components or screens
Use the bulk actions menu
Choose "Add Label" or "Remove Label"
Select the labels to apply or remove
Copy link
Labels and Reports
Labels you create in the Chrome Extension integrate with Infa's reporting features:
Filter reports by label
Exclude certain labels from coverage calculations
Compare metrics across different labels
For more details on using labels in reports, see our Labels overview.
Using Labels in Chrome Extension
The Infa Chrome Extension provides powerful label management features that help you organize your design system and visualize component usage directly in the browser.
To create a new label in the Chrome Extension:
To edit an existing label:
Changes to labels are reflected immediately across all elements that use that label.
One of the most powerful features of labels in the Chrome Extension is the ability to use colors for visual overlays in Discovery Mode.
When you enable Discovery Mode, the extension highlights components on the page using the colors associated with their labels. This creates a visual map that helps you:
Each label can have a unique color. To set or change a label's color:
Assign distinct colors to each design system in your organization. For example:
This helps you instantly see which design system is being used on any page.
Use colors to indicate component status:
This approach helps track migration progress and identify components that need attention.
Assign colors based on which team owns the components:
Useful for understanding ownership and responsibility across your product.
To see label colors as visual overlays:
To apply a label to a component:
Screens can also have labels applied:
For efficiency, you can apply labels to multiple elements at once:
Labels you create in the Chrome Extension integrate with Infa's reporting features:
For more details on using labels in reports, see our Labels overview.
Labels Overview
Component Tagging