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 FeaturesIntelligent Design Element Categorization: Automatically organizes your elements into Buttons, Icons, and Other Elements based on naming patternsMulti-Frame Export: Choose between Single Frame (all sections in one scrollable frame) or Separate Frames (each section in its own dedicated frame)Color Palette Extraction: Automatically extracts colors from your selection with detailed RGB, HEX, and HSL valuesAI-Powered Color Naming: Generate professional, creative names for your color palette with a single clickColor Theory Generation: Create comprehensive color theory documentation including palette overview, color roles, visual qualities, and usage recommendationsTypography Hierarchy System: Extracts and organizes typography into a structured system with Header and Paragraph classificationsComponent Documentation: Displays detailed specifications for buttons, icons and other elements including exact dimensions and padding valuesVisual Previews: Generates thumbnail previews for all design elementsForm Element Detection: Special handling for contact forms and other form elements with improved displayHow It WorksSelect your design elements in Figma (frames, components, or entire pages)Generate your brand guide with a single clickCustomize your guide: Rename colors, add color theory, or organize elementsExport to Figma: Choose your preferred layout style and generate a complete brand guide directly in your Figma fileElement CategorizationFor best results, use these naming patterns:Buttons: Include "btn" or "button" in the name (e.g., "btn-primary", "submit-button")Icons: Include "icn" or "icon" in the name (e.g., "icn-home", "arrow-icon")Other Elements: Include "element" or "other" in the name (e.g., "card-element", "other-banner")What's Included in Your Brand GuideColor Palette: Complete color documentation with visual swatches and color codesTypography System: Organized type hierarchy with font details and visual examplesButtons Collection: All button variants with exact dimensions and padding specificationsIcon Library: Organized icon set with dimensions and specificationsAdditional Elements: Cards, banners, forms and other UI components with detailed measurementsColor Theory: Optional section providing insights on palette psychology, symbolism and usageAI Brand Guide helps design teams maintain consistency while giving developers the exact specifications they need to implement designs accurately.