SpareBank1设计系统：Figma中的语义化令牌与架构指南

SpareBank1设计系统：Figma中的语义化令牌与架构指南

designsystem SpareBank 1's design system and component library. 项目地址: https://gitcode.com/gh_mirrors/desi/designsystem

设计系统架构概述

SpareBank1设计系统采用分层架构模式，将设计元素划分为核心层和应用层。核心层包含基础设计令牌（Design Tokens）和原子组件，而应用层则允许各业务线基于核心层扩展自己的专属组件。这种架构既保证了设计一致性，又为特定业务场景提供了灵活性。

语义化颜色体系详解

设计系统的颜色系统采用语义化命名方式，而非传统的色值命名。这种命名方式使颜色用途一目了然，例如：

• text-primary 用于主要文本内容
• background-surface 用于表面背景
• interaction-primary-active 用于主要交互元素的激活状态

语义化颜色分为三个层级：

1. 基础色值：定义原始颜色
2. 语义化应用：将颜色映射到具体用途
3. 主题变量：支持不同主题配置

Figma文件结构规范

设计系统在Figma中采用模块化文件结构：

1. Core文件：包含所有基础令牌和原子组件

   • 颜色、间距、圆角等设计令牌
   • 按钮、输入框等基础组件

2. Domain文件：各业务领域专用组件

   • 例如"日常经济"领域的特有组件
   • 继承并扩展核心组件

3. 文档文件：系统使用指南和示例

令牌系统实现指南

1. 设计令牌分类

• 颜色令牌：采用语义化命名层级
• 间距令牌：基于4px基准的增量系统
• 圆角令牌：定义不同级别的圆角值
• 阴影令牌：标准化的阴影效果

2. 令牌命名规范

采用类别-用途-状态-变体的命名结构，例如： color-text-primary-disabled

本地组件开发实践

业务团队在开发本地组件时应遵循以下原则：

1. 继承优先：尽可能使用核心组件作为基础
2. 扩展而非修改：通过变体方式扩展功能
3. 令牌引用：所有样式属性必须引用设计令牌
4. 文档说明：为自定义组件添加使用说明

版本管理与协作流程

设计系统采用中央管理+分布式使用的模式：

1. 核心团队维护Core文件的更新
2. 业务团队通过Figma Library引用核心资源
3. 变更通过版本控制管理
4. 重大更新需进行影响评估

最佳实践建议

1. 样式覆盖：使用Figma的样式覆盖功能而非直接修改
2. 组件组合：通过嵌套组件构建复杂界面
3. 变体管理：合理使用组件变体减少重复
4. 自动布局：充分利用Figma的自动布局功能

通过这套结构化方法，SpareBank1设计系统既保持了整体一致性，又为各业务团队提供了足够的灵活性，确保设计效率和质量的双重提升。

designsystem SpareBank 1's design system and component library. 项目地址: https://gitcode.com/gh_mirrors/desi/designsystem