はじめに
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");
-
figma.variables.getLocalVariablesAsync()でvariablesの配列を取得します -
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")
-
figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync();で チームライブラリのコレクションの配列を取得する -
variablesCollections.find(collection => collection.name === "Collection 1")?.keyでCollection 1のkeyを取得する -
figma.teamLibrary.getVariablesInLibraryCollectionAsync(variablesCollectionKey!)でCollection 1の variable の配列を取得する -
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 charactersitemSpacing-
paddingLeft・paddingRight・paddingTop・paddingBottom visible-
topLeftRadius・topRightRadius・bottomLeftRadius・bottomRightRadius -
minWidth・maxWidth・minHeight・maxHeight counterAxisSpacing-
strokeWeight・strokeTopWeight・strokeRightWeight・strokeBottomWeight・strokeLeftWeight opacity
-
-
VariableBindableTextField
fontFamilyfontSizefontStylefontWeightletterSpacinglineHeightparagraphSpacingparagraphIndent
以下のようにすることで、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)のフォローをお願いします。