Figmaで時間を記録するには?

時間記録をFigmaワークフローに簡単に連携して、生産性を向上させ、デザインプロジェクトに費やした時間を正確に記録しましょう。

JibbleのChrome時間記録拡張機能をFigmaで利用すると、デザインに費やした時間を簡単に記録・管理できます。デザインプロジェクトの時間を把握し、効率を向上させるのに最適な本ガイドでは、Figmaファイル内に時間記録を直接組み込むための、わかりやすいステップごとの手順を解説します。

本記事では、以下について説明します:


JibbleのChrome拡張機能のインストール

  1. Jibbleの拡張機能は以下の方法でインストールできます:
    1. Jibble Webアプリ経由:
      • Jibbleアカウントにログインし、ダッシュボードで、[アプリを入手する]ボタンを見つけます。Installing chrome extension through "get the app" on dashboard
      • 案内が表示されたら、Chrome拡張機能を選択し、Chrome ウェブストアに移動します。Dashboard chrome extension
    2. Chrome ウェブストアから直接インストール:
  2. 拡張機能をインストールするには、[Chrome に追加]をクリックします。Chrome extension selection on dashboard
  3. インストール後、ブラウザのツールバーにアイコンが表示されます。
  4. 拡張機能にアクセスするには、Chromeツールバーの右上隅にあるパズルピースアイコンをクリックします。
  5. Figmaでの作業中に簡単にアクセスできるように、Jibbleタイムトラッカーの横にあるピンアイコンをクリックしてピン留めします。
    Pinning Jibble chrome extension

FigmaとJibbleの連携

    1. ChromeのツールバーにあるJibbleアイコンをクリックします。
    2. 既存のJibbleアカウントにログインするか、Jibbleを初めて使用する場合は、無料アカウントに登録してください。
    3. 拡張機能の右上隅にある三本線アイコンをクリックします。
    4. メニューから[連携]を選択します。
    5. Figmaのチェックボックスが有効になっていることを確認します。Figma under integrations in Jibble chrome extension

Figmaで時間記録

Jibbleの拡張機能をFigmaにインストールし連携が完了すると、Figma内でさまざまな方法を使って直接時間を記録できるようになります。

  • Jibbleタイマーを使う場合
  1. Figmaを開き、アカウントにログインします。
  2. 時間を記録したいファイルに移動します。
  3. Figmaインターフェース内に、[Jibble 開始]ボタンがあります。Jibble in button in Figma
  4. Jibble 開始]ボタンをクリックします。
  5. 小さなポップアップウィンドウが表示され、必要に応じて作業とプロジェクトを選択できます。
  6. メモは、Figmaプロジェクト名に基づいて自動入力されます。
  7. 保存]をクリックして時間の記録を開始します。Clocking in via Figma
  8. タイマーが開始されると、ボタンが[Jibble 終了]に切り替わります。Jibble out button in Figma
  9. Figmaでタスクを完了したら、[Jibble 終了]ボタンをクリックして終了します。Clocking out via Figma

  • キーボードショートカットを使う場合
  1. ブラウザのツールバーにあるJibbleアイコンをクリックします。
  2. 右上隅に移動し、三本線を選択します。
  3. メニューから[設定]を選択します。
  4. Figmaで有効にするには、[キーボードショートカット]のトグルをオンにします。Using keyboard shortcuts
  5. 有効化後、Ctrl+Shift+S(Windows)またはCommand+Shift+S(Mac)のキーボードショートカットを使用し、Figmaのタイマーを開始します。
  6. タスクを完了したら、同じキーボードショートコマンドを使用して終了します。

注:最後に使用した作業とプロジェクトが自動的に適用されるため、追加のメモ入力は必要ありません。


  • 右クリックを使う場合
  1. Figma内で右クリックし、メニューから[Jibble|開始]を選択して時間記録を始めます。
  2. Clocking in via right click in Figmaタスクが完了したら、もう一度マウスを右クリックして[Jibble|終了]を選び、タイマーを停止します。Clocking out via right click in Figma

注:以前に選択した作業とプロジェクト(該当する場合)は、右クリックオプションを使用すると自動的に適用されます。追加のメモの入力は必要ありません。


  • テキストのハイライトを使用する場合
  1. Figmaで時間を記録したいデザインファイルを開きます。
  2. デザイン内で重要なテキストを選択してハイライトします。
  3. 右クリックし、表示されたコンテキストメニューから、[メモ付きでJibble 開始]を選択します。
  4. Clocking in via text highlighting in Figmaハイライトしたテキストがメモ欄に自動的に反映された状態で、打刻画面が表示されます。
  5. 必要に応じて作業とプロジェクトを選択し、[保存]をクリックしてタイマーを開始します。Inputting activities and projects via text highlighting in Figma

関連記事: