The tab helps you to organise your dependencies between screens and generate a dependency model.

How to add transition?

Select 2 screens with prefix “screen“ and click on the blue button “ADD.“ A popup will be shown, where you can select start and end point of your dependency arrow with transition type.

• None

• Fade

• Cover

• Cover Right

• UnCover

• UnCover Right

Keep in mind! If you select screens without prefix or wrong Figma node, you will not be able to add a new transition.

Otherwise, an arrow will be created between your selected screens. Here is the output:

In layers on the left side of your Figma file you will see a new vector with this naming format:

<transitionName>_from_<startPoint>_to_<endPoint>

How to remove transition?

After created transition, you can remove it. If you select the same 2 screens with “screen“ prefix, where an arrow is between them, you can remove the transition via “REMOVE“ button that will appear in the Org tab.

After clicking, a popup will be shown with text - “Do you want to remove all transitions?“ When you click on “YES“ button the arrow will be removed.

Warning! Do not remove the arrow without plugin! Frames contain saved data about dependencies. If you remove relationship arrow without plugin, data will not find any ID of arrow.

How to generate Dependency Model

After all transitions are created of your designed screens, you can select them and click on “GENERATE“ button.

Then, the dependency model will be generated, like this: