设计规范的迭代

伴随业务复杂度的几何级增长,早期的静态组件体系已无法承载多端并行的协同诉求。本项目全景复盘了团队设计资产的迭代脉络:从本地化规范的秩序建立,到面向多端的物理拆分,再到最终运用智能化属性(Properties&Variables)完成的极致瘦身与提效。

专业输出

全端组件库搭建

Figma 底层架构重构

项目成果

提高组件可用性

降低组件解绑率

滚 动 探 索

从静态规范到动态系统

搭建并持续维护设计规范,贯穿了我在团队的整个工作周期。 随着业务复杂度的提升与协作规模的扩大,团队的设计资产经历了几次必然的迭代。 面对多端业务的并行与协作工具的更迭,设计资产必须打破单一“视觉文档”的局限。

Sketch 时代的协同基建

针对早期 Sketch 协作脱节痛点,从零构建团队首套组件库并重塑标准化工作流。将碎片化的文件互传升级为系统化资产管理,实现了设计基建从零到一的体系化沉淀。

跨部门推动基建

主动对接运维团队,为设计部单独申请并部署了专属「群晖 NAS」服务器。

同步设计资产

将单机组件库转化为基于局域网的 Sketch Library 共享引用,确保全员调用同一套资产。同步盘存放设计资产并可通过Eagle调用公共素材。

沉淀标准化流程

编写《设计部 NAS 同步盘使用指南》,将技术门槛降至最低,实现团队顺畅接入。

部分组件

NAS使用指南

面向多端业务的规范拆分

随着协作平台全面迁移至 Figma,团队的业务线也开始向多端延伸。为了保证底层基因的一致性,同时兼顾不同端侧的交互差异,整个设计部将原本庞杂的设计资产进行了“四层拆解”。

全局样式

基础组件

业务组件

页面模板

倾听与度量

随着系统在团队中的高频落地,物理拆分与旧架构的隐性成本逐渐显现。为了打破效率天花板,我针对设计侧与研发侧分别发起了问卷调研,以真实数据反推组件库的优化方向。

问卷收集

基础提效达标,但场景覆盖断层

团队已建立主动调用规范的习惯,基础组件提效明显;但复杂业务组件与运营模板的复用率远未达预期。

解绑频发,规范失去约束力

旧版组件变体(Variants)结构过重,导致设计师在使用时常常需要解绑组件进行“破坏性修改”,引发新旧设计稿的维护冲突。

生命周期断裂,更新机制滞后

在组件库从初创走向稳定的过渡期,缺乏高效的动态更新机制,规范的迭代速度逐渐跟不上前端业务的敏捷诉求。

基于 Variables 的智能化重构

针对问卷暴露的“变体冗余”与“解绑频发”问题,我果断摒弃了传统的静态搭建思路。借助 Figma 最新的 Variables(变量)与组件属性(Properties)特性,对底层架构进行了一次“破坏性重建”,将规范从视觉字典升级为逻辑严密的智能引擎。

全局视觉参数管理

建立从原始层到语义层的映射体系,通过全局变量统一管控颜色、间距与圆角。在确保视觉一致性的同时,实现全站规范的一键同步与维护。

重构冗余变体

全面引入属性配置(布尔、文本、实例交换)重构组件库。在大幅缩减变体数量的同时,降低了调用门槛,显著提升设计资产的响应性能。

规范化调用逻辑

通过基础组件嵌套与属性暴露机制,实现在不解除组件关联的前提下,快速适配多样化的业务场景,确保了设计系统在复杂环境中的稳定性。