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

はじめに

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

Variablesを取得する

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

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

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を取得する

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 を作成する

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

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

Variable の値を変更する

// 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を反映できます。

// 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を反映できます。

// 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)のフォローをお願いします。