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
Settings and syncing
Open project in Ditto: Open the corresponding Ditto project in the web app
Plugin position: Choose where to snap the plugin UI on your screen
Settings: Toggle the status indicators in the Figma layer name
Log out: Log out of your Ditto account
Sync button: Trigger a manual sync between your Figma plugin and Ditto
Minimize: Minimize the plugin to reduce the UI