# For UI Designers

Design web templates in Figma and map them to Web Builder sections, layouts, and pages.


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

- [Introduction](https://erxes.io/docs/content-plug-template-designers-introduction): How designers create, customize, and hand off web templates from Figma to the Web Builder
- [Template Structure](https://erxes.io/docs/content-plug-template-designers-template-structure): How components, sections, and pages fit together in a Web Builder template
- [Template Layout](https://erxes.io/docs/content-plug-template-designers-template-layout): Layout, color, and font options a template exposes to the Web Builder
- [Template Sections](https://erxes.io/docs/content-plug-template-designers-template-sections): Section types available in the Web Builder and the fields each one exposes
- [Template Pages](https://erxes.io/docs/content-plug-template-designers-template-pages): Page types the Web Builder supports, grouped by how much editors can change