Flinto supports inserting and editing text layers.

Ways to create text layers

  • Use the insert menu in the toolbar and choose Text, then click and begin typing
  • Press the "t" shortcut on your keyboard, then click to and begin typing
  • Import text from Sketch using the Send to Flinto Sketch plugin.

Editing text

  • Double click on a text layer to edit it.
  • Press escape or click outside the text layer to finish editing

Text properties

Text layers can contain sections with different properties. Properties will be applied to the entire layer, or to the specific range of text if it is partially selected.

  • Font: The font to be used for the selected text
  • Weight: The typographical weight of the chosen font
  • Sizing: Press the "Auto" button to use auto sizing. Auto sizing make the text layer wide enough to accomodate each paragraph on a single line. If the button is disabled, auto sizing is currently enabled. Resizing a text layer will remove auto sizing and allow you to specify the exact dimensions of the text frame
  • Alignment: Horizontal and vertical alignment options are available
    • Horizontal: The first row of alignment buttons are for left, center, right and justified alignment
    • Vertical: The second row of alignment buttons are for top, middle and bottom alignment
  • Spacing: Various spacing options are available
    • Character: Space between individual characters, the default is 0
    • Line: Space between lines of text, the default is defined by the font and varies based on font size
    • Paragraph: The amount of space between paragraphs, default is 0
  • Decoration: Allows adding underline, double underline and strikethrough to text
  • List: Causes paragraphs to be bulleted or numeric lists
  • Transform: Provides an option for transforming all text to uppercase or lowercase

Animating text layers

The size, color and position of text can be animated in the Transition Designer and Behavior Designer. Properties that cause text to reflow are not animatable, such as width of the text layer independent of the font size.

Missing fonts

If a font is missing, it will be displayed in the canvas but will be replaced with a substitute font when the layer is edited.