Skip to main content

Figma Plugin

Updated over a month ago

Manage and edit your product text and keep changes in sync while inside your Figma mockups using Ditto’s Figma plugin. The plugin has the same functionality as Ditto’s web app, it just allows you or your team to edit product text, access the component library, and sync changes with Ditto without leaving the Figma file.

This guide will help you get started with Ditto in Figma and introduce the core plugin features.


Install and open the Figma plugin

If it’s your first time using Ditto, head to Figma and install the Figma plugin. You only need to do this once for your Figma account.

Open the Figma plugin:

  • Open up your Figma file

  • Go to ActionsPlugins & widgets

  • Search Ditto and open the plugin

💡 If it’s your first time opening the Figma plugin, you will be prompted to sign in or sign up


Figma plugin tour

Here are the key features you’ll see when you open Ditto’s Figma plugin:

Import and link new text items

  1. Import: Import selected text item(s) into Ditto

  2. Link: Link selected text item to a project text or component


Selected text item

  1. Selected tabs: Switch between Edit, Activity, Comments, and Variant tabs for the selected text item

  2. Text value: Edit the text value of the selected text item

  3. Metadata: Add metadata to the text item

  4. Create block: Create a new block with the selected text item

  5. Link text suggestions: Link repeated text found across your Figma file

  6. Component library: Publish selected text as a component or link text item to an existing component

  7. Comment: Add a new comment and see the latest comment thread

  8. Developer IDs: Display text item ID and component ID (if available)

  9. Unlink text item: Unlink selected text item from Ditto


Projects tab

  1. Activity: See the activity log for the entire project

  2. Comments: See all comments for the entire project

  3. Suggestions: See any block or text item link suggestions Ditto has found


Assets tab

  1. Project text: Browse your Ditto project and add text items to your Figma design

  2. Library components: Browse your component library and add components to your Figma design


Settings and syncing

  1. Open project in Ditto: Open the corresponding Ditto project in the web app

  2. Plugin position: Choose where to snap the plugin UI on your screen

  3. Settings: Toggle the status indicators in the Figma layer name

  4. Log out: Log out of your Ditto account

  5. Sync button: Trigger a manual sync between your Figma plugin and Ditto

  6. Minimize: Minimize the plugin to reduce the UI

Did this answer your question?