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.

To add an element on macOS, use the Add Bar at the bottom of your screen. You’ll see five options: the Asset Panel (represented by a search icon), stacks, text, images, SF symbols, and the Library. Read more about the Add Bar here.

You can either drag an element onto the canvas/into a page/stack, or you can click on an element and click on the canvas/in a page/stack to place it.

To add an element on iOS, swipe left where you'll see two tabs: Elements and Components. Tap on an element to add it to the page or the stack you have selected.