Designing with real materials.
We’ve introducing a new native element in Play: Button.
Designing with “real materials” is one way we believe product teams can create more streamlined workflows and better products—cutting out all the back and forth between what design has created and what engineering needs to translate to code.
In this article we’re going to explore this concept using one of the most common UI elements—the button.
We’ve all used enough apps to know that nearly every one uses buttons. They may look or act different, but the idea is the same across the board. You can spend time designing buttons from scratch, but we wanted to make something so important even simpler and more powerful, which is why we’re introducing a new native element: Button.
Unlike traditional vector-based drawing tools, Play is a native design tool, which means we can harness the power of UIKit, and specifically UIButton, in our product. This means when you’re using Play, you can incorporate Buttons directly into your actual designs, not just into your code.
Tapping in to Apple’s UIButton
The new native button in Play is an easy way to design with the same UIButtons used in Apple’s UIKit. Apple introduced the UIButton Configuration API in iOS15 and describes is as “a control that executes your custom code in response to user interactions.” UIButton makes it easier to build complex, responsive buttons for iOS.
Apple created its UIKit to provide the “core objects that you need to build apps for iOS.” This framework has built-in visual and behavioral features for each native element in UIKit, which allows developers to start with basic building blocks that they can further customize to fit their specific needs. This of course applies to SwiftUI as well, which provides a more simplified abstraction layer to UIKit.
Since UIKit and SwiftUI are the foundational building blocks of iOS apps, how can we use these same materials when designing visually in addition to programmatically?
Giving designers access to native iOS elements can improve your workflow in two ways.
First, it saves you time by not building a button from scratch. “When you add a Button, you instantly have a great looking button as a single layer,” says Alex, one of Play’s Product Designers. “You’ll need to make fewer adjustments to achieve what you have in mind.”
If you don’t have a solid idea in mind, Button in Play makes it easy to explore different configurations. Not including colors and text variation, there are 18 different layouts to choose from! Instead of tediously designing each layout, you can explore our presets in under one minute.
Second, you’ll save time during the designer-to-developer handoff. Developers can take values from Play and input them into the UIButton framework. It’s quick, easy, and it takes any and all guesswork out of building something as simple as a button.
What engineers need to do to translate your designs into code
On the left side of the image below is a simple button you have designed. On the right side is all the code an engineer needs to write in order to render this button properly in Xcode.
When an engineer looks at something as simple as a button, this is what they need to code in order for that button to render properly. Extrapolate that into entire components and pages and the time it takes just to lay out these views grows very quickly.
How is this gap bridged today? In most of our current tools, we get something that looks like this:
Designers usually ship their designs, which are used as a reference for engineers to use as a starting point. But how useful is for this engineers? Is there a better way?
In Play, we want to give you the ability to create with “real materials.” So when you’re designing even something as simple as a button, you’re creating with the same properties an engineer will need when coding it. Which means that what you get in hand-off is already a step or two closer to the final engineering product.
Using Play’s Native Button
Now that we’ve talked about the “why” let’s take a deeper look at the “how.” We’ve taken all the properties an engineer will need when writing code to render a button and have surfaced them up in Play for you to use when designing.
You can choose from differtent types of buttons—a regular button, capsule, icon, and mini button. After you have chosen your initial type you can adjust its size, style, and tint color. Additionally, you can add text, icons and a subtitle. When adding an icon you can choose if it’s leading, trailing or on the top or bottom.
And of course, you can add additional properties like padding, margin, borders, effects, corner radii and more you can use to customize the look of your button.
You can read more about how to use Play’s native Button on our support site below:
TLDR!
As we know, product design doesn’t end with your design file. In many ways, it is the first step to the rest of the journey. Ultimately, what matters most is how your product vision gets built and put into production. We’re hoping that by making more native elements from iOS accessible to designers, we’re taking another step toward creating a new type of product design platform.
You can learn more about Play on our website or install Play from the App Store today!
