Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 7 days 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 (23 days ago)
Default Branch: main
Last Pushed: 2025-01-29T09:49:06.000Z (8 days ago)
Last Synced: 2025-01-29T10:31:40.959Z (8 days ago)
Topics: figma, figma-api, figma-plugin, figma-variables
Language: JavaScript
Homepage: https://serendie.design/foundations/design-tokens/#section-6
Size: 382 KB
Stars: 0
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)を参照してください。