Add and edit text layer

Text is an important part of interface design. The use of text affects the efficiency of information conveyance. The placement of text, layout, and even font choices play significant roles in the design process.

Motiff employs its own custom text rendering to ensure that design content appears consistent across different systems and platforms.

Create text layer

There are two ways to create text layers with different response types.

Single click

Use this method to create a text layer that automatically adjusts its width as you type.

1. 1.Select from the toolbar or use Shortcut key T .
2. 2.Click once on the canvas to creat a text layer.
3. 3.Start typing, the text box will expand horizontally as you add more text.

Click and drag

Use this method to define a fixed-width text area, where text wraps automatically within the set dimensions.

1. 1.Click and drag anywhere on the canvas to create a text layer of a specific size.
2. 2.Enter text, and it will automatically wrap according to the width you set.

Resize text

You can resize text layers by adjusting the bounding box or using the Scale tool.

Resize the bounding box

To change the size of a text layer, drag the bounding box to adjust its size.

Use the Scale tool

The Scale tool allows you to resize multiple text layers conveniently.

Click in the toolbar, or press the shortcut K , then drag the handles to resize the text.

Edit text properties

Before editing text properties, ensure you have selected the appropriate text layers.

• To select a single text layer, simply click on it.

• To select multiple text layers:

  1. a.Click the first layer.
  2. b.Hold down Shift .
  3. c.Click on additional layers to select them.

You can change the appearance and position of text by modifying its properties, including its style, alignment, size, etc.

Basic text properties

Through the Text section, you can access basic text properties.

1. 1.Click to view, create, and apply text styles.
2. 2.Click to browse the list of web and local fonts to find the font you need.
3. 3.Click to adjust font weight or style.
4. 4.Click to adjust font size.
5. 5.Adjust the vertical distance between lines of text with line height.
6. 6.Adjust the horizontal distance between characters with letter spacing.
7. 7.Adjust the vertical distance between paragraphs with paragraph spacing.
8. 8.Select the text type to control how the text content responds when adjusting the text layer size.
9. 9.Adjust the horizontal alignment of text within the text box.
10. 10.Adjust the vertical alignment of text within the text box.
11. 11.Click to open the Type settings modal and explore more text properties.

Type settings

Through the Type settings modal, you can access additional text properties.

You can click in the lower right corner of the Text section to open the Type settings modal.

• Resizing: Set how the text content responds when adjusting the text layer size.
• Alignment: Adjust the horizontal alignment of the text.
• Decoration: Apply decorations to the text, such as strikethrough and underline.
• List style: Apply bulleted list or numbered list to the text.
• Case: Adjust the letter case. Choose from uppercase, lowercase, and title case.
• Truncate text: Set whether to hide overflow content.

Create bulleted and numbered list

Motiff supports both numbered and bulleted lists. They allow you to organize and emphasize important information in your flies through lists.

Motiff currently supports up to five levels of indentation.

Create bulleted lists

You can use bulleted lists to organize non-sequential sets of information.

1. 1.Click in the toolbar, or press T .
2. 2.Enter text-editing mode, and create a bulleted list :
   • Type - or * , then press Space .
   • Click in the Text section of the Design panel and select from List style.
3. 3.To quickly apply a bulleted list to existing text, use the shortcut:
   • MacOS: ⌘ Command + ⇧ Shift + 8
   • Windows: Ctrl + Shift + 8

Create numbered lists

You can use numbered lists to organize sequential sets of information.

1. 1.Click in the toolbar, or press T .
2. 2.Enter text-editing mode, and create a numbered list:
   • Type the characters 1. or 1) , then press Space .
   • Click in the Text section of the Design panel and select from List style.
3. 3.To quickly apply a numbered list to existing text, use the shortcut:
   • MacOS: ⌘ Command + ⇧ Shift + 7
   • Windows: Ctrl + Shift + 7

Format list items

Adjust indentation

You can increase the indentation by pressing Tab , and pressing Tab again to increase it further. Conversely, you can use Shift + Tab to decrease the indentation.

List style

• Text Color: The bullet or number color matches the text color of the first line in the list.
• Stroke: Stroke properties apply to the entire text layer, including bullets or numbers.
• Effects: Effects will apply to the entire selected text layer.

Add emojis

You can add emoji symbols to text layers, and Motiff uses Apple's emoji styles.

macOS

You can use the emoji picker to add emojis to text layers.

1. 1.Create a text layer.
2. 2.Use the shortcut ⌃ Control + ⌘ Command + Space to bring up the emoji picker.
3. 3.Select the emoji you want to add to the text layer.

Windows

To add emojis, you need to activate Microsoft's Touch Keyboard first:

1. 1.Right-click on the Windows task bar.
2. 2.Click the Show touch keyboard button.

You can use the touch keyboard to add emojis.

1. 1.Create a text layer.
2. 2.Click the touch keyboard icon.
3. 3.Select the Emoji option.
4. 4.Choose the emoji you want to use.

Add links to text

Motiff allows you to add links to text, enabling navigation to external sites, specific pages, frames, or other Motiff files.

Create link

Links can be added to an entire text layer or specific parts of the text within a text layer.

1. 1.Select the text layer or text you want to add a link to.
2. 2.Click the toolbar's or use the shortcut keys:
   • macOS: ⌘ Command + K
   • Windows: Ctrl + K
3. 3.Enter the URL in the expanded input box.

• Edit link: Click on Edit, then update the URL.
• Delete link: Click on Edit to enter edit mode, then click .

Use link

Hover over linked text to view the link and access the edit button.

Clicking a link performs different actions based on the type：

• Motiff files: Open the linked file in a new tab.
• Pages, frames, or comments within the current file: Navigates within the file.
• External websites: Open the external website in a new tab.