1
1

はじめに


みなさんは、Figmaのプラグイン・FigJamのプラグインを作ったことはあるでしょうか?

作ったことがない方にとって、あまり違いが分かりずらいかなと思います。
そのため、この記事では、FigJamのプラグインの出来ること・出来ないことを中心に、FigmaとFigJamのプラグインの違いを紹介しようと思います。

FigJamのPluginで出来ること・出来ないこと

コンポーネント

FigJamでは、専用のステッカーがあるため、Plugin APIを使用して、有効なライブラリのコンポーネントやFigmaのデザインファイルからFigJamのファイルに貼り付けられたデザインにはアクセスすることができます。

また、Plugin APIを使用して、FigJamのファイル内にあるローカルスタイルやインスタンスにもアクセスできます。

ただ、Plugin APIを使用してFigJamのファイル内に新しいコンポーネントを作成したり、既存のコンポーネントをバリアントに組み合わせたりすることはできません。そのため、以下の関数も使用できません

  • createComponent():コンポーネントを作成するための関数
  • combineAsVariants():依存コンポーネントを組み合わせて、バリアントを作成するための関数

※ FigJamのファイルにある ComponentNode のインスタンスは作成することができます。

スタイル

FigJamのファイルでPlugin APIを使用する場合、既存のノードに適用されたスタイルにのみアクセスできます。

ただ、以下の関数を使用してローカル・スタイルを作成したり、管理したりすることはできません。

  • createPaintStyle():ペイントスタイルを作成する
  • createTextStyle():テキストスタイルを作成する
  • createEffectStyle():エフェクトスタイルを作成する
  • createGridStyle():ガイドを作成する
  • moveLocalPaintStyleAfter():指定したペイントスタイルを並べ替える
  • moveLocalTextStyleAfter():指定したテキストスタイルを並べ替える
  • moveLocalEffectStyleAfter():指定したエフェクトスタイルを並べ替える
  • moveLocalGridStyleAfter():指定したガイドを並べ替える
  • moveLocalPaintFolderAfter():ペイントスタイルを含むフォルダの順序を並べ替える
  • moveLocalTextFolderAfter():テキストスタイルを含むフォルダの順序を並べ替える
  • moveLocalGridFolderAfter():グリッドを含むフォルダの順序を並べ替える

FigJam 固有のノード

FigJamのファイルには、固有のノード・タイプがいくつかあります。
FigJam のプラグイン API を使用すると、以下のようなノード・タイプを作成および変更できます。

StickyNodeShapeWithTextNodeConnectorNodeCodeBlockNodeMediaNodeTableNode

Figmaのファイル内にでこれらのノードを作成することはできませんが、Figmaファイル内のこれらのタイプの既存のノードを読み込んで変更することができます。

また、manifest.json"editorType": ["figjam"] が含まれていない場合は、これらのノードに関連する以下の関数にはアクセスできません

  • figma.createSticky():stickyを生成する
  • figma.createShapeWithText():図形を生成する
  • figma.createConnector():コネクタを生成する
  • figma.createCodeBlock():コードブロックを生成する
  • figma.createGif():Gif画像を生成する
  • figma.createTable(numRows, numColumns):テーブルを生成する

Timer

FigJamのファイルはTimerをサポートしており、ファイル内のユーザが自分の活動に制限時間を設定し、カウントダウンを見ることができ、FigJamのファイルにアクセスすることができれば、誰でも見ることができます。

詳しくはこちらの記事をご覧ください

まとめ

この記事では、FigJamのプラグインの出来ること・出来ないことを中心に、FigmaとFigJamのプラグインの違いを紹介しました。
この記事を参考にFigJamのプラグインを作成してみてください。


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

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1