From titles to paragraphs, captions and more, text elements are a key part of most UI. Play lets you customize your text while staying within the bounds of technical feasibility. You’re able to edit text in the Element Settings Panel.
In macOS, you can add text to your page, canvas, or selection using the T key.
Text
Use the Text property to type in your copy. You can also add placeholder copy that will pre-populate the text element with a headline, paragraph, name, or other selected placeholder type. The shuffle button in the context menu lets you shuffle through different copy of the same type.
Type
Next, you can select the text element’s font. By default, your text element will use a System Font. You can also use a style; either the native iOS System Styles that we provide for you or your own Type styles that you create yourself. You can select any style by clicking on the four-circle icon in the top right corner of the Text Settings Panel.
Font & Weight
The Font property lets you choose a font for the text element. By default, it's the System Font, but you can use any of Google Fonts or upload your own on a paid plan. The weight property will let you select any weight variation that the selected font allows.
Size & Letter Spacing
The size property lets you adjust the text size of your text element. The letter spacing property lets you choose how much space is between each letter.
Design & Width
If you have a System Font selected, you'll see Design and Width properties. Design lets you choose how the text appears. The options include Default, Monospaces, Rounded, or Serif text.
If Default design is selected, you can also set the width to Standard, Compressed, Condensed, or Expanded.
Style
If you've selected a Type style, the properties in the Text Settings Panel will switch to one property called Style where you can select one of your type styles. If you wish to revert back to the default System Font, you can click the little dot next to this property.
Color Fill
Using the Fill property, you can select the text element’s color. You can add a new color style by tapping the property’s four circle icon in iOS or opening the Styles Panel in macOS.
Alignment
Text elements have horizontal and vertical alignment. You can align the text to the left, center, right, or justified. You can also vertically align the text to the top, middle, or bottom of the text element.
Transform
Choose if you want your text element to be uppercase, lowercase, title case, or how you typed it.
Is Editable
When a text element is editable, it essentially functions as an input text field. When a user taps on the text, the keyboard will open, and whatever the user enters will be “saved” as the text element for the Play session.
Natively, UIKit does not support multi-line text fields, but you can use an editable text element as a multi-line text field.
Is Selectable
When a text element is selectable, users can double-tap it to display the native edit menu. They can drag the selector or use the native options that appear like Copy, Look Up, Translate, and more. All that functionality is built in and completely native.
Text Linking
You can link a URL from a word or phrase in a text element. Simply highlight the segment of the text that should link and paste the URL. Any user interacting with your prototype can tap the linked text and be taken to the URL in Safari.