← 返回首页作品

OOP Design System

把 OPPO / OnePlus 多业务重复组件库收成「语义级 Design Token + Theme/Layout 双空间」，让明暗、品牌、端切换成为变量切换，而不是再画一套稿。

项目
OOP Design System（OPPO × OnePlus）
角色
交互 / UX · 前期基建与规范 · 组件示意 / Variables 演示（组件样式细节主责 UI）
范围
Token 调研与层级取舍、Figma Variables 框架（Theme/Layout）、与开发对接可行性、组件清单与使用说明 / SOP / iconfont
方法
主流 DS 对照 → 语义级而非组件级 → Variables 双空间 → 组件重定义与文档交付 → 生产复用
同一 Button 组件在 OnePlus_light（#F50514）与 OPPO_Dark（#2CFF73）下通过 color_brand_default 变量切换对比 同一 Text-field 组件在 Light（#000000 30%）与 Dark（#FFFFFF 30%）下通过 color_text_default_enabled 变量切换对比
图 1（主视觉） · 同一组件改 Theme 变量（上：Button 绑定 color_brand_default 在 OnePlus Light 与 OPPO Dark 间切换；下：Text-field 绑定 color_text_default_enabled 在 Light 与 Dark 间切换），布局骨架不变、不重画
Figma Appearance 面板展开 OOP_Theme 变量模式（OnePlus Light/Dark Mode 与 OPPO Light/Dark Mode）
图 1a · Figma OOP_Theme 面板：明暗 × 品牌四模式一键切换
Figma Appearance 面板展开 OOP_Layout 变量模式（OnePlus Desktop/Mobile 与 OPPO Desktop/Mobile）
图 1b · Figma OOP_Layout 面板：桌面/移动 × 品牌双端变量切换

问题

多业务重复养库：部门业务从官网/商城扩到会员、SaaS 商城等后，各线仍各自维护组件库，但方案与策略高度一致——设计和前端在近乎重复的活上烧人（页文）。

品牌要同一系统不同皮：品牌差异要求同一套系统能出不同皮肤，不能简单「强制一套视觉」。

需要跨业务共享又能按品牌/主题/端换值的 Token 底座：需要一把能跨业务共享、又能按品牌/主题/端换值的设计语言底座——以 Design Token 为基础的 OOP（OPPO & OnePlus）Design System（图 2）。

图 2：Design token 结构（Value 到 Global、Semantic、Component-specific 四层）与 Design token 对象（Button 组件语义键拆解）
图 2 · Token 层级概念锚点（左：Value → Global Tokens → Semantic tokens → Component-specific Tokens 结构；右：Button 组件的间距、字号、圆角、色彩作用对象）

约束

  • Token 管理成本可控（非企业级穷举）：团队与业务非企业级 DS 规模，细到组件级会拖垮日常维护（图 6a/6b 对照后的取舍）。
  • 颜色 ≠ 尺寸 → Theme 与 Layout 分空间：颜色与尺寸本质不同，不能塞进同一个变量空间——拆 Theme 与 Layout（页文 + 图 4·8）。
  • 对接 Figma Variables + 改造/开发对接：必须能对接现有工具链，优先 Figma Variables，并谈清改造成本与开发对接方式（页文个人贡献）。
  • 交互主责框架/清单/SOP/审查；色板字阶组件样式主责 UI：个人边界清晰——交互主责前期框架、清单、SOP 与审查；色板/字阶/赋值/组件样式细节由 UI 同事完成（页文说明）。

过程

1. 弄清 Token 是什么

厘清全局 / 语义 / 组件特定三层结构，以及 Token 与主题映射的关系（图 2；页文第一节）。

2. 看别人怎么切层级

横向拆解主流 DS 组织方式；重点对照 Material 3（组件级更细、影响面小但管理量大）与 Atlassian（偏语义）（下表与图 6a/6b）。

3. 定 OOP 边界

只定义到语义级，按对象细分——灵活够用、管理量可承受（页文）。

4. 在 Figma 落地

Variables 建库；Theme / Layout 分空间；输出创建与应用步骤 / SOP（图 7、图 9 关键步骤已抬升至决策区）。

