Its finally here—a breakthrough way to share native iOS prototypes.
You can now share native prototypes with Apple App Clips—the easiest, fastest, highest quality way for people to experience your work instantly on their iPhone.
No web simulations. No app installs. No friction.
🎉🖥️We’re excited to announce that Play is coming to desktop!
We’d like to share our vision, why we’re expanding the Play platform, and what you can expect… (1/9)
👀Sneak peek!
Until now, the flexibility of designing products on a freeform canvas has been removed from the realities of how products actually work. This disconnect is why it's so difficult to understand the capabilities and constraints of the platform you’re designing for.
Spatial Card using Gyroscope and Scroll Triggers.
› Multiple Layers of Depth
› Specular Light
› Shadow Motion
› Pagination
Try it out on your iPhone — No need to install Play!
Inspired by TV &
@jmtrivedi
Play is the best way to design & prototype mobile apps.
Thanks to the power of iOS & SwiftUI.
Start with Native Elements:
› Tab Bar
› Apple Maps
› Date Pickers
› Segmented Controls
› Material, Vibrancy & Progressive Blur
› Text Fields
› Swift Charts & Gauges
› SF
🎉It’s official—Play for macOS, and our new iOS app, are in public beta and open for anyone to use! If you're designing a mobile app, we’re building Play for you.
Install Play on macOS & iOS:
🔸Play combines a familiar design canvas with the power of
What sets these two iOS Date Pickers apart?
The first one is a vector drawing that took hours of work to make. The second is an actual Date Picker that took five seconds to set up—and that's not all!
[↓]
New Play Library! Fully customizable Components with built-in States and Interactions. Perfect for design sprints or quick prototypes for testing. Releasing this week to our Beta users…we’ll be adding a small batch of new users next week as well!
#createwithplay
#ux
#design
Today,
@JordanAmblin
from Raycast shared an amazing prototype that inspired us to see if we could recreate it using Play.
You can experience it on your iPhone by tapping the link below (no app install needed!)
This prototype uses:
› Native Pan Gestures
› Progressive Blur
›
Introducing Charts 📊!
Now it is easier than ever to design data-intensive applications with low effort.
› Line, Area, Plot, Bar
› Configure Data & Shape
› Show Gridlines, Labels & Ticks
Come back tomorrow to see how you can import Charts into Xcode!
🤔 Too many unknowns!
Different device sizes, resolutions, and monitor pixel density all create guesswork for designers and engineers that flies under the radar until your app is running on a real device.
How are we working to solve this?👇
New to Play?
Get started with our Play 101 course. The course explains concepts with real-world examples, in writing, and in video form.
Learn about:
› UI Overview
› Layout
› Native Elements
› Components & States
› Navigation & Modals
› Pan Gestures
› Scroll Triggers
Why draw rectangles when you can design with native iOS elements?
Play combines a familiar design canvas with the power of Apple's native iOS elements. Design mobile apps with real, native & interactive:
› Apple Maps
› Text Fields
› Swift Charts
› Date Pickers, Sliders &
Progressive Blur is now available in Play!
@sdw
let us know what you think of Progressive Blur once you try it out. You can also animate the values with panning and scroll triggers.
› Try the prototype on your iPhone:
› Download Play on macOS & iOS
Add delight to your prototypes with continious scroll effects, triggers, actions & pagination (with Rubber-banding!).
Tap on the link with your iPhone to experience this native prototype!
Already have designs in Figma but need the power of Play?
Now you can copy from Figma and paste into Play—no plug-ins needed.
It supports:
› AutoLayout
› Images
› Fixed Elements
› Background Blur to Material Automatically
Already available in our new macOS App as a
Mirror apps be gone! One of the most powerful features in Play is the ability to interact with your design in its native environment, in real-time. Luckily, that won’t change when we roll out Play for macOS. 👇
We’re working to improve collaboration by creating a space where design & dev can work with the same materials & speak a similar language.
Play uses designs to dynamically generate SwiftUI code in real-time to assist with laying out views in Xcode.
Thanks to App Clips in Play you can experience this native prototype instantly on your iPhone with no app install!
We combined haptics, progressive blur, spring animations, and logic.
Tap the link below from your phone to experience it!
Buttery smooth interactions!
With Play, you can create area-based interactions that trigger when you enter, exit, or release an object inside of that area using the Pan To trigger.
Tap the link below to experience it with your iPhone. Thanks to the power of App Clips, no
Play is the easiest way to learn SwiftUI.
Design anything and it will generate code in real-time.
We have big plans for our code export feature:
› UIKit
› Interaction & Navigation
› Styles & Tokens
A new version of Play (1.9.0) has shipped with more demo project and templates in our Explore section.
In the Gallery you'll find demo projects & projects from our livestreams. Templates has common UI & interaction patterns and full templates for you use in your projects.
All
Apple's SF Symbols are a core feature of Play. You can now choose between different rendering modes!
› Monochrome
› Hierarchical
› Palette
› Multicolor
You will also be able to use variable color to communicate strength or progress over time.
What’s special about how Play works across macOS & iOS?
> Sync multiple iPhones to see your actual design across every device size
> Edit from iOS, or macOS, with changes synced in real-time across every synced device
> Your prototype functions across every iPhone device size
Have you ever wanted to simultaneously test your designs on more than one phone? Or test on a device you didn't have?
We have some great news!
In Play for macOS, you'll be able to preview your work on as many devices as you want. Check it out below 👇
Sharing prototypes with App Clips is a game-changer. From user testing to sharing with teammates, your native prototypes will adapt to any iPhone model and users won't need to install an app!
We added a few examples to our homepage to showcase the power of Play.
Check it out!
BIG update to Play! You can now design with Apple’s native Navigation Bar (UINavigationController).
Play is the first design tool to surface all of Apple’s native nav bar properties—fully customizable down to the color, title, nav bar items, and interactions.
We’ve
Check out this amazing blobs prototype made with Play by
@azhassan_
using Blend Modes and Compositing.
Tap this link with your iPhone to experience it. No need to create an account or download an app.
How would your portfolio look like if it could take advantage of the medium you work in?
We created a template that is completely interactive and full of little details that could help you tell your story.
📲 Experience it on your phone!
Designing a mobile app? Check out the new Beta of Play for macOS & iOS!
👉
🔸Play combines a familiar design canvas with the power of Apple's native iOS elements, access to device hardware, and interactions that use Core Animation.
🔸Design
2022 was an exciting year for Play...and we have even bigger plans for 2023!
If you want a glimpse of what's to come, check out this project on your phone 👇
Interactions in Play are more advanced than Figma and less complex than Origami.
› 700 combinations of triggers & actions
› Native Drag, Pan & Scroll Interactions
› Uses Apple's Core Animation
› Real Input Textfields!
› Access to Device Hardware
› Not a "Mirror App",
Play for macOS is the best tool to design with SF Symbols. You can use all of these:
› More than 3K Symbols with multiple categories
› Control Weight, Size, & Scale
› Rendering Modes
› Variable Color
We are excited about the new updates that Apple has released during WWDC
For our Gyroscope release, we made it easy to understand how the iPhone's device rotation works.
We created an interactive Playground where we explain how each axis works and how tilt or rotation affects an object. We also made a few cool examples for you to check out!
You
The
@CreateWithPlay
team keeps a close eye on the design community, so we see a LOT of cool stuff throughout the year.
It's time to highlight some of the incredible interactions and prototypes we saw in 2022. Please, join in by adding your personal favorites!
Some internal testing of our upcoming launch of Interactions 2.0...
This is a huge update that will include:
› Variables
› Conditional logic
› Interactions support on iOS
› Improvements to UI & UX of Interactions Mode
› New recommended presets
› Ability to write advanced
Skip Origami’s steep learning curve.
Origami is a powerful tool, but it can take a long time to prototype something. In Play, we're working to balance power, speed, and ease of learning.
If we look at the Panorama example below in Origami, you can see that you need to:
› Use
Play Web 1.0 is live! Play Web lets you create projects, make teams, upload assets and custom fonts, create type, color & spacing styles and grab Swift snippets. More exciting updates for Play Web are on the horizon! 🤩
#design
#productdesign
#ios
#ux
#uxdesign
#uxui
#appdesign
Join our macOS beta!
We’re starting our private beta in Dec with a small group of Play users and rolling it out to more people in Jan.
You can join by:
📲Installing Play from the App Store
🔔Check the notifications tab for a link to sign up!
No Variants Needed!
Expanding a Native Segmented Control in Play is as easy as typing.
You can also interact with it on the canvas and easily add actions to interact with other pages.
Plus:
› Responsive by Default
› Automatic Light & Dark Mode
› Add Triggers & Actions
Cover Flow is back, now with Device Motion!
In our next release you will be able to combine Gyro, our new Scroll Effects & Scroll Triggers to prototype interactions like these.
Doing an async User Testing session?
Get feedback directly inside the prototype thanks to Play's Native WebViews. You can embed any form like
@TallyForms
,
@typeform
or Google Forms and recieve feedback of your new explorations and ideas.
Just share an AppClip Link.
› No
Interactions 2.0 Sneak Peek!
Apple is shifting to a more playful and dynamic iOS Design Language adding rubber-banding in different areas of the OS (ie: Control Center).
You will be able to do this in Play once we release our next version of interactions using variables,
Interactions in Play are performant, interruptible, and use Apple’s Core Animation to render your prototype with the same technology as a finished mobile app.
Check out our new macOS and iOS apps today!
Tired of using screenshots of Maps in your designs?
Spending too much time creating fake Date Pickers in your prototypes?
Using external Figma plugins to design Charts?
With Play you can design with native, interactive, and customizable iOS elements.
Download Play on macOS &
💡Contextual toolbars.
Inspector panels are useful in our tools but how many miles do we move our mouse everyday? 😆
On Play for macOS, we added contextual toolbars that dynamically change based on the object you're working on.
What do you think?
It’s time for design tools to stop treating interaction + motion as an afterthought.
With Play macOS, your desktop becomes a control center for adding interactivity to your designs.
Have you ever used a screenshot of a map to fake a prototype?
In Play, you can use Apple's Native Maps and interact with them. You can add pins at custom locations among many other features:
› Pan, Zoom & Rotation Gestures
› Standard, Satellite, and Hybrid Map Types
› User
At Play, we love
@SlackHQ
's new Catch Up feature.
For fun, we prototyped a quick version of it using:
› Continious Panning Gestures
› Scale & Position Motion for Upcoming Cards
› Snapback to Position (for an unfinished gesture)
› Native Text Fields
The best part? You