はじめに
FigJamのPluginを開発する際、プラグインでタイマーを使いたいと思ったことはありますか？
この記事では、プラグインでタイマーを使う方法について解説します。
タイマーを使う
タイマーが使用できるのは、FigJamのみです！
タイマーは、FigJam で使用できる組み込みタイマーです。
figma.timer を使うことで、カウントダウンしてくれます。
タイマーを開始する
// 10秒のカウントダウンを開始する
figma.timer?.start(10)
引数に秒数を渡すことで、残りN秒のタイマーがスタートします。
タイマーがスタートしてない場合は、指定された秒数でタイマーがスタートします。
すでにタイマーがスタートされている場合は、残り時間を指定された秒数を設定します。
またタイマーの合計時間は、残り時間分減少し、指定された秒数分増加します。
タイマーを一時停止する
// タイマーを一時停止する
figma.timer?.pause()
figma.timer?.pause() を使うとタイマーを一時停止することができます。
タイマーを再開する
// タイマーを再開する
figma.timer?.resume()
figma.timer?.resume() を使うとタイマーを再開することができます。
タイマーを停止する
// タイマーを停止する
figma.timer?.stop()
figma.timer?.stop() を使うとタイマーを停止することができます。
残り秒数（readonly）
// 残り時間を取得する
const remaining = figma.timer?.remaining
figma.timer?.remaining を使うとタイマーの残り時間を取得することができる。
また、タイマーが開始されていない場合は０を返します。
タイマーの合計時間（readonly）
// 合計時間を取得する
const remaining = figma.timer?.total
figma.timer?.total を使うとタイマーの合計時間を取得することができる。
また、タイマーが開始されていない場合は０を返します。
合計時間は、タイマーが最初に開始された時間とタイマーから追加または削除された時間を足したもの、または引いたものとして定義されます。
タイマーの状態（readonly）
// タイマーの状態を取得する
const state = figma.timer?.state
// 'STOPPED' | 'PAUSED' | 'RUNNING' のどれかが取得される
figma.timer?.state を使うとタイマーの現在の状態を取得することができます。
タイマーの状態は以下のとおりです。
-
'STOPPED'：タイマーが開始も、終了もしていない場合 -
'PAUSED'：タイマーが開始されたが一時停止されている場合 -
'RUNNING'：タイマーが開始され、一時停止されてない場合
まとめ
この記事では、プラグインでタイマーを使う方法について解説しました。
ぜひこの記事を参考にFigJamでタイマーを使いたい場合は、この記事を参考にしてみてください。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。