Naming Layers

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

Keywords	Semantic tag	Example layer names
`button`, `btn`, `cta`	`Button`	`submit-btn`, `cta-button`, `primary-cta`
`input`, `field`, `textfield`, `text-input`	`TextInput`	`email-input`, `search-field`, `name-textfield`
`link`	`Link`	`nav-link`, `footer-link`
`checkbox`, `check`	`Checkbox`	`agree-checkbox`, `terms-check`
`radio`	`Radio`	`plan-radio`, `option-radio`
`toggle`, `switch`	`Toggle`	`dark-mode-toggle`, `notifications-switch`
`dropdown`, `select`	`Select`	`country-dropdown`, `role-select`

Layout elements

Keywords	Semantic tag	Example layer names
`card`	`Card`	`product-card`, `testimonial-card`
`section`	`Section`	`hero-section`, `features-section`
`header`	`Header`	`page-header`, `card-header`
`footer`	`Footer`	`page-footer`, `card-footer`
`nav`, `navbar`, `navigation`	`Nav`	`main-nav`, `sidebar-nav`
`sidebar`	`Sidebar`	`left-sidebar`, `filter-sidebar`
`modal`, `dialog`	`Modal`	`confirm-modal`, `settings-dialog`
`hero`	`Hero`	`homepage-hero`, `hero-banner`
`banner`	`Banner`	`promo-banner`, `notification-banner`

Content elements

Keywords	Semantic tag	Example layer names
`avatar`	`Avatar`	`user-avatar`, `profile-avatar`
`badge`	`Badge`	`status-badge`, `notification-badge`
`tag`, `chip`	`Tag`	`category-tag`, `filter-chip`
`icon`	`Icon`	`search-icon`, `close-icon`
`logo`	`Image`	`company-logo`, `brand-logo`
`divider`, `separator`	`Divider`	`section-divider`, `menu-separator`
`list`	`List`	`feature-list`, `menu-list`
`table`	`Table`	`pricing-table`, `data-table`

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

On this page