logo
Resources
Table of content
Motiff AI
Interface
Layers and tools
Layer properties
Design systems
Prototypes
Dev Mode
Collaboration
Import and export
File settings
Account
File management
Team management
Sharing and permissions
Billing
Organization
Apps
Work with support
Help Center/Design systems/Components/Name and organize components

Name and organize components

Motiff supports naming and organizing components. This will result in a clear component directory (as shown in the image below), making it easier to find and replace components later. 'Name and organize components 1.png'

Build a component directory

Motiff supports two ways to build a component directory. You can use them together based on your needs.

Build with pages and frames

Motiff will default to using the pages and frames from libraries as the first two layers of the component directory structure. You can use this rule to build your own component directory.

For example:

Place a Default button and a Disable button in a frame named Button. This frame is located under a page named Action. 'Name and organize components 2.png'

You will see a two-level directory in the asset panel.

Page - Frame - Component name

Action - Button - Active button 'Name and organize components 3.png'

Tip: The nested frame does not increase the directory level. The directory only takes the name of the top-level frame. Therefore, pages and frames can be created at most two levels of directories. If you find that two levels are insufficient for building a design system, you can combine them with the construction of names to build deeper structures.

Build with specific names

You can also use specific names to merge two related components under the same directory, such as Button/Default and Button/Disable. Since they share the same root node name, Button becomes the directory name for these two components. 'Name and organize components 4.png'

Practical application

For example, the first step of building libraries for Motiff is to create a file.

  1. 1.Pages and frames
  • We create several pages under the file, each carrying one type of component.'Name and organize components 5.png'
  • Under each page, we create some frames. Here, using icons as an example, we categorize them by size: 12, 16, and 24. 'Name and organize components 6.png'
  1. 2.Specific Names
  • Icons under the frame named 16 can also be classified based on usage scenarios: comment panel, layer panel, and design panel. Thus, we prefix the names with Comment panel/Component name, Layer panel/Component name, and Design panel/Component name. 'Name and organize components 7.png'
  1. 3.Structure

  • Through the above naming methods, a structure tree will be formed: 'Name and organize components 8.png'

  • The established design system in the end will present a clearly structured component directory.

    • Asset panel 'Name and organize components 9.png'
    • Instance panel 'Name and organize components 10.png'