logo
Resources
Table of content
Motiff AI
Interface
Layers and tools
Layer properties
Design systems
Prototypes
Develop mode
Collaboration
Import and export
File settings
Account
Teams, projects, and files
Billing
Professional plan
Organization plan
Apps
Work with support
Help Center/Collaboration/Designers to developers

Designers to developers

In most cases, the design drafts are handed over to the developer team only after they are finalized. Designers can take the following steps earlier in the design phase to prepare for smoother collaboration during the handoff process.

To designers

Prepare for file sharing

Designers can set up files in terms of files, pages, components, and styles.

For files and pages, designers can perform the actions listed below:

  • Select Set as thumbnail to make other collaborators identify the file easily. The current status of the project can be noted on the custom thumbnail.
  • Add links to files and pages related to requirements in the file (such as product documentation, project management tools, etc.) to help other collaborators quickly find relevant information.
  • Add annotations to the design content to help other collaborators understand the structure or basis of decision-making of the design content.
  • Set export for layers to make finding the correct slices easier for other collaborators.
  • Use descriptive names to name pages and help other collaborators to locate the content on the page.

Designers can also choose to add descriptions to components and styles, including details about their intended use, available variants or states, and any additional notes in the libraries.

Share files

Designers can share the file with colleagues, clients, and other work partners for collaboration, including assigning different permissions for them and managing all members together.

You can manage collaborators' permissions on teams, projects, and files.

When inviting other collaborators to access the file, you can choose to grant Can view or Can edit access permissions. If there is no need to edit the document together, granting Can view permission is sufficient.

Collaborators with Can view permission can:

  • Select layers from the Layer panel or canvas.
  • View the properties and styles of the selected layer in the inspect panel.
  • Measure distances between layers on the canvas.
  • View, add, and reply to comments in the file.
  • Copy the text content from text layers.
  • Copy layers or create a duplicate of the file.
  • View the version history of the file.
  • Open the corresponding component library file through the Go to main component.

To developers

After receiving files from designers in the handoff process, developers can follow the steps listed below and use Develop Mode to collaborate.

Develop Mode provides a set of independent operation interfaces for developers. To toggle between Design Mode and Develop Mode in any Motiff file, you can:

  1. 1.Open the Motiff file.
  2. 2.Toggle the Develop Mode switch on the right sidebar or use the shortcut ⇧ Shift + D .

You can find more information about how to use Develop Mode in Get started with Develop Mode.