#token-parser #figma #css #json #outputs #directory #file

应用 figma-token-parser

接收 Figma Tokens JSON 并输出 CSS

1 个不稳定版本

0.2.4 2022 年 11 月 5 日

8#token-parser

MIT 许可证

16KB
302

令牌解析器

消费 Figma Tokens JSON 文件,并输出 CSS。

例如,您可以将 Figma Tokens 同步功能与 GitHub 仓库挂钩,然后让 figma-token-parser 在 GH 动作中运行。然后在每次更新时,将更新的 CSS 文件输出到特定位置。这将使您能够在 Figma 中更新样式,从 UI 推送更改,并将更新自动传播到您的实时网站/应用程序/等等。

此项目目前处于超级开发状态,可能不会为您工作。它仅确保与 Figma Tokens Pro 一起工作,并且如果您使用“多个文件”选项,则将令牌分割成单独的 json 文件存储在目录中而不是一个巨大的 json 文件。(见下方的 TODO。)

安装

yarn add -D figma-token-parser
## or
yarn global add figma-token-parser

您还可以通过 Cargo 安装此软件包

cargo install figma-token-parser

用法

# Below are the default values for the args, 
# you can pass no args or use the dir and out args to suit your environment
figma-token-parser --dir ./tokens --out ./build

待办事项

  • 支持 Figma Tokens 设置为导出单个大文件而不是分割成文件和目录的情况。
  • 支持没有主题,只有令牌集的用户。(以下内容将有助于此,如果我们可以分别输出集,则可以更改主题输出,使默认情况下,所有集都获得自己的 CSS 文件,而主题输出仅使用 @import 来包含一个文件中的相关集。)
  • 设计一种方法来分别输出源集和启用集。我们还需要跟踪我们已处理的源集,以确保我们只处理一次(多个主题可能使用相同的源集)。还可以考虑某种类型的索引文件,该文件使用 @import 将每个主题的每个单个集包含在一起,具有包含所有集的选项,并按类名命名空间 :root
  • 支持 JSON 导出。

如何部署

rust-to-npm build
rust-to-npm deploy

依赖关系

~4–6MB
~106K SLoC