Naming Layers

Documentation Index

Fetch the complete documentation index at: https://docs.moda.app/llms.txt

Use this file to discover all available pages before exploring further.

The Moda MCP server’s transformer uses layer names to determine what each element represents. Well-named layers produce better semantic tags, which leads to better generated code.

​

How it works

When a layer has a descriptive name, the transformer matches it against a keyword list and assigns the appropriate semantic tag. Layer names take priority over visual heuristics. For example:

• A rectangle named cta-button becomes <Button> instead of <Box>
• A group named nav-bar becomes <Nav> instead of <Section>
• An image named user-avatar becomes <Avatar> instead of <Image>

​

Keyword reference

These keywords in layer names trigger specific semantic tags. Keywords are case-insensitive and can appear anywhere in the name (e.g., hero-section, main-hero, my_hero).

​

Interactive elements

​

Layout elements

​

Content elements

​

Naming conventions

Any naming convention works — the transformer matches keywords regardless of format:

• kebab-case: hero-section, cta-button
• camelCase: heroSection, ctaButton
• snake_case: hero_section, cta_button
• PascalCase: HeroSection, CtaButton
• Space-separated: Hero Section, CTA Button

​

What happens without names

When layers don’t have descriptive names (e.g., Rectangle 1, Group 3), the transformer falls back to visual heuristics:

• Text with large font size → Heading
• Rectangle with text and dark fill → Button
• Rectangle with thin border and no text → TextInput
• Small circular image → Avatar
• Group with background → Card

These heuristics work well for common patterns, but explicit layer names produce more accurate results, especially for non-obvious elements.

​

Tips

• Name layers that aren’t visually obvious — A subtle text link or a custom checkbox benefits most from naming
• Use semantic names, not visual descriptions — submit-button is better than blue-rectangle
• Name groups and sections — Group-level names like features-section improve the structure of the generated code
• Be consistent — Pick a naming convention and stick with it across your canvas