当前位置：首页 > news >正文

Theo入门教程：从零开始创建你的第一个设计令牌文件

news 2026/5/5 4:09:05

Theo入门教程：从零开始创建你的第一个设计令牌文件

【免费下载链接】theoTheo is a an abstraction for transforming and formatting Design Tokens项目地址: https://gitcode.com/gh_mirrors/th/theo

Theo是一款强大的设计令牌（Design Tokens）转换和格式化工具，能够帮助开发者和设计师将设计系统中的颜色、字体、间距等设计属性转化为各种开发所需的格式。本教程将带你快速掌握Theo的核心功能，从安装到创建第一个设计令牌文件，轻松实现设计与开发的无缝衔接。

什么是设计令牌？

设计令牌是设计系统的核心元素，它们以结构化的方式存储设计决策，如颜色、字体大小、间距、边框样式等。通过设计令牌，团队可以确保设计在不同平台和设备上的一致性，同时简化设计变更的流程。

上图展示了一个典型的设计令牌应用效果，包含文本颜色、背景色、渐变、边框样式等多种设计属性的定义与预览。

快速安装Theo

要开始使用Theo，首先需要在你的项目中安装它。Theo是一个基于Node.js的工具，可以通过npm轻松安装：

npm install theo --save-dev

如果你希望在全局范围内使用Theo CLI，可以使用以下命令：

npm install -g theo

安装完成后，你可以通过运行theo --version来验证安装是否成功。

创建你的第一个设计令牌文件

1. 设计令牌文件结构

Theo支持多种输入格式，包括YAML、JSON等。我们以YAML格式为例，创建一个简单的设计令牌文件tokens.yml：

# tokens.yml props: # 颜色定义 colorPrimary: value: "#2a94d6" type: color category: textColors colorBackground: value: "#ffffff" type: color category: backgroundColor # 字体定义 fontSizeSmall: value: 14 type: size category: fontSize unit: px fontSizeLarge: value: 20 type: size category: fontSize unit: px # 间距定义 spacingSmall: value: 8 type: size category: spacing unit: px spacingLarge: value: 24 type: size category: spacing unit: px

2. 使用Theo转换设计令牌

创建好设计令牌文件后，我们可以使用Theo将其转换为各种开发所需的格式。例如，要将令牌转换为SCSS变量，可以运行以下命令：

theo tokens.yml --transform web --format scss --dest dist

这个命令会：

读取tokens.yml文件
使用web转换规则（适用于Web平台）
输出为scss格式
将结果保存到dist目录

Theo支持多种输出格式，包括CSS、Sass、Less、JSON、Android XML、iOS JSON等。你可以通过--format参数指定多种格式，用逗号分隔：

theo tokens.yml --transform web --format scss,css,json --dest dist

Theo的核心功能：转换与格式化

Theo的核心功能分为两部分：转换（Transforms）和格式化（Formats）。

转换（Transforms）

转换是对设计令牌值进行处理的过程。Theo提供了多种预设转换，如：

raw：不进行任何转换
web：适用于Web平台的转换，包括单位转换、颜色格式转换等
ios：适用于iOS平台的转换
android：适用于Android平台的转换

你可以通过--transform参数指定要使用的转换规则。

格式化（Formats）

格式化决定了输出文件的结构和语法。Theo支持多种流行的格式，如：

scss：SCSS变量格式
cssmodules.css：CSS Modules格式
json：JSON格式
android.xml：Android XML格式
ios.json：iOS JSON格式

完整的格式列表可以在项目文档中找到。你可以通过--format参数指定一种或多种输出格式。

在项目中集成Theo

为了简化使用流程，你可以将Theo命令添加到项目的package.json中：

{ "scripts": { "build:tokens": "theo src/tokens/tokens.yml --transform web --format scss,cssmodules.css --dest src/styles/tokens" } }

然后，你可以通过运行npm run build:tokens来生成设计令牌文件。

高级用法：自定义转换和格式化

Theo允许你创建自定义转换和格式化规则，以满足特定项目需求。你可以通过--setup参数指定一个设置文件，在其中定义自定义转换和格式：

theo tokens.yml --setup setup.js --transform custom --format my-format

在setup.js文件中，你可以注册自定义转换和格式：

// setup.js const theo = require('theo'); // 注册自定义转换 theo.registerTransform('custom', [ // 自定义转换规则 ]); // 注册自定义格式 theo.registerFormat('my-format', { // 自定义格式规则 });