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 BuilderTemplate StructureHow components, sections, and pages fit together in a Web Builder templateTemplate LayoutLayout, color, and font options a template exposes to the Web BuilderTemplate SectionsSection types available in the Web Builder and the fields each one exposesTemplate PagesPage types the Web Builder supports, grouped by how much editors can change
Was this helpful?
