Figma 到 Odoo 设计工作流
设计工作流方法
1. ANALYZE DESIGN → Extract colors, fonts, layout, components
2. COMPARE TO ODOO TEMPLATES → Match header, footer, page layouts
3. CHOOSE CLOSEST TEMPLATE → Select best matching built-in template
4. CONFIGURE VIA VARIABLES → Set $o-website-values-palettes
5. ENHANCE WITH CUSTOM CSS → Only what templates can't provide
6. CREATE CUSTOM SNIPPETS → Components not available in Odoo
Figma 提取流程
使用 Figma MCP
1. Use Figma MCP with prompt:
"Convert this Figma design to HTML for Odoo <version> website theme.
Use Bootstrap v5.1.3 classes (not Tailwind).
Apply proper Odoo theme structure with sections and containers."
2. Extract Color Palette:
"Extract the color palette and map to o-color-1 through o-color-5."
3. Extract Typography:
"Convert text styling to Bootstrap typography classes."
使用 Chrome MCP（浏览器自动化）
- 导航至 Figma URL → 打开页面（而非组件！）
- 点击页面元素以提取：
- 页眉／导航栏 → 主色
- CTA 按钮 → 辅助色
- 区块背景 → o-color-3
- 正文文本 → 文本颜色、字体
- 标题（H1-H6）→ 标题字体、字号
需要检查的页面：主页、关于／服务、联系、页脚区域
颜色映射
| 设计元素 | 对应项 |
|---|
| 品牌主色（按钮、链接） | o-color-1 |
| 强调色／CTA 颜色 | o-color-2 |
| 浅色区块背景 | o-color-3 |
| 主内容背景 | o-color-4 |
| 深色文本／标题 | o-color-5 |
页眉模板（11 个主要模板 + 变体）
| XML ID | 名称 | 适用场景 |
|---|
website.template_header_default | 默认 | 大多数网站 |
website.template_header_hamburger | 汉堡菜单 | 极简设计 |
website.template_header_stretch | 延展 | 宽屏布局 |
website.template_header_vertical | 垂直 | 类应用网站 |
website.template_header_search | 搜索 | 电子商务、目录 |
website.template_header_sales_one | 销售 1 | 在线商店 |
website.template_header_sales_two | 销售 2 | 大型商品目录 |
website.template_header_sales_three | 销售 3 | 以产品为主 |
website.template_header_sales_four | 销售 4 | 时尚、零售 |
website.template_header_sidebar | 侧边栏 | 仪表板网站 |
website.template_header_boxed | 框式 | 现代品牌 |
页眉对齐变体
..._align_center / ..._align_right — 桌面端对齐方式..._mobile_align_center / ..._mobile_align_right — 移动端对齐方式
页眉可见性（互斥）
| XML ID | 效果 |
|---|
website.header_visibility_standard | 随页面滚动 |
website.header_visibility_fixed | 固定在顶部 |
website.header_visibility_disappears | 向下滚动时隐藏 |
website.header_visibility_fade_out | 淡出 |
页眉组件（可组合）
| XML ID | 组件 | 默认状态 |
|---|
website.option_header_brand_logo | Logo 图片 | 启用 |
website.option_header_brand_name | 文本名称 | 未启用 |
website.header_call_to_action | CTA 按钮 | 启用 |
website.header_search_box | 搜索栏 | 启用 |
website.header_social_links | 社交图标 | 未启用 |
页眉决策流程图
Is navigation hidden? → YES → template_header_hamburger
→ NO → Vertical sidebar? → YES → Full page? → sidebar / vertical
→ NO → E-commerce? → YES → Categories? → sales_two / sales_one
→ NO → Search prominent? → template_header_search
→ Boxed? → boxed / stretch / default
页脚模板（9 个选项）
| XML ID | 名称 | 适用场景 |
|---|
website.footer_custom | 默认 | 通用 |
website.template_footer_descriptive | 描述式 | 企业网站 |
website.template_footer_centered | 居中 | 落地页 |
website.template_footer_links | 链接 | 大型网站 |
website.template_footer_minimalist | 极简 | 简洁设计 |
website.template_footer_contact | 联系方式 | 服务型企业 |
website.template_footer_call_to_action | CTA | 营销网站 |
website.template_footer_headline | 主标题 | 品牌宣言 |
website.template_footer_slideout | 滑出式 | 现代／潮流风格 |
页脚决策流程图
Minimal (just copyright)? → YES → template_footer_minimalist
→ NO → Center-aligned? → template_footer_centered
Newsletter/CTA? → template_footer_call_to_action
Contact info? → template_footer_contact
Primarily links? → template_footer_links
Detailed description? → template_footer_descriptive
Default → footer_custom
商店页面模板（website_sale）
布局选项
| XML ID | 功能 |
|---|
website_sale.products_design_card | 卡片布局 |
website_sale.products_design_grid | 网格布局 |
website_sale.products_thumb_4_3 | 4:3 图片比例 |
website_sale.products_thumb_cover | 图片填充容器（默认） |
分类和筛选器
| XML ID | 功能 | 默认状态 |
|---|
website_sale.products_categories | 左侧边栏 | 未激活 |
website_sale.products_categories_top | 顶部导航 | 已激活 |
website_sale.products_attributes | 属性筛选器 | 已激活 |
website_sale.filter_products_price | 价格筛选器 | 未激活 |
website_sale.search | 搜索框 | 已激活 |
website_sale.sort | 排序下拉菜单 | 已激活 |
产品详情选项
| XML ID | 功能 | 默认状态 |
|---|
website_sale.product_comment | 评论 | 未激活 |
website_sale.product_buy_now | 立即购买按钮 | 未激活 |
website_sale.alternative_products | 替代产品 | 已激活 |
博客模板（website_blog）
博客列表
| XML ID | 功能 | 默认状态 |
|---|
website_blog.opt_blog_cover_post | 特色横幅 | 已激活 |
website_blog.opt_blog_list_view | 列表视图 | 未激活 |
website_blog.opt_blog_cards_design | 卡片组件 | 未激活 |
website_blog.opt_blog_sidebar_show | 侧边栏 | 未激活 |
博客文章详情
| XML ID | 功能 | 默认状态 |
|---|
website_blog.opt_blog_post_breadcrumb | 面包屑导航 | 已激活 |
website_blog.opt_blog_post_read_next | 接着阅读 | 已激活 |
website_blog.opt_blog_post_comment | 评论 | 未激活 |
购物车和结账
| XML ID | 功能 | 默认状态 |
|---|
website_sale.suggested_products_list | 推荐产品 | 已激活 |
website_sale.reduction_code | 优惠码 | 已激活 |
website_sale.accept_terms_and_conditions | 条款与条件复选框 | 未激活 |
根据设计生成主题配置
分析设计并匹配模板后：
// primary_variables.scss — Generated from Design Analysis
$o-theme-font-configs: (
'Poppins': (
'family': ('Poppins', sans-serif),
'url': 'Poppins:300,400,500,600,700',
),
);
$o-website-values-palettes: (
(
'color-palettes-name': 'default-1',
'font': 'Poppins',
'headings-font': 'Poppins',
'header-template': 'hamburger',
'header-links-style': 'pills',
'logo-height': 48px,
'footer-template': 'contact',
'footer-scrolltop': true,
'btn-padding-y': 0.75rem,
'btn-border-radius': 8px,
'link-underline': 'never',
)
);
然后创建 theme.utils，以编程方式激活匹配的模板：
def _theme_yourtheme_post_copy(self, mod):
self.enable_view('website.template_header_hamburger')
self.enable_view('website.template_footer_contact')
self.enable_view('website.option_header_brand_logo')
self.disable_view('website.header_visibility_standard')
self.enable_view('website.header_visibility_fixed')
