Figma Widgetで多機能メモを作成した話

はじめに

はじめまして、玉利です。
普段の業務はフロンエンドの実装やUIを作成しています。

今回はFigma Widgetで多機能なメモをどのように作成した話をしようと思います。

Figma Widgetとは

Figmaには以下のように書いてありました。

Widgets are interactive objects that extend the functionality of design files and FigJam boards. Unlike plugins that run for a specific person, everyone can see and interact with the same widget. You can add as many widgets to the board as you need and even run them at the same time. This makes them great for collaboration!
(https://www.figma.com/widget-docs/　より引用)

要約するとFigma Widgetとは機能を拡張するオブジェクトでプラグインとは異なり、全員が同じウィジェットを表示して操作できるものです。

ウィジェットは主にFigmaが提供しているReactのコンポーネントを使用して作成できます。
ReactとJavaScriptの知識は多少必要ですが簡単に作成することができます。

作成方法

環境構築

1. Figmaのデスクトップアプリから「Figmaのアイコンをクリック→ウィジェット→開発→ウィジェットの新規作成...」を選択
2. ダイアログが表示されるので用途に合わせて「Figmaデザイン＋FigJam」か「Figmaデザイン」のどちらかを選択し、「次へ」をクリック
   今回はFigmaデザインしか使用しない想定だったので「Figmaデザイン」を選択しました。
3. ウィジェット名の入力とファイルの種類を選択
   今回はサンプルコードを確認したいので「シンプル」を選択しました。
4. ウィジェットのファイルのフォルダ指定

以上がファイル作成までの環境構築です。
次にVSCodeでファイルを開きます。
以下のコードでFigmaが提供しているAPIをインストールします。

$ git init
$ npm install
$ npm install --save-dev @figma/widget-typings @figma/plugin-typings

これにて環境構築終了です。

ウィジェットの確認方法

FigmaでWidgetを確認するためには、code.tsxで開発したコードをcode.jsにコンパイルする必要があります。
そのため、VSCodeでcommand+Pでコマンドパレットを表示し> Tasks: Run Build Task→tsc: watch - tsconfig.jsonを実行します。
Figmaのデスクトップアプリに戻り、ヘッダーのウィジェットのアイコンをクリックし、該当のウィジェットをドラッグ＆ドロップするとウィジェットを確認できます。

command+Pで> Tasks: Run Build Task→tsc: watch - tsconfig.jsonを実行しても確認できない場合はyarn watchを実行してみてください

結果

表示確認できました！！
ここから自分が作成したい形にカスタムしてみましょう。

多機能なメモのウィジェットの作成

実現したいことは以下となります。

• 仕様を記載できる
• 確認・質問を記載できる
• TODOを記載できる
  • チェックボックスでTODOが達成されているかを確認できる
• メモの状態管理ができること

useSyncedStateでメモの記載情報の管理

useSyncedStateを使用してメモの記載情報を管理します。
useSyncedStateはuseStateのようなhookでwidgetから使用できます。
使い方はuseStateと特段変わりません。
Inputの値がメモの記載情報になるように実装しました。
サンプルコードは以下になります。

const { widget } = figma;
const { Input, useSyncedState } = widget;

function Widget() {
  const [memo, setMemo] = useSyncedState("memo", "");
  return (
    <Input
      onTextEditEnd={(e) => setMemo(e.characters)}
      value={memo}
    />
  );
}
...

チェックボックスでTODOが達成されているかを確認

チェックボックスもuseSyncedStateを使用して管理しました。

メモの状態管理

「仕様」「確認・質問」「TODO」の３つの状態を切り替えれるようにしたいのでusePropertyMenuとuseSyncedStateを使用して切り替えができるよう実装しました。
usePropertyMenuとは以下の画像のようにウィジェットの上に表示される任意のアクションを行えるメニューになっています。tooltipも指定することでアイコンの名前も記載できます。

useSyncedStateの第一引数に表示したいアイコンを指定できます。第二引数には具体的はアクションを記載できます。今回はpropertyName別にメモの状態を切り替えるようにしました。
サンプルコードは以下になります。

const { widget } = figma;
const { usePropertyMenu, useSyncedState } = widget;

type MemoState = "specification" | "todo" | "confirm";

function Widget() {
  ...
  const [memoState, setMemoState] = useSyncedState<MemoState>(
    "memoState",
    "specification"
  );
  
  usePropertyMenu(
    [
      {
        itemType: "action",
        propertyName: "specification",
        tooltip: "specification",
        icon: `<svg></svg>`, // 任意のアイコン
      },
      {
        itemType: "action",
        propertyName: "todo",
        tooltip: "todo",
        icon: `<svg></svg>`, // 任意のアイコン
      },
      {
        itemType: "action",
        propertyName: "confirm",
        tooltip: "confirm",
        icon: `<svg></svg>`, // 任意のアイコン
      },
    ],
    ({ propertyName }) => {
      if (propertyName === "specification") {
        setMemoState("specification");
      } else if (propertyName === "todo") {
        setMemoState("todo");
      } else if (propertyName === "confirm") {
        setMemoState("confirm");
      }
    }
  )
  
  return (
    ...
  )
}

ウィジェットの公開

1. ヘッダーのウィジェットのアイコンをクリックし、該当のウィジェットの詳細アイコンをクリックし、「公開」をクリック
   
2. ダイアログの内容を記載
3. レビューを送信
4. レビューが通れば公開されます。

公開までは大体1週間かかりました。

まとめ

Figma Widgetで多機能なメモをどのように作成しました。
業務でReactを触っていたこともあり簡単に作成できました。useSyncedStateやusePropertyMenuなど使いやすいAPIを提供されているため初学者にも優しいと感じました。

今回作成したものは以下のものになります。
https://www.figma.com/community/widget/1193913765388389491
これからより使いやすいように随時更新していこうと思います。
ぜひ、使用してみてください。

少しでも興味を持たれたならぜひウィジェットを作成してみてください。