For UI Designers
Design web templates in Figma and hand them off so a developer can map them to the erxes CMS and Web Builder: site-wide branding, navigation menus, pages, and the ordered sections inside each page. This track is for designers: you do not need to write code, but you need to know what the CMS stores so your design names editable fields instead of imaginary ones.
What you deliver
- Desktop and mobile layouts for each page type.
- Shared tokens: colors, fonts, spacing, and image treatments.
- A page-by-page inventory of sections, in order, with editable fields marked.
- States for dynamic content: loading, empty, error, long text, and missing images.
How your work maps to the product
| Your design element | Where it lives in erxes |
|---|---|
| Site name, logo, favicon, domain, copyright | Web fields (name, logo, favicon, domain, copyright) |
| Brand colors and fonts | Web.appearances (primaryColor, secondaryColor, accentColor, backgroundColor, fontSans, fontHeading, fontMono) |
| Header and footer navigation | MenuItem records with kind main and footer |
| Each page and its route | Page records (name, slug, description, coverImage, status) |
| Sections inside a page | Page.pageItems; each with type, order, content, and a config object |
| Blog and listing cards | Post fields (title, excerpt, thumbnail, categories, tags, publishedDate) |
Section type values and the keys inside config are defined by the selected template repository, not by the CMS schema. The Web Builder deploys a site by writing your page sections into per-page JSON files that the template renders. Confirm the available section types with the template developer before designing around them.
Guides
- IntroductionHow designers create, customize, and hand off web templates from Figma to the Web Builder
- Template StructureHow components, sections, and pages fit together in a Web Builder template
- Template LayoutLayout, color, and font options a template exposes to the Web Builder
- Template SectionsSection types available in the Web Builder and the fields each one exposes
- Template PagesPage types the Web Builder supports, grouped by how much editors can change