社区
社区文章设计网址

Figma Token Engine入门教程（Figma token插件与react代码联动）

在2023 年 2月底，我终于公开了一个帮助我和我的团队开发和维护组件和设计系统的工具：Figma 代币引擎我编写此快速

在2023 年 2月底，我终于公开了一个帮助我和我的团队开发和维护组件和设计系统的工具：Figma 代币引擎

我编写此快速入门是为了展示如何安装、配置和使用 FTE。它将使您更轻松地将 FTE 包含在工作流程中，并帮助您提高生产力和与令牌的连接性。

我们将按照以下步骤操作：

  1. 创建一个 Figma 文件，其中包含我们将从中读取的令牌（作为 Figma Styles 和 Tokens Studio）。
  2. 创建一个将使用令牌的 React 应用程序。
  3. 安装和配置 FTE。
  4. 运行 FTE 以导入两种格式的令牌。

什么是 Figma 代币引擎 （FTE）（为什么？

FTE 是我们开发的一种工具，用于在设计决策（表示为设计令牌）和代码之间创建自动通信通道。该工具的主要目标是简化共享设计系统的所有数字产品中这些决策的标准化和更新。

在高层次上，FTE通过Figma API从Figma获取设计令牌（表示为Figma Styles或Jan Six的Tokens Studio插件上的令牌），并使用Amazon的StyleDictionary将它们转换为可用的代码（css，js，JSON等）。

Figma Token Engine入门教程（Figma token插件与react代码联动）

令牌和应用设置

图格玛文件（样式）

为了使事情变得更容易，让我们从一个模板开始，该模板已经包含我们将要使用的大量数据和结构。Figmagic 模板是一个很好的起点，这实际上是 FTE 开始阶段的一大灵感：

Figma Token Engine入门教程（Figma token插件与react代码联动）

Figma 社区上的 Figmagic 模板

这个文件已经定义了很多 Figma 样式，我们将作为我们的令牌读取。

Figma Token Engine入门教程（Figma token插件与react代码联动）

无花果模板上的 Figma 样式

为了使样式在 Figma API 上可用，我们需要将它们发布为库：

  1. 在左侧栏上，点击资产
  2. 单击“书籍”图标，只需在选项卡下方
  3. 在弹出的模式上，单击发布
Figma Token Engine入门教程（Figma token插件与react代码联动）

发布库的有序步骤

4.然后选择样式并单击“发布样式”

Figma Token Engine入门教程（Figma token插件与react代码联动）

令牌文件（令牌工作室）

我们还将在令牌工作室上使用相同的样式值配置令牌：

  1. 在 Figma 上安装插件并打开它。点击“新建空文件”。
  2. 在插件窗口的左侧，单击样式>导入样式
  3. 在弹出窗口中，确保选中所有复选框，然后单击“导入”
  4. 最后在下一个弹出窗口的“全部创建”

原文配了一个YouTube的视频，有梯子的朋友可以看看，地址如下: youtube视频地址

反应应用

接下来，我们将设置 FTE 的“客户端”，它将使用令牌。同样，为了保持此设置简单，我将使用一个新的创建-反应-应用程序作为 FTE 的“客户端”：

npx create-react-app fte-client
Figma Token Engine入门教程（Figma token插件与react代码联动）

反应演示页面

我们将使用 FTE 导入的令牌设置此页面的样式。

如何安装和配置

现在我们已经准备好了所有的先决条件，我们可以开始使用 Figma 代币引擎了。

FTE 作为 npm 脚本包发布，可以轻松地添加为任何 npm 项目的包开发依赖项。

npm install --save-dev figma-token-engine

FTE 提供了一个选项来创建所有必要配置文件的示例：

npx figma-token-engine --init

这将创建一个 .tokens.config.json 文件：

