Infa Logo

Introduction to Infa.ai

Learn about Infa.ai and how it can help your team improve design system adoption.

Welcome to Infa.ai Documentation

Welcome to the official documentation for Infa.ai. Here you'll find comprehensive guides and documentation to help you start working with Infa.ai as quickly as possible.

Introduction to Infa.ai

Infa.ai is a comprehensive platform designed to help teams document, track, and improve design system adoption across their digital products. Our tools provide insights into component usage, help identify inconsistencies, and streamline the transition between design systems.

Why Infa.ai?

Design systems are essential for creating consistent, scalable, and maintainable digital products. However, implementing and maintaining a design system across large organizations can be challenging. Infa.ai addresses these challenges by providing:

  • Visibility: Gain insights into how components are used across your products
  • Consistency: Identify inconsistencies and deviations from your design system
  • Efficiency: Streamline the process of documenting and tracking components
  • Adoption: Measure and improve design system adoption across teams

Core Concepts

To get the most out of Infa.ai, it's important to understand these core concepts:

Components

Components are the building blocks of your digital products. In Infa.ai, components are organized into a hierarchy:

  • Main Components: The foundational elements of your design system
  • Component Views: Instances of components as they appear in your product
  • Pages: Full page templates and layouts

Tagging

Tagging is the process of identifying and marking components in your product. This allows Infa.ai to track and analyze component usage. There are several approaches to tagging:

  • Class-Based Tagging: Adding identifiers to component class names
  • Element Renaming: Using custom element names for components
  • Data Attributes: Adding data attributes to components

Analysis

Infa.ai provides powerful analysis tools to help you understand your design system adoption:

  • Component Inventory: A comprehensive list of all components in your product
  • Adoption Metrics: Measure how well your design system is being adopted
  • Inconsistency Detection: Identify areas where components deviate from the design system

Key Features

Infa.ai offers a range of features to help you manage your design system:

  • Component Tagging: Tag and track components across your product
  • Design System Inventory: Generate comprehensive inventories of your UI components
  • Migration Planning: Plan and track your design system migration progress
  • AI-Powered Analysis: Leverage AI to identify inconsistencies and opportunities for improvement

Available Integrations

Infa.ai provides multiple ways to integrate with your workflow:

  • Chrome Extension: Analyze and document web-based design systems directly in your browser
  • Figma Plugin: Connect your design files with implementation
  • Coda Pack: Document and track your design system within Coda

Getting Started

This section will help you set up your first project in Infa.ai and start tracking your design system components.

Prerequisites

Before you begin, make sure you have:

  • An Infa.ai account (sign up at infa.ai/signup if you don't have one)
  • Access to the codebase of the product you want to track
  • Basic understanding of your design system components

Step 1: Create a New Project

  1. Log in to your Infa.ai account
  2. Click on the "New Project" button in the dashboard
  3. Enter a name for your project (e.g., "Company Website")
  4. Add a brief description of the project
  5. Click "Create Project"

Step 2: Configure Project Settings

Once your project is created, you'll need to configure some basic settings:

  1. Go to the "Settings" tab in your project
  2. Set the base URL of your product (e.g., "https://example.com")
  3. Configure any authentication settings if your product requires login
  4. Set up team members and permissions

Step 3: Define Your Design System

Before you can start tracking components, you need to define your design system in Infa.ai:

  1. Go to the "Design System" tab
  2. Click "Add Main Component"
  3. Enter the component details:
    • Name (e.g., "Button")
    • Description
    • External links (e.g., Figma, Storybook)
  4. Repeat for all your main components

Step 4: Tag Components in Your Product

Now you're ready to start tagging components in your product:

  1. Go to the "Component Views" tab
  2. Click "Add Component View"
  3. Select the Main Component this view belongs to
  4. Configure the component view:
    • Set the URL pattern where this component appears
    • Define the XPath selector to identify the component
    • Add any additional context information

Step 5: Analyze Your Design System

Once you've tagged your components, you can start analyzing your design system:

  1. Go to the "Dashboard" tab
  2. View the component inventory and adoption metrics
  3. Identify inconsistencies and areas for improvement

Need Help?

If you can't find what you're looking for in the documentation, you can:

We're here to help you make the most of Infa.ai and improve your design system adoption journey.