はじめに
みなさんは、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)のフォローをお願いします。