Guide to Components in Infa.ai

Guide to Components in Infa.ai

Table of Contents

• Introduction
• Component Hierarchy in Infa.ai
• Main Components: The Foundation
• Component Views: Real-world Applications
• Comparing Main Components and Component Views
• Best Practices for Component View Titles
• Getting Started with Components in Infa.ai
• The Value of Component Views
• The Relationship Between Main Components and Component Views
• Conclusion
• Next Steps

Introduction: Understanding Components in Infa.ai

In Infa.ai, components are the building blocks that help you document, organize, and track elements across your digital products. This guide focuses specifically on how components are structured within the Infa.ai platform, rather than general industry practices.

Understanding the distinction and interplay between different component types in Infa.ai can enhance how design systems are documented, managed, and adopted across projects.

Component Hierarchy in Infa.ai

Within Infa.ai, there are three main levels of components:

1. Pages - Representing full page templates and layouts (link to Pages documentation coming soon)
2. Components - The building blocks of your interface, which we'll explore in depth in this article
3. Tokens - Design tokens like colors, typography, spacing, etc. (work in progress)

This article focuses specifically on Components, which are further divided into Main Components and Component Views.

Main Components: The Foundation

Overview

Main Components in Infa.ai serve as a way to structure components that might be related to your design system documentation. For example, you might create Main Components for inputs, buttons, navigation elements, and other reusable interface elements.

Key Features

• Description: A concise summary of the component's purpose and functionality. This supports markdown and is the first thing people will see when they open your Main Component. You can use this space to provide guidelines, pro tips, and even for internal communication until our comments feature is available.
• External Links: References to additional resources, such as Figma files, Storybook documentation, Jira tickets, PRD documents, etc.
• Reusability: Designed to be used across multiple contexts and products
• Consistency: Ensures design and functional consistency throughout the system

Main Components act as the central reference point, ensuring consistency and coherence throughout your design system documentation in Infa.ai.

Component Views: Real-world Applications

Overview

Component Views in Infa.ai represent the actual uses of your components within the product. If you want to tag components in your product, you'll use Component Views with the element selector functionality within Infa.ai.

For every Main Component, you can generate multiple Component Views to track where exactly your components are being used within your product.

Key Fields

• Component View Title: A descriptor that often extends the Main Component Title with "View" and may include status indicators in square brackets
• XPath Selector: For detailed instructions on utilizing XPath selectors, refer to our dedicated article on XPath selectors
• URL Pattern: For guidance on crafting URL patterns, consult our comprehensive guide on URL patterns
• Context Information: Details about where and how the component is used

Component Views enable teams to visualize the practical use of Main Components, offering insights into their deployment across the product ecosystem.

Comparing Main Components and Component Views

Best Practices for Component View Titles

To streamline the process, starting with the Main Component Title and appending "View" is recommended. This method offers a clear and consistent naming convention, though additional details or statuses can be incorporated for further clarity.

✓ "Button View [Disabled]"
✓ "Navigation Menu View [Mobile]"
✗ "View of Button Component"
✗ "The Button as seen on Homepage"

Getting Started with Components in Infa.ai

If you're new to using components in Infa.ai, here's a quick guide to get started:

1. Create Main Components First: Begin by creating all the Main Components that might be part of your design system. These form the foundation of your component documentation.

2. Start with HTML Basics: If you're not sure what components to tag, start with regular HTML-specific components like inputs, buttons, checkboxes, search inputs, etc.

3. Tag Component Views: Once you've imported all your Main Components, you can start tagging Component Views to track where these components are used in your product.

For a more detailed guide on getting started with Infa.ai, please refer to our comprehensive onboarding documentation.

The Value of Component Views

Component Views shift the focus from mere documentation to the actual usage and adoption of design systems. They:

• Demonstrate Real-world Applications: Showing where and how Main Components are deployed sparks ideas and fosters understanding among users
• Facilitate Design System Inventory: They are an efficient tool for inventorying components across a product's experience, aiding in the identification of gaps or inconsistencies
• Bridge Design and Development: Provide a common reference point for designers and developers
• Accelerate Onboarding: Help new team members understand how components are used in context

The Relationship Between Main Components and Component Views

We at Infa have developed a clear approach to managing the relationship between Main Components and Component Views:

1. Centralized Documentation: Documentation and external links are maintained at the Main Component level, ensuring all related Component Views have access to the same comprehensive information
2. Propagation of Changes: Updates to Main Components automatically affect all associated Component Views, maintaining consistency across the design system
3. Contextual Adaptation: While Component Views inherit from Main Components, they can be adapted to specific contexts without affecting the core definition

Conclusion

The distinction between Main Components and Component Views is fundamental to leveraging Infa.ai effectively. By understanding and utilizing these concepts, teams can ensure their design systems are not only well-documented but also actively and appropriately applied across their digital products.

This approach enhances both the consistency of design and the efficiency of development workflows, ultimately contributing to a more cohesive user experience. We at Infa have seen this structure significantly improve design system adoption rates and reduce inconsistencies across product experiences.

Next Steps

• Explore our guide on Creating Effective Main Components
• Learn about Component View Best Practices
• Discover how to Measure Design System Adoption
• Download our Design System Component Inventory Template