AI Brand Guide

About this plugin

AI Brand Guide transforms your design files into comprehensive, professional brand guides in seconds. Extract and organize design elements from your Figma files to create beautiful, developer-friendly documentation.

Key Features

1. Intelligent Design Element Categorization: Automatically organizes your elements into Buttons, Icons, and Other Elements based on naming patterns
2. Multi-Frame Export: Choose between Single Frame (all sections in one scrollable frame) or Separate Frames (each section in its own dedicated frame)
3. Color Palette Extraction: Automatically extracts colors from your selection with detailed RGB, HEX, and HSL values
4. AI-Powered Color Naming: Generate professional, creative names for your color palette with a single click
5. Color Theory Generation: Create comprehensive color theory documentation including palette overview, color roles, visual qualities, and usage recommendations
6. Typography Hierarchy System: Extracts and organizes typography into a structured system with Header and Paragraph classifications
7. Component Documentation: Displays detailed specifications for buttons, icons and other elements including exact dimensions and padding values
8. Visual Previews: Generates thumbnail previews for all design elements
9. Form Element Detection: Special handling for contact forms and other form elements with improved display

How It Works

1. Select your design elements in Figma (frames, components, or entire pages)
2. Generate your brand guide with a single click
3. Customize your guide: Rename colors, add color theory, or organize elements
4. Export to Figma: Choose your preferred layout style and generate a complete brand guide directly in your Figma file

Element Categorization

For best results, use these naming patterns:

1. Buttons: Include "btn" or "button" in the name (e.g., "btn-primary", "submit-button")
2. Icons: Include "icn" or "icon" in the name (e.g., "icn-home", "arrow-icon")
3. Other Elements: Include "element" or "other" in the name (e.g., "card-element", "other-banner")

What's Included in Your Brand Guide

1. Color Palette: Complete color documentation with visual swatches and color codes
2. Typography System: Organized type hierarchy with font details and visual examples
3. Buttons Collection: All button variants with exact dimensions and padding specifications
4. Icon Library: Organized icon set with dimensions and specifications
5. Additional Elements: Cards, banners, forms and other UI components with detailed measurements
6. Color Theory: Optional section providing insights on palette psychology, symbolism and usage

AI Brand Guide helps design teams maintain consistency while giving developers the exact specifications they need to implement designs accurately.