Skip to content
Skip to main contentWhere does your team stand on AI adoption?
CONTACT SALESSTART BUILDING

Design System Intelligence best practices

Follow these best practices to get the most out of Builder's Design System Intelligence feature.

Match component and token names

The Builder 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.

Match component names directly

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>

Use semantic property names

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"

Be careful with generic terms

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"

Avoid special characters or emojis

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"

Design tokens and variables

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.lg

Annotate your components

Use 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.

What's next

Read more about Design system indexing, or how to Refine design system indexes.

Was this article helpful?