Thanks so much for trying out Ditto! To help you get started, this guide offers some quick best practices and answers to commonly-asked questions.
If you delete a frame in Ditto that's synced to Ditto, Ditto will no longer be able to sync text changes back and forth between Ditto and Figma. However, your work in Ditto won't be lost! The frame will be stored in Ditto as a drafted group. You can access your drafted groups for any project by heading to the drafted groups page.
In the future, you'll be able to re-link the drafted group to a frame in Figma.
This component is automatically created in Figma when you create a new Ditto project. This component allows Ditto to track duplicated files. Please don't edit this component to avoid issues syncing duplicated Figma files to Ditto.
When you import a frame in Ditto, by default, we'll import all of the tex items on the frame in Figma. If there's text on the frame you don't want to work on, you can always hide this text.
When importing frames into Ditto via our plugin, you can also select only a subset of text to work on (by selecting text in the layers panel or on the frame directly).
To access the "Import as JSON" option, you'll need to turn on Developer Mode for the Component Library.
To export text in drafted groups, either via the export modal or Ditto's API/ CLI, make sure you've:
In Ditto, there are three roles: admins, editors, and commenters. Editors are able to take any action in Ditto (like editing text, creating and attaching Ditto components, and adding variants). Admins can do all of that, plus remove users and view billing details. Commenters can leave comments, change the status of copy, and resync.
For most teams in Ditto, editors will include product designers, content designers, and developers who might want to edit text or API IDs in Ditto. Commenters are often product managers, legal and compliance reviewers, or other stakeholders who need to review (but not edit) product copy.
For the best experience using Ditto, we recommend that Figma files are structured so that:
Blocks in Ditto keep text organized. To easily organize text into Blocks, we recommend doing so from our Figma plugin! You'll be able to easily select a grouping in Figma and turn it into a block in Ditto.
While there's no one-size-fits-all approach to naming components in Ditto (every team has a unique product and workflow), here's how many teams choose to organize their components:
Ditto's Figma integration allows you to keep design files up-to-date with the latest version of text from Ditto. Editing text in Ditto is just like editing directly in the Figma file- when you update a text item in Ditto, the text will update directly in the Figma designs the next time you resync from our Figma plugin. Ditto won't update your files unless you resync from the Figma plugin (helping you ensure updates are made only when you'd like!)
Ditto will also add a status icon to the layer name of text items where a status has been applied in Ditto and a component icon to text that's an instance of a Ditto component.
Because editing text in Ditto is like editing text directly in Figma, edits to Figma components will update as you'd expect if you edited the component directly. For example, if you edit text on a main component in Figma, that change would propogate everywhere else that Figma component has been used.
Ditto components and Figma components can also interact to help both designs and copy stay consistent. For example, we've seen teams attach Ditto components directly to the Figma components in their design system (creating a combined content- and design- system).