Figma Branching

This help guide goes over how to use Ditto with Figma branching.

Importing Figma Branches

You can import Figma branches into Ditto like any regular Figma file in the web app or the Figma plugin. Just make sure you copy and paste the branch-specific link to the Figma file! It should look something like this:

https://www.figma.com/file/{file_id}/branch/{branch_id}/{branch_file_name}

Once imported, the Figma branch will look and function like any other Ditto project. You’ll be able to tell that a project is connected to a Figma branch if you see the following badge next to the project name:

Important Note

At the moment, you can only connect one branch of a Figma file to Ditto at a time. This means that if you’ve already imported the main branch of a Figma file into Ditto, you won’t be able to import another branch. You’ll have to delete the existing project that’s connected to the main branch, and then import your intended branch from scratch as a new project.

Merging/Discarding Changes from a Branch

When a branch file gets merged or archived in Figma, the next time you open the Ditto project, you’ll get presented with the following modal, asking what you want to do with the changes made in the Figma branch:

You can do one of the following:

1. Merge changes from the Figma branch.

  • Choose this option if you’ve merged the branch in Figma. This means that when we re-link the Ditto project to the main branch of the Figma file, we’ll preserve all existing Ditto metadata and changes. This includes any and all status, tags, edit history, comments, Ditto Components, etc. that were created.

2. Discard changes from the Figma branch.

  • Choose this option if you’ve archived or deleted the branch in Figma. This will wipe all changes and Ditto metadata created previously. We’ll reset the Ditto project, and you’ll start from scratch with a newly-imported main branch of the Figma file.

Once you’ve chosen one of the above options, the Ditto project will now be connected to the main branch of the Figma file. This means you can use the Ditto Figma plugin in the main branch of the Figma file, like usual.

If you actually want to start from scratch with a different branch, you’ll just need to delete the project and import the branch as a new one.

Note: We currently support Figma branching in a limited capacity. Don’t worry though — more robust support for branching is on our roadmap! If there’s something specific you want to see, we’d love to hear from you. :)

Didn't find what you were looking for?
Contact Support