【Figma Plugin】Figma PluginのVariableを操作する

## はじめに
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/5e7344fd-12d1-378c-4e98-90608c54ef96.png)

FigmaのPluginを開発する際、Figma PluginのVariablesを操作したいと思ったことはありますか？
この記事では、Figma PluginのVariablesを操作する方法を解説します。

## Variablesを取得する
今回取得するVariablesは以下の画像のように定義されている `Color` を取得します。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e9f08932-bdc6-8b3f-874b-4cc8d0717494.png)

### ⚪︎ ローカルのVariableを取得する

```ts
const variables = await figma.variables.getLocalVariablesAsync();
const color = variables.find(variable => variable.name === "Color");
```

1. `figma.variables.getLocalVariablesAsync()` でvariablesの配列を取得します
2. `variables.find(variable => variable.name === "Color")` で `Color` という名前のVariableを取得します

### ⚪︎ チームライブラリのVariableを取得する

```ts
const variablesCollections = await figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync();
const variablesCollectionKey = variablesCollections.find(collection => collection.name === "Collection 1")?.key
const variables = await figma.teamLibrary.getVariablesInLibraryCollectionAsync(variablesCollectionKey!)
const color = variables.find(variable => variable.name === "Color")
```

1. `figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync();` で　チームライブラリのコレクションの配列を取得する
2. `variablesCollections.find(collection => collection.name === "Collection 1")?.key` で `Collection 1` のkeyを取得する
3. `figma.teamLibrary.getVariablesInLibraryCollectionAsync(variablesCollectionKey!)` で `Collection 1` の variable の配列を取得する
4. `variables.find(variable => variable.name === "Color")` で Color という名前のVariableを取得します

## Variable を作成する

```ts
const newVariable = figma.variables.createVariable("newColor", collection, "COLOR")
```

+ `figma.variables.createVariable()` を使うことで、Variable を作成することができます
    + `"newColor"` のところは、Variableの名前
    + `collection` のところは、Variableを追加したいcollection
    + `"COLOR"`　のところは、Variableの型

## Variable の値を変更する

```ts
// collectionを取得する
const collections = await figma.variables.getLocalVariableCollectionsAsync();
const collection = collections.find(collection => collection.name === "Collection 1")

// variableを取得する
const variables = await figma.variables.getLocalVariablesAsync();
const color = variables.find(variable => variable.name === "Color");

// variableの値を変更する
color?.setValueForMode(
  collection?.modes[0].modeId!,
  {r: 1, g: 1, b: 1}
)
```

+ variableの値を変更するには、`setValueForMode` を使うことで、変更することができます
    + 引数には、collection の modeId と 変更したい値を指定します

## Variableを反映する
### ⚪︎ `setBoundVariable` を使う
Variableを要素に反映させるには、`setBoundVariable` を使います。
`setBoundVariable`の引数には、Variableを反映させたい要素とVariableを渡すことで、Variableを反映させることができます。

`setBoundVariable` で反映できる要素には、以下のとおりです。

- **VariableBindableNodeField**
  - `height`・`width`
  - `characters`
  - `itemSpacing`
  - `paddingLeft`・`paddingRight`・`paddingTop`・`paddingBottom`
  - `visible`
  - `topLeftRadius`・`topRightRadius`・`bottomLeftRadius`・`bottomRightRadius`
  - `minWidth`・`maxWidth`・`minHeight`・`maxHeight`
  - `counterAxisSpacing`
  - `strokeWeight`・`strokeTopWeight`・`strokeRightWeight`・`strokeBottomWeight`・`strokeLeftWeight`
  - `opacity`
- **VariableBindableTextField**
  - `fontFamily`
  - `fontSize`
  - `fontStyle`
  - `fontWeight`
  - `letterSpacing`
  - `lineHeight`
  - `paragraphSpacing`
  - `paragraphIndent`

以下のようにすることで、Variableを反映できます。

```ts
// variableを取得
const variables = await figma.variables.getLocalVariablesAsync();
const number = variables.find(variable => variable.name === "Number");

// Frameを生成
const newFrame = figma.createFrame()

// Variableを反映する
newFrame.setBoundVariable("width", number!)
```

### ⚪︎ `setBoundVariableForPaint` を使う
Variableで色を反映させるには、`setBoundVariableForPaint` を追加います。
`setBoundVariableForPaint` の引数には、`SolidPaint`と`"color"`とVariableを渡します。

以下のようにすることで、Variableを反映できます。

```ts
// variableを取得
const variables = await figma.variables.getLocalVariablesAsync();
const color = variables.find(variable => variable.name === "Color");

// Frameを生成
const newFrame = figma.createFrame()

// Variableを反映する
const fillCopy = newFrame.fills as SolidPaint[]
const SolidPaint = figma.variables.setBoundVariableForPaint(fillCopy[0], "color", color!)
newFrame.fills = [SolidPaint]
```

+ `newFrame.fills` を`SolidPaint[]`として、複製する
+ `setBoundVariableForPaint` で、variable を反映した `SolidPaint` を作成する
+ `newFrame.fills = [SolidPaint]` で色を反映する

## まとめ
この記事では、Figma PluginのVariablesを操作する方法を解説しました。
ぜひこの記事を参考に、Variablesを使ってみてください。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510