How to update your Figma mockups with the latest edits and activity from Ditto.
If you haven't already, import the Figma file you'd like to sync changes to into your Ditto workspace and make some edits via the web app. Instructions on importing a Figma file here ->
In order to sync edits made in Ditto back to the Figma design file, you (or someone on your team!) will need to pull the changes back into the design file via our Figma plugin. This is because, at the moment, Figma only allows edits to design files to be made from plugins. Plugins can only be opened by those with edit access to the Figma file.
Install the Ditto plugin in Figma if you haven't already. Installing plugins in Figma occurs on a user-by-user basis — anyone else on your team that wants to use the plugin will need to install for their own Figma account.
1. Open up the Ditto plugin in your Figma file. You'll need to sign in if this is your first time opening the plugin. You can open plugins in Figma from the menu (see below) or by right clicking on the canvas and selecting Plugins.
2. If you're the first person to open the plugin in this Figma file, you'll need to paste the file link to connect the file to Ditto. This only has to be done once per project!
3. Wait as the plugin fetches the latest changes from Ditto and updates your file! (We call this resyncing).
4. The plugin automatically performs a resync when it's opened, however you can also do this manually! As you continue working in the Figma file, you can Resync your file manually by clicking the 🔄 icon in the top right.
