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 Actions → Plugins & 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

Import: Import selected text item(s) into Ditto
Link: Link selected text item to a project text or component

Selected text item

Selected tabs: Switch between Edit, Activity, Comments, and Variant tabs for the selected text item
Text value: Edit the text value of the selected text item
Metadata: Add metadata to the text item
Create block: Create a new block with the selected text item
Link text suggestions: Link repeated text found across your Figma file
Component library: Publish selected text as a component or link text item to an existing component
Comment: Add a new comment and see the latest comment thread
Developer IDs: Display text item ID and component ID (if available)
Unlink text item: Unlink selected text item from Ditto

Projects tab

Activity: See the activity log for the entire project
Comments: See all comments for the entire project
Suggestions: See any block or text item link suggestions Ditto has found

Assets tab

Project text: Browse your Ditto project and add text items to your Figma design
Library components: Browse your component library and add components to your Figma design