How do I track time in Figma?

Help |

Collections: Chrome Extension.

Written by Nisse

Last modified on

September 11th 2024

Utilize Jibble’s Chrome time tracking extension within Figma to easily track and manage your hours spent on design. Perfect for monitoring time on designing projects and improving efficiency, this guide provides simple, step-by-step instructions for integrating time tracking directly within your Figma files. This article covers:

• Installing Jibble’s Chrome Extension
• Linking Figma and Jibble
• Tracking time in Figma

---

Installing Jibble’s Chrome Extension

1. You can install the Jibble extension:
   1. Using the Jibble Web App:
      • Sign into your Jibble account and locate the “Get the app” button on your dashboard.
      • When prompted, select “Chrome Extension” to be directed to the Chrome Web Store.
   2. Directly from the Chrome Web Store:
      • Visit the Chrome Web Store and search for the Jibble Time Tracker extension.
2. Click “Add to Chrome” to install the extension.
3. Once installed, an icon will appear in your browser’s toolbar.
4. To access the extension, click on the puzzle piece icon in the top right corner of your Chrome toolbar.
5. Pin the Jibble Time Tracker by clicking the pin icon next to it for easy access while working with Figma.

---

Linking Figma and Jibble

1. Click on the Jibble icon in your Chrome toolbar.
2. Log in to your existing Jibble account, or if you’re new to Jibble, sign up for a free account.
3. Click on the three horizontal lines in the upper-right corner of the extension.
4. Select Integrations from the menu.
5. Make sure the checkbox for Figma is enabled.

---

Tracking time in Figma

After successfully installing and integrating Jibble’s time tracking extension with Figma, you’ll be able to track time directly within Figma using various methods.

• Using the embedded Jibble timer 

1. Open Figma and log in to your account.
2. Navigate to the file you want to track time for.
3. Within the Figma interface, you’ll find a “Jibble in” button.
4. Click on the “Jibble in” button.
5. A small pop-up window will appear, allowing you to select an activity and project if needed.
6. Notes will be auto-filled based on the Figma project name.
7. Click Save to start tracking time.
8. Once your time tracking session starts, the timer button will automatically switch to “Jibble out”.
9. When you’ve completed your task in Figma, click on the “Jibble Out” button to clock out.

---

• Using keyboard shortcuts

1. Click on the Jibble icon in your browser’s toolbar.
2. Go to the top-right corner and select the three horizontal lines.
3. Choose Settings from the menu.
4. Switch on the toggle for Keyboard Shortcuts to enable them for Figma.
5. Once activated, use the keyboard shortcut Ctrl+Shift+S on Windows or Command+Shift+S on Mac to clock in while working in Figma.
6. When your task is completed, use the same keyboard commands to clock out.

Note: The last used activity and project will automatically apply, and no additional notes are needed.

---

• Using right clicks

1. Right-click on your mouse within Figma and select Jibble | Clock in from the menu to start tracking your time.
2. When you’ve completed your task, right-click on your mouse again and choose Jibble | Clock out to stop the timer.

Note: The previously selected activity and project (if applicable) will be automatically applied when using the right-click option. No additional note entry will be required.

---

• Using text highlighting

1. Open a design file in Figma that you want to track time for.
2. Highlight any key text within the design.
3. Right-click and choose Jibble from the context menu.
4. The clock-in screen will open with your highlighted text from the Figma design automatically filled in as notes.
5. Choose an activity and project if necessary, then click Save to start the timer.