Guide to Components in Infa.ai

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

Copy link

Main Components: The Foundation

Copy link

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.

Copy link

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.

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

Copy link

Component Views: Real-world Applications

Copy link

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.

Copy link

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

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

Copy link

Comparing Main Components and Component Views

Copy link

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