{
  \"tokenFormat\": \"TokensStudio\",
  \"figmaFileId\": \"\",
  \"inputFile\": \"./tokens.json\",
  \"outputDir\": \"./src/styles/tokens\",
  \"platforms\": [
    \"css\",
    \"cssAutocomplete\",
    \"scss\",
    \"scssMap\",
    \"less\",
    \"js\",
    \"ts\",
    \"json\"
  ]
}

还有一个 .env 文件：

# Added by Figma Token Engine
FIGMA_PERSONAL_ACCESS_TOKEN=\"\" # Your personal Figma Personal Access token https://www.figma.com/developers/api#access-tokens
FIGMA_FILE_URL=\"\" # URL of the Figma file with the tokens

在这个 .env 文件上，我们添加了我们的 Figma 访问令牌（在此处获取一个）和令牌文件的 URL（您可以从“共享”按钮获取它）。结果如下：

# Added by Figma Token Engine
FIGMA_PERSONAL_ACCESS_TOKEN=\"figd_BRlmjAxL_s33r3phpZdrdsFAKejXK42n34fyAjUA\" # Not my actual token ;) 
FIGMA_FILE_URL=\"https://www.figma.com/file/iyeLeVwSzMBna7ix21E7i7/Figmagic-%E2%80%94-FTE-guide?node-id=2605%3A12&t=4mFCtwnYBsHU2w2D-1\"

有了这个，我们就可以使用 FTE。

运行 FTE

图格玛样式

要将 FTE 设置为读取 Figma Styles，请将 .tokens.config.json 上的字段 tokenFormat 更新为 “FigmaStyles”：

{
  \"tokenFormat\": \"FigmaStyles\",
  \"figmaFileId\": \"\",
  \"inputFile\": \"./tokens.json\",
  \"outputDir\": \"./src/styles/tokens\",
  ....
}

我们只需通过调用以下命令来运行引擎：

npx figma-token-engine

这将从 Figma 文件中获取样式，将它们转换为指定的格式（配置文件上的平台）：

 /$$$$           /$                              
|__  $__/          | $                              
   | $     /$$$ | $   /$  /$$$  /$$$$     
   | $    /$__  $| $  /$/ /$__  $| $__  $    
   | $   | $  \\ $| $$$/ | $$$$| $  \\ $    
   | $   | $  | $| $_  $ | $_____/| $  | $    
   | $   |  $$$/| $ \\  $|  $$$$| $  | $    
   |__/    \\______/ |__/  \\__/ \\_______/|__/  |__/    
 /$$$$                     /$                    
| $_____/                    |__/                    
| $       /$$$$   /$$$  /$ /$$$$   /$$$ 
| $$$   | $__  $ /$__  $| $| $__  $ /$__  $
| $__/   | $  \\ $| $  \\ $| $| $  \\ $| $$$$
| $      | $  | $| $  | $| $| $  | $| $_____/
| $$$$| $  | $|  $$$$| $| $  | $|  $$$$
|________/|__/  |__/ \\____  $|__/|__/  |__/ \\_______/
                     /$  \\ $                        
                    |  $$$/                        
                     \\______/                         
                      ______  __   ______ 
                     / __   |/  | / __   |
 _   _ ____  ____   | | //| /_/ || | //| |
