【Figma Plugins】Figma Pluginsからサムネイルを設定する

はじめに

FigmaのPluginを開発する際、Figma Pluginsからファイルのサムネイルを設定したいと思ったことはありますか？
この記事では、Figma Pluginsからファイルのサムネイルを設定する方法を解説します。

Figma Pluginsからファイルのサムネイルを設定する

Figma Pluginsからファイルのサムネイルを設定するには、figma.setFileThumbnailNodeAsync()を使うことで、設定することができます。

引数には、FrameNode・ComponentNode・ComponentSetNode・SectionNode・null を受け取ることができます。

※ ComponentNode・ComponentSetNodeには、InstanceNode が含まれていないので、注意してください。

figma.setFileThumbnailNodeAsync(
    node: FrameNode | ComponentNode | ComponentSetNode | SectionNode | null
): Promise<void>

詳しくは、以下をリンクをご確認ください。

実際に使ってみる

code.ts

const setThumbnail = async() => {
  // text を生成する
  const text = figma.createText()
  await figma.loadFontAsync(text.fontName as FontName)
  text.characters = 'This is Thumbnail'
  text.fontSize = 20

  // Auto Layout が設定されているFrameを生成する
  const thumbnailFrame = figma.createFrame()
  thumbnailFrame.appendChild(text)
  thumbnailFrame.layoutMode = "HORIZONTAL"
  thumbnailFrame.resize(640, 360)

  // サムネイルを設定する
  await figma.setFileThumbnailNodeAsync(thumbnailFrame)
}

こんな感じに記載することで、シンプルですが、以下のようなサムネイルを設定することができます。

まとめ

この記事では、Figma Pluginsからファイルのサムネイルを設定する方法を解説しました。

ぜひこの記事を参考にFigma Pluginsからファイルのサムネイルを設定してみてください。

---

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

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