https://github.com/serendie/figma-utils

Import/Export Figma Variables to JSON (W3C Design Tokens spec) with Figma REST API
https://github.com/serendie/figma-utils

figma figma-api figma-plugin figma-variables

Last synced: 5 months ago
JSON representation

Import/Export Figma Variables to JSON (W3C Design Tokens spec) with Figma REST API

• Host: GitHub
• URL: https://github.com/serendie/figma-utils
• Owner: serendie
• License: mit
• Created: 2025-01-14T09:07:40.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-29T09:49:06.000Z (over 1 year ago)
• Last Synced: 2025-03-25T06:45:19.340Z (over 1 year ago)
• Topics: figma, figma-api, figma-plugin, figma-variables
• Language: JavaScript
• Homepage: https://serendie.design/foundations/design-tokens/#section-6
• Size: 383 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# SDS Figma Utilities

[![GitHub](https://img.shields.io/github/license/serendie/figma-utils?style=flat)](https://github.com/serendie/figma-utils/blob/main/LICENSE)

[![NPM Version](https://img.shields.io/npm/v/%40serendie%2Ffigma-utils)](https://www.npmjs.com/package/@serendie/figma-utils)

[![X](https://img.shields.io/twitter/follow/SerendieDesign)](https://x.com/SerendieDesign/)

[Serendie Design System](https://serendie.design/)で使われるFigma用ユーティリティーです。

[`@serendie/design-token`](https://github.com/serendie/design-tokens)の中で定義される[W3C Design Tokens Spec](https://tr.designtokens.org/format/)準拠のJSONを、Figma VariablesにImport/Exportするスクリプトが含まれています。

なお、Figma REST APIを前提としており、利用にはFigmaエンタープライズプランが必要です。

## Usage

### Prepare

`.env`に下記を設定してください。

- `PERSONAL_ACCESS_TOKEN`

  - Variablesの[Read/Write Scope](https://www.figma.com/developers/api#authentication-scopes)を有するFigmaのpersonal access token

- `FILE_KEY`

  - Import/Export先のVariablesを有するFigmaファイルのKey

  - FigmaファイルのURLに含まれます (`https://www.figma.com/file/{FILE_KEY}/...`)

### Commands

**JSON to Figma Variables (Import)**

```

npm run sync-json-to-figma

```

**Figma Variables to JSON (Export)**

```

npm run sync-figma-to-json

```

## Spec

W3C Design Tokens Specではテーマ (Variablesモード) の扱いが定まっていないため、独自の命名規則を採用しています。詳しくは[こちら](https://github.com/serendie/serendie/tree/main/design-tokens#%E4%BB%95%E6%A7%98)を参照してください。