| | | / _  )/ ___)  | |// | | | || |// | |
 \\ V ( (/ /| |_     |  /__| | | ||  /__| |
  \\_/ \\____)_(_)     \\_____(_)|_(_)_____/ 
                                          
[13:27:48.485 - Event] Start Figma Token Engine
[13:27:48.485 - Event] Figma Styles
[13:27:48.486 - Event] Figma API - Get Figma API Credentials
✅ FIGMA_PERSONAL_ACCESS_TOKEN in .env
✅ FIGMA_FILE_URL in .env
[13:27:48.486 - Event] Figma API - Get Figma File Plugin Data
🌏  Fetch Figma API
[13:27:49.985 - Event] Figma API - Write Figma API Tokens Export
✅ Saved tokens at /Users/josedanielcasado/CompanyRestricted/dls-ops-offline/repos/fte-client/tokens-studio.json
[13:27:49.986 - Event] Style Dictionary

css
✔︎ ./src/styles/tokens/tokens.css

cssAutocomplete
✔︎ ./src/styles/tokens/tokens-autocomplete-config.json

scss
✔︎ ./src/styles/tokens/tokens.scss

scssMap
✔︎ ./src/styles/tokens/tokensMap.scss

less
✔︎ ./src/styles/tokens/tokens.less

js
✔︎ ./src/styles/tokens/tokens.js

ts
✔︎ ./src/styles/tokens/tokens.ts

json
✔︎ ./src/styles/tokens/tokens.json

这些文件中的每个文件都有 figma 文件中的样式作为不同语言和格式的标记。例如，scss 包含：


// File generated by the Figma Token Engine
// Do not edit directly

$shadow-soft: (0rem 0rem 0.3125rem 0rem #c4c4c4ff);
$shadow-deep: (0.1875rem 0.1875rem 0.1875rem 0rem #c4c4c4bf);
$white: #ffffffff;
$yellow: #f2c94cff;
$shadow-medium: (0rem 0rem 0.3125rem 0rem #00000080);
$gray-1: #4f4f4fff;
$black: #333333ff;
$orange: #f2994aff;
....

变量的名称是根据 Figma 中的样式名称创建的。

读取令牌

要读取此令牌，只需将 .tokens.config.json 上的字段 tokenFormat 更改为 “TokensStudio”：

{
  \"tokenFormat\": \"TokensStudio\",
  \"figmaFileId\": \"\",
  \"inputFile\": \"./tokens.json\",
  \"outputDir\": \"./src/styles/tokens\",
  ....
}

并再次运行引擎：

npx figma-token-engine

由于我们从样式导入了令牌，因此这些令牌将是相同的令牌，但现在从令牌工作室进行管理。您可以添加边框和尺寸标记以查看它们是如何导出的！

在应用程序中使用令牌

正如我们所看到的，令牌是在我们的 src/ 目录中生成的，并且可以在我们的 React 页面上使用。

我们可以转到 App.css 并导入生成的 css 文件，并在我们的页面上使用它的变量：

@import \"./styles/tokens/tokens.css\";

...

.App-header {
  background-color: var(--blue-1); /* token */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: var(--white); /* token */
  font-size: var(--heading-l-font-size); /* token */
  font-family: var(--heading-l-font-family); /* token */
}

.App-link {
  color: var(--yellow); /* token */
  font-size: var(--heading-s-font-size); /* token */
}

....

参考视频1：https://youtu.be/vvT8nxCJoLc

通过此设置，我们可以更新 Figma 上的颜色样式，重新发布它们，再次运行 FTE，我们的应用程序将自动更新：

参考视频2：https://youtu.be/UqegvJ4mqVc

如果我们从 Tokens Studio 读取代币，我们还可以实时更新代币，重新运行引擎，我们将看到这些更改传播到代码中。

下一个视频展示了一个更复杂的令牌化组件，该组件使用令牌工作室提供的更复杂的“示例”令牌：

参考视频3：https://youtu.be/jymxYpEdYMg

其他说明

由于 FTE 是一个 npm 脚本，因此您可以将它们添加到 package.json 上的命令中，并将它们添加到更多涉及的管道和其他内容中：

{
  \"name\": \"fte-client\",
  \"version\": \"1.0.0\",
  \"scripts\": {
    \"prestart\": \"figma-token-engine\",
    \"start\": \"react-scripts start\",
    \"build\": \"react-scripts build\",
    \"test\": \"react-scripts test\",
    \"eject\": \"react-scripts eject\"
  }
}
FigmaFigma Token设计系统
0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
猜你喜欢
❯
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
客服

  • 扫码打开当前页

  • QQ群

  • 小编微信

返回顶部
Figma Token Engine入门教程（Figma token插件与react代码联动）
×

微信扫一扫关注公众号，回复"验证码"获取验证码