Elements are the basic building blocks used to create designs in Play. Elements are color-coded green in Play. Unlike components, which are color-coded pink, elements do not have states and are not saved to a component library.
There are two types of elements in Play, basic elements and native elements. Basic elements are typical parts of UI, like stacks, text, icons, and images. You'll use these to create most of your design.
Play’s native elements let you use controls and views from Apple’s UIKit in your design. In each native element’s Element Settings Panel, you can adjust real SwiftUI properties specific to that element. This lets designers learn about and customize real native elements, and it makes handoff much easier for developers since these properties are 1:1 with SwiftUI properties.
Each native element also has built-in functionality. You don’t need to add an interaction to make the native slider slide or the switch change states - we did that for you! You can add additional functionality using Play’s native element triggers for specific elements. Read about all the native element triggers here.
Adding an Element
macOS
You can view a full list of all available elements by clicking the green plus icon in the top left corner of the app or using the shortcut OPT + A.
Read more about adding elements to your page.
Managing Elements
When you right-click on any object, you'll see several options.
Copy Link - creates a share link for your project, but it targets the selected object specifically. When someone clicks the share link, Play will open the project and center the selected object on the screen. They will still be able to view the rest of the project.
Copy/Paste - Copy or paste an object or an object's properties.
Add to New Stack - Add the selected object to a V, H, or Z stack. The parent stack will have Auto height and width unless it is a Z stack which cannot have Auto sizing.
Auto Fill - Text and image elements (and groups that include them) have an “Auto Fill” option. You can choose to fill your image with Unsplash photos or your assets. You can choose to fill your text with a selected placeholder.
Duplicate - Duplicate the selected object. If the selected object was in a container, the duplicated object will also be added to the container.
Create Component - Turn your selected object into a component.
Available Elements
Media Elements
Layout Elements
Native Control Elements
Native Picker Elements
Date Picker (Three variations available)