👉Quick note: Developer mode is only available for linkable groups of text in Ditto, not draft groups. For more information on the difference between linkable and draft groups (as well as how to use each), head to our guide to drafting text in Ditto.
Turning on Developer Mode enables a project to be fetched by our API and generates editable IDs for all text, blocks, and frames. Don’t worry, you’ll still be able to continue editing this project after Developer Mode is turned on!
If Developer Mode has been turned on for a project, the icon will display as blue in the project title bar. You'll also see a Developer Mode Enabled tag on the project itself on the Projects page.
You can also turn on Developer Mode for the component library, which generates API IDs for the Component Library and allows it to be fetched by our API and CLI.
IDs generated in a project with Developer Mode are used to identify and fetch specific text items using our developer integrations.
For a project with Developer Mode enabled, you can view or hide all IDs from the canvas by using the dropdown menu next to the Developer Icon in the project title bar.
You can click on any ID in your project to quickly copy it to your clipboard.
You can always edit any of the IDs in your project or component library.
IDs will also get displayed in the layer names in your Figma files to make it easy for developers to copy:
When you turn on developer mode in your component library, the IDs will be generated by default based on the component name. You can always edit the IDs to be something else, and IDs are unique to the entire component library.
We often see teams integrate the component library to development due to several reasons:
An example of a component's developer ID generated from the component name:
When you turn on developer mode in a project, IDs get generated for all text items, blocks, and frames within a project.
You can search for text items by ID within a project using the developer ID filter!
Developer mode will be available for any workspace with Ditto's developer integrations enabled at the workspace level. You can do so in on the Developers page.
Ditto's developer integrations are an add-on for the entire workspace, which means an unlimited number of developers can use them. Developers can also be added as individual editor or commenter seats, which will give them access to the Ditto web app and Figma plugin, where they'll be able to view and edit string IDs, generate API keys, view and edit text metadata and components, and more. For more information on plan options for developers in Ditto, head to our pricing page.
You can use our developer integrations to fetch text from Ditto directly in development.
You can configure your workspace's developer IDs in the developer integrations page of your account settings.
When configuring component ID rules, you can set rules for how IDs get generated within the component library:
For more help or discussion regarding Ditto's developer integrations, join our developer Slack community. You can also contact us at dev@dittowords.com regarding any our developer integrations.
