Using Ditto’s plugin in Figma Dev Mode allows developers to quickly access and copy developer IDs, as well as production-ready code snippets to insert the ID for various languages.
Note: Figma Dev Mode allows plugins to surface read-only fields and code based on the current selection in the Figma file. To take action on Ditto data or edit text, use Ditto’s Figma plugin in design mode.
Open the Ditto Plugin in Dev Mode
In Figma, enter Dev Mode by clicking the toggle.
If it’s your first time running Ditto in Figma Dev Mode, head to the Plugins tab. Search for Ditto, and click Run. Log in to your Ditto account if needed.
Head to the Inspect tab, select something on the Figma file, and click the Close plugin and generate code button to view the developer IDs.
Using the Ditto Plugin
Select text in your Figma mockup. In the Code section of the Inspect tab, you’ll be able to view and copy the Ditto developer ID for the selected text.
To generate language-specific code for using the ID, head to the config settings and select your preferred framework from the dropdown.
Supported frameworks include:
Web:
Ditto React SDK
React-i18next
iOS:
SwiftUI
Android:
Jetpack Compose
Troubleshooting errors
Any errors will get surfaced in the Ditto Developer ID section on the Inspect tab. See below for potential errors and how to troubleshoot them.
Developer mode not enabled: the Ditto project connected to the Figma file doesn’t have developer mode enabled in Ditto. To fix this, open the project in the Ditto web app and turn on developer mode.
Ditto project not found: the Figma file hasn’t been imported into Ditto yet. To fix this, import the Figma file into Ditto (can be done using Ditto’s Figma plugin in design mode, or in the Ditto web app).
Text not synced to Ditto: the Figma file has been imported into Ditto, but the specific text that’s been selected hasn’t yet. To fix this, resync in Ditto’s Figma plugin in design mode, or in the Ditto web app.
Selection is not supported by Ditto: the plugin currently only supports single text box selections (not frames, groups, shapes, etc.).
Error fetching developer ID: there was an issue fetching the developer ID for the selected text, which could happen for several reasons. To fix this, try running Ditto’s Figma plugin in design mode. If the issue persists, reach out support@dittowords.com.
To learn more about our developer integrations, check out our docs here.
