Follow these best practices to get the most out of Builder's Design System Intelligence feature.
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.
Your Figma component names should match your code component names as closely as possible:
Variant properties should reflect their semantic meaning:
Avoid using generic component names that might confuse the AI about the actual component type:
Using special characters or emojis can have unintended consequences, as the AI may not accurately interpret your meaning:
Map your Figma variables to your design system tokens with consistent naming:
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.
Read more about Design system indexing, or how to Refine design system indexes.