Follow these best practices to get the most out of Fusion's Design System Intelligence feature.
Normally, when AI helps you build features, it creates generic code from scratch. But most companies have their own custom components and design systems that should be used to maintain consistency.
Design system intelligence uses a process called component indexing that creates a catalog of your code's building blocks. The AI scans your codebase once, learns what components exist, how they work, and when to use them.
The Fusion Agent uses several signals to match Figma components to your design system:
- Component names
- Variant properties and values
- Component structure and hierarchy
The more alignment between your Figma naming and your code implementation, the more accurate your generated code will be.
Your Figma component names should match your code component names as closely as possible:
<!-- Good: -->
Figma: Button
Code: <Button>
<!-- Good: -->
Figma: Card/Header
Code: <Card.Header>
<!-- Problematic: -->
Figma: CTA Component
Code: <Button>Variant properties should reflect their semantic meaning:
<!-- Good: -->
variant: "primary" | "secondary" | "danger"
size: "small" | "medium" | "large"
<!-- Confusing -->
style: "style1" | "style2" | "style3"
type: "big" | "bigger" | "biggest"Avoid using generic component names that might confuse the AI about the actual component type:
<!-- Problematic: -->
"Text Component" (when it should render as actual text)
"Container" (too generic without context)
<!-- Better: -->
"Paragraph"
"Section"Using special characters or emojis can have unintended consequences, as the AI may not accurately interpret your meaning:
<!-- Problematic: -->
"💬" (too generic without context)
"❌ Text" (could read as 'not text')
<!-- Better: -->
"Comment"
"HiddenText"Map your Figma variables to your design system tokens with consistent naming:
<!-- Good examples: -->
Figma: colors/primary/500
Code: theme.colors.primary[500]
Figma: spacing/large
Code: theme.spacing.lgUse Figma's description field or annotations to provide additional context. This context can be interpreted by the AI and may be useful in code generation.
<!-- Example: -->
Product: This component represents a single product and includes and
image, price, description, and CTAs.Read more about Component Indexing, or how to Refine design system indexes.