はじめに

FigmaのPluginを開発する際、コンポーネントのプロパティを入れ替えたいと思ったことはありますか？
この記事では、コンポーネントプロパティを編集する方法を解説します。

コンポーネントプロパティを編集する

コンポーネントを取得する

コンポーネントを取得方法は以下の記事で詳しく解説しました。
ぜひご覧ください。

const componentKey = '****************************************'

const createComponent = async () => {
  const component = await figma.importComponentByKeyAsync(componentKey)
  component.createInstance()
}

コンポーネントプロパティを編集する

コンポーネントプロパティを編集するには、InstanceにsetPropertiesを記載するだけです。
setPropertiesの引数にプロパティ名と値を指定することで、変更することができます。

プロパティの値は、string・boolean・VariableAlias を受け取ることができます。

VariableAlias は、以下の記事をご覧ください

以下のように記載することで、プロパティを編集することができます。

const componentKey = '****************************************'

const createComponent = async () => {
  const component = await figma.importComponentByKeyAsync(componentKey)
  const instance = component.createInstance()
  
  instance.setProperties({
    "propertyName": string,
    "propertyName": boolean,
    "propertyName": VariableAlias
  })
}

まとめ

この記事では、コンポーネントプロパティを編集する方法を解説しました。

ぜひこの記事を参考にコンポーネントを変更してみてください。

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

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