Material 3（组件级 Token）

颗粒度细 · 维护量大
  • 命名下沉到组件：细化至具体组件与部位（如 md.comp.fab.primary.container.color）。
  • 优势与代价：单点修改影响面小，但 Token 总量随组件数成倍膨胀，日常维护与对齐成本高（见图 6a）。

Atlassian Design System（偏语义级 Token）

语义级 · OOP 取舍参照
  • 停在语义与作用对象层：如边框直接停在 color.border、color.border.accent.lime、color.border.accent.red。
  • 优势与代价：直接映射 Light / Dark 值（如 Neutral300A ↔ DarkNeutral300A），兼顾跨主题灵活度与团队可控的维护量（见图 6b）。
调研取舍结论：M3 组件级 vs Atlassian 语义级 → OOP 收敛在语义级（Semantic Tokens）并按对象细分，不做组件级穷举。
横向拆解 6 套主流 DS 样本： Arco Design Lightning Design System SAP Fiori 3 Material 3 Atlassian Design System Ant Design
图 6a：Material 3 组件级 Token 命名示例（md.comp.fab.primary.container.color）
图 6a · Material 3：Token 沉到组件级（md.comp.fab.primary.container.color，管理颗粒细）
图 6b：Atlassian 语义级 Border Token 文档表（color.border 等映射 Light/Dark 色值）
图 6b · Atlassian：语义级 Border Token（color.border / color.border.accent.lime / color.border.accent.red × Light/Dark 对照表）

决策

1. 语义级 Token，不做组件级穷举

企业级可细到 md.comp.fab…；OOP 停在语义层（如 color_brand_default、spacing_comp_lg），用对象细分降低迭代时的全局爆炸与日常维护（对照过程区图 6a、图 6b，并概念回扣图 2 的四层结构与 Button 对象拆解）。

LEVEL 01 · 原始值

Value

#000000 95% 等底层色值与像素数值

LEVEL 02 · 全局层

Global Tokens

neutral-900 等与语义无关的基础色阶

LEVEL 03 · OOP 收敛边界

Semantic Tokens

color_text_primary、color_brand_default、spacing_comp_lg

LEVEL 04 · 不做组件级穷举

Component-specific

避免 md.comp.fab… 级膨胀拖垮团队日常维护

2. 同一语义键，三向换值：主题 × 品牌 × 端

例：color_text_default_enabled 随 Light/Dark 换透明度黑白（#000000 30% ↔ #FFFFFF 30%）；color_brand_default 在 OnePlus 红（#F50514）与 OPPO 绿（#2CFF73）间切换；spacing_comp_lg 在 Mobile/Desktop 给不同 padding（24px ↔ 20px）（图 3）。这是「一套系统、多皮」的硬证据。

图 3：同一语义键在 Light/Dark 主题、OnePlus/OPPO 品牌与 Mobile/Desktop 双端的三向换值映射
图 3 · 主题 / 品牌 / 端三向映射：同一语义键在 Light×Dark、OnePlus×OPPO、Mobile×Desktop 下各自指向对应原始值

3. Theme + Layout 双空间，变量建库与组件绑定出稿

Figma 里 OOP_Theme（明暗 × 品牌）与 OOP_Layout（桌面/移动 × 品牌）分开维护（图 4、图 7、图 8）；组件填充色与 Auto Layout 间距直接绑定语义变量（图 9），跨端/跨品牌只需切换模式而非重画。

图 4：在 Figma Appearance 面板中一键切换 OOP_Layout 与 OOP_Theme 变量模式
图 4 · Figma 一键切 Layout / Theme：左切 OOP_Layout（OnePlus / OPPO × Desktop / Mobile），右切 OOP_Theme（OnePlus / OPPO × Light / Dark）
图 7：Figma Variables 新建颜色变量与配置 Color scoping（Fill: Frame/Shape/Text、Stroke）及 Code syntax 步骤
图 7 · 建库步骤：在 Figma 变量集合中创建 Color / Number 等变量，并配置作用域（Color scoping：Fill → Frame / Shape / Text、Stroke）与代码语法（Code syntax）
图 8a：Figma Variables 中 OOP_Theme 四列（OnePlus Light/Dark Mode、OPPO Light/Dark Mode）语义色变量表 图 8b：Figma Variables 中 OOP_Layout 四列（OnePlus Desktop/Mobile、OPPO Desktop/Mobile）字阶与间距变量表
图 8 · Variables 表落地形态：上为 OOP_Theme（color/text 等语义色跨明暗 × 品牌四列），下为 OOP_Layout（font/family、font/size、spacing、radius 跨端 × 品牌四列）
图 9a：Figma 组件在 Fill 面板选择 color_button_background 绑定 Theme 填充色变量 图 9b：Figma 组件在 Auto layout 面板选择 radius_sm、horizontal padding_sm 绑定 Layout 尺寸变量
图 9 · 填充与间距绑定到 Token（上：Theme 空间在 Fill 面板绑定 color_button_background；下：Layout 空间在 Auto layout 面板绑定 radius_sm、horizontal padding_sm）
组件绑定 color_brand_default 后，切换 OOP_Theme 在 OnePlus_light（#F50514）与 OPPO_Dark（#2CFF73）间自动变色
绑定后切换效果 · 只切 OOP_Theme 变量，同一 Button 组件随品牌与明暗模式自动更新填充色（#F50514 ↔ #2CFF73）

结果

双端与双品牌切稿转化为变量切换与组件复用，显著减少跨端重复出稿与前端重开发成本。

核心设计收获：用「语义 Token + Theme/Layout」把多业务重复库收成可切换的一套语言；把「品牌个性化」做成变量映射，而不是分叉仓库；交互侧把价值放在层级取舍、对接可行性与规范落地，而不是替 UI 画完每一个色值。

  • 双端/双品牌切换与跨业务复用：原先移动/Web 分别出稿，现调主题与画布尺寸即可跨端；OnePlus→OPPO 类迁移可调主题变量；前端经 Dev Mode 读 Token，业务组件复用上升；页文举例近期 OPPO 商详可 Copy 部分 OnePlus 商详代码、缩短周期。
  • 同一组件变量切换与双空间面板（图 1）：已于页首 Hero 主视觉呈现（同一 Button / Text-field 组件在 OnePlus Light 与 OPPO Dark 下通过语义变量直接换值，并配套 Figma OOP_Theme / OOP_Layout 面板）。
  • 组件交付深度例（图 10）：Text-field 含交互规则、多场景变体（银行卡/电话号码/倒计时）、组件 Token 映射、0ms–1200ms 动效参数、状态矩阵与组件构成说明（不只是色板）。
图 10：Text-field 组件交付深度规范（何时使用、13 条交互规则、场景变体、Token 映射、动效参数与组件构成说明）
图 10 · 组件交付深度例（Text-field 完整规范：交互规则、组合变体、Desktop/Mobile/Darkmode Token 映射、动效参数与构成拆解）
附录 · 查看完整 Figma Variables 建库与组件绑定全图归档及延伸方法文档 点击展开 / 收起

Figma Variables 建库、变量表全景与组件绑定完整归档（图 7–9 原图）

图 7 完整归档：Figma Variables 创建颜色变量与作用域设置三步 SOP
图 7（完整三步归档） · 新建 Collection、选择变量类型、配置 Color scoping 与 Code syntax
图 8 完整归档：Figma Variables 中 OOP_Layout 与 OOP_Theme 双空间变量表全景
图 8（双表全景归档） · 左为 OOP_Layout（59 项变量），右为 OOP_Theme（139 项变量）
图 9 完整归档：Figma 组件绑定 Theme 填充色 Token 与 Layout 自动布局间距 Token 的完整步骤
图 9（完整步骤归档） · 上为 Theme 空间绑定 color_button_background；下为 Layout 空间在 Auto layout 绑定圆角与内边距变量

延伸方法论阅读

延伸阅读（Writing）：Icon & Iconfont设计指南 · 设计量化探索 · 写给设计师看的GA4快速入门指南