【Figma Widget】Figma Widgetで使えるHooks まとめ

はじめに

みなさんは、Figma Widget を開発する際、FigmaにどんなHooksが使えるんだろう？と思ったことはありますか？

この記事では、そんな、Figma Widgetで使えるHooksについて解説しようと思います。

Figma Widgetで使えるHooks

useEffect

useEffect はウィジェットの状態が変化するたびに実行されるHooksです。
そのため、非同期タスクの実行、呼び出しのバンドル、またはイベント ハンドラーの副作用の統合が可能になります。

useEffect(() => {
    // 処理を記載する
})

usePropertyMenu

usePropertyMenuは、ウィジェットが選択されたときに表示するプロパティメニューを指定できます。

usePropertyMenu(
    [
        {
            itemType: "action",
            propertyName: "action"
        },
        {
            itemType: "separator"
        },
        {
            itemType: "color",
            propertyName: "color"
            selectedOption: color,
            options: [{option: "#e06666", tooltip: "Red"}, {option: "#ffe599", tooltip: "Yellow"} ],
        }
    ],
    ({propertyName, propertyValue}) => {
        if (propertyName === "color") {
            // 処理を記載する
        }
    }
)

useStickable

useStickableは、FigJam専用のHooksです

useStickableは、他のノードの上にドラッグされた時、他のノードにくっつくHooksです。
この動作は、Figmaのスタンプノードの動作に似ています。

useStickable(() => {
    // 処理を記載する
})

useStickableHost

useStickableHostは、FigJam専用のHooksです

useStickableHostは、ウィジェットにスティッカブルが追加・削除されたときに、ウィジェットがコールバック関数を実行するHooksです。

useStickableHost(() => {
    // 処理を記載する
})

useSyncedState

useSyncedState は、ウィジェットのレンダリングが変更可能な状態に依存することを宣言し、キーとデフォルト値を指定すると、さまざまな状態にわたって、使用および更新できます。

const [count, setCount] = useSyncedState("count", 0)

useSyncedMap

useSyncedMap は、useSyncedStateと同じように機能しますが、マップ全体が最後の値に上書きされるのではなく、マップ内の各値が最後の値に上書きされた値へ更新されます。
そのため、複数の人が一度にウィジェットを操作した時にウィジェットの状態を正確にレンダリングします。

const voteMap = useSyncedMap<number>("sessionIdToVotes")

useWidgetId

useWidgetId は、onClickなどのイベントハンドラでアクティブなウィジェットノードを参照するためのHooksです。

const widgetId = useWidgetId()

まとめ

この記事では、そんな、Figma Widgetで使えるHooksについて解説しました。
ぜひこの記事を参考にFigma Widgetで使えるHooksを使ってみてください。

---

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

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