- 200
- 199 422
Create with Play
United States
เข้าร่วมเมื่อ 6 ก.ย. 2019
Meet Play, a design & prototyping tool built on the power of iOS and Swift.
Play combines a familiar design canvas with the power of Apple’s native iOS elements-from date pickers and maps, to Swift Charts and input text fields. These are built directly into Play, giving you native functionality right out of the box. 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.
Play lets teams move faster, save time, and create higher quality mobile products.
Play combines a familiar design canvas with the power of Apple’s native iOS elements-from date pickers and maps, to Swift Charts and input text fields. These are built directly into Play, giving you native functionality right out of the box. 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.
Play lets teams move faster, save time, and create higher quality mobile products.
Anatomy of an Interaction in Play
In this video, you'll learn about Triggers and Actions, the basics of creating an interaction in Play. Interactions are created by placing a trigger on an object, then an action on the trigger. You can build on the basic interaction with additional actions, loops, conditions, and helpers.
Learn more on our support site: learn.createwithplay.com/en/articles/8491415-introduction-to-interactions
Install Play for macOS and iOS: createwithplay.com/download
Get more info on Play, a collaborative design software that combines a familiar canvas with iOS gestures, UI elements, and SwiftUI: www.createwithplay.com
#Interactions #DesignTool #CreatewithPlay
Learn more on our support site: learn.createwithplay.com/en/articles/8491415-introduction-to-interactions
Install Play for macOS and iOS: createwithplay.com/download
Get more info on Play, a collaborative design software that combines a familiar canvas with iOS gestures, UI elements, and SwiftUI: www.createwithplay.com
#Interactions #DesignTool #CreatewithPlay
มุมมอง: 89
วีดีโอ
Hide a Card's Child using a Child At Function in Play
มุมมอง 5712 ชั่วโมงที่ผ่านมา
In this video, you'll learn how to hide a child of an object in Play using a Child At function in the Expression Editor. This function is particularly helpful when looping through a stack of objects and targeting a child of each object. Learn more on our support site: learn.createwithplay.com/en/articles/10104777-functions-in-the-expression-editor Install Play for macOS and iOS: createwithplay....
Pull Down to Stretch a Header with a Play Prefab
มุมมอง 19019 ชั่วโมงที่ผ่านมา
Learn about Play's Elastic Header prefab. Prefabs let you add and customize an interaction in seconds. Test the prototype on your iPhone: appclip.apple.com/id?p=com.createwithplay.playgen3.Clip&pid=3dab46587d0a00SF505&e=0 Customize the prefab in Play: dashboard.createwithplay.com/o/share3/3dab46587d0a00SF505/duplicate Learn more on our support site: learn.createwithplay.com/en/articles/9715531-...
Stack and Unstack Objects with a Play Prefab
มุมมอง 16219 ชั่วโมงที่ผ่านมา
Learn about Play's Stack & Unstack prefab. Prefabs let you add and customize an interaction in seconds. Test the prototype on your iPhone: appclip.apple.com/id?p=com.createwithplay.playgen3.Clip&pid=3dab788d09b980zTRdT&e=0 Customize the prefab in Play: dashboard.createwithplay.com/o/share3/3dab788d09b980zTRdT/duplicate Learn more on our support site: learn.createwithplay.com/en/articles/9715531...
Drag and Drop to Rearrange List Items with a Play Prefab
มุมมอง 6019 ชั่วโมงที่ผ่านมา
Learn about Play's Drag and Drop List prefab. Prefabs let you add and customize an interaction in seconds. Test the prototype on your iPhone: appclip.apple.com/id?p=com.createwithplay.playgen3.Clip&pid=3dab65318200800jFxb&e=0 Customize the prefab in Play: dashboard.createwithplay.com/o/share3/3dab65318200800jFxb/duplicate Learn more on our support site: learn.createwithplay.com/en/articles/9715...
Stick Headers the the Page While Scrolling with a Play Prefab
มุมมอง 10319 ชั่วโมงที่ผ่านมา
Learn about Play's Sticky Header prefab. Prefabs let you add and customize an interaction in seconds. Test the prototype on your iPhone: appclip.apple.com/id?p=com.createwithplay.playgen3.Clip&pid=3dabeadbf03700J7LTy&e=0 Customize the prefab in Play: dashboard.createwithplay.com/o/share3/3dabeadbf03700J7LTy/duplicate Learn more on our support site: learn.createwithplay.com/en/articles/9715531-p...
Drag an Object Around the Screen with a Play Prefab
มุมมอง 16714 วันที่ผ่านมา
Learn about Play's Drag Around prefab. Prefabs let you add and customize an interaction in seconds. Test the prototype on your iPhone: appclip.apple.com/id?p=com.createwithplay.playgen3.Clip&pid=3dab5fe9141400whWvw&e=0 Customize the prefab in Play: dashboard.createwithplay.com/o/share3/3dab5fe9141400whWvw/duplicate Learn more on our support site: learn.createwithplay.com/en/articles/9715531-pre...
Flick an Object to the Boundary with a Play Prefab
มุมมอง 20414 วันที่ผ่านมา
Learn about Play's Flick to Bounds prefab. Prefabs let you add and customize an interaction in seconds. Flick to Bounds prefabs are often paired with Drag Around prefabs. Watch this video to learn about Drag Around prefabs: th-cam.com/video/ZfCaVpEjTBM/w-d-xo.html Test the prototype on your iPhone: appclip.apple.com/id?p=com.createwithplay.playgen3.Clip&pid=3dab5fe9141400whWvw&e=0 Customize the...
Scroll to Show and Hide a Header with a Play Prefab
มุมมอง 34714 วันที่ผ่านมา
Learn about Play's Hide Header prefab. Prefabs let you add and customize an interaction in seconds. Test the prototype on your iPhone: appclip.apple.com/id?p=com.createwithplay.playgen3.Clip&pid=3dabe7385157806FqIB&e=0 Customize the prefab in Play: dashboard.createwithplay.com/o/share3/3dabe7385157806FqIB/duplicate Learn more on our support site: learn.createwithplay.com/en/articles/9715531-pre...
Animate Objects As You Scroll with a Play Prefab
มุมมอง 59914 วันที่ผ่านมา
Learn about Play's Animate Children on Scroll prefab. Prefabs let you add and customize an interaction in seconds. Test the prototype on your iPhone: appclip.apple.com/id?p=com.createwithplay.playgen3.Clip&pid=3dac0affc37500NB6OW&e=0 Customize the prefab in Play: dashboard.createwithplay.com/o/share3/3dac0affc37500NB6OW/design Learn more on our support site: learn.createwithplay.com/en/articles...
Play's Prefabs Livestream
มุมมอง 28921 วันที่ผ่านมา
This livestream focused on prefabs! Play's prefabs are advanced, already-created interactions that make prototyping faster. Try the prototype on your iPhone by tapping the link below on your iPhone↓ appclip.apple.com/id?p=com.createwithplay.playgen3.Clip&pid=3db72fcbce7080cKJ15&e=0 Install Play for macOS and iOS: createwithplay.com/download Get more info on Play, a collaborative design software...
Playing System and Custom Haptics in Play
มุมมอง 242หลายเดือนก่อน
In this video, you'll learn how to add haptic feedback to your designs in Play. You'll learn how to use one of Apple's system haptics or upload custom haptics through a JSON file. You can pair any distinct trigger with a Set Haptic action. Learn more on our support site: learn.createwithplay.com/en/articles/10297108-set-haptic-action Install Play for macOS and iOS: createwithplay.com/download G...
Creating and Using Arrays in Play
มุมมอง 391หลายเดือนก่อน
In this video, you'll learn how to create an array in Play as a variable, use the array's index and values through interactions, and use a Set Array action. Check out the example project from this video: dashboard.createwithplay.com/o/share3/3da054ce687800eNxlS/duplicate Learn more on our support site: learn.createwithplay.com/en/articles/10298513-arrays Install Play for macOS and iOS: createwi...
Overview of the Expression Editor in Play
มุมมอง 243หลายเดือนก่อน
Overview of the Expression Editor in Play
Trigger Properties in the Expression Editor in Play
มุมมอง 95หลายเดือนก่อน
Trigger Properties in the Expression Editor in Play
Adding Strings in Play's Expression Editor
มุมมอง 66หลายเดือนก่อน
Adding Strings in Play's Expression Editor
Stagger Each Child's Actions in a Loop Children Interaction in Play
มุมมอง 88หลายเดือนก่อน
Stagger Each Child's Actions in a Loop Children Interaction in Play
Target Multiple Children at Once with a Loop Children Action
มุมมอง 58หลายเดือนก่อน
Target Multiple Children at Once with a Loop Children Action
Two Ways to Add Interactions Based on a User's Scroll in Play
มุมมอง 112หลายเดือนก่อน
Two Ways to Add Interactions Based on a User's Scroll in Play
Object and Device Properties in the Expression Editor in Play
มุมมอง 75หลายเดือนก่อน
Object and Device Properties in the Expression Editor in Play
Controlling Audio Files with Actions in Play
มุมมอง 1732 หลายเดือนก่อน
Controlling Audio Files with Actions in Play
Migrating Projects from Play 1.0 to Play 2.0
มุมมอง 502 หลายเดือนก่อน
Migrating Projects from Play 1.0 to Play 2.0
Creating Light and Dark Mode Color Styles in Play
มุมมอง 1042 หลายเดือนก่อน
Creating Light and Dark Mode Color Styles in Play
Using the Native Navigation Bar in Play
มุมมอง 1812 หลายเดือนก่อน
Using the Native Navigation Bar in Play
Switching Pages with a Native Tab Bar in Play
มุมมอง 1182 หลายเดือนก่อน
Switching Pages with a Native Tab Bar in Play
Creating a Custom Tab Bar with a Page Loader in Play
มุมมอง 2482 หลายเดือนก่อน
Creating a Custom Tab Bar with a Page Loader in Play
Great tutorial, really love what you guys are building! How can I have the heart icon change colors from white to red when the icon is tapped ?
nice!
Can we get values from an api?
That's coming soon!
I'm really enjoying this Livestream! I noticed that Play refers to 'dragging' (what apps like ProtoPie or Principle call it) as 'panning,' which seems to be an umbrella term for interactions like dragging, swiping, and flicking. I know this prototype was made in Play 1.0, but I’d love to get prototypes from these Livestreams to duplicate and learn from. I haven’t been able to find them in the app-any guidance? 🙏😃
Hi Jon! You're right; panning is an umbrella term (from Swift) that includes dragging, swiping, etc. We're publishing a pan video series later today, but we'll create more like this soon!
Just FYI, I was watching this video, because if I search "Play" on the App Store, I can't find your app. I searched for "Play - Desktop", the title that's used in the video above; and still couldn't find it. Please don't make it so hard to use your wonderful product.
Why did you add the array to global and not to array?
@ 1:00s
Array is the page name! Global variables are necessary to use variables across different pages. You can do a page or global variable in this case.
Where Can I download the play project for this?
Is it possible to connect ipad os with ios?
Not yet!
Hi, thanks for the livestream. The drag and drop list prefab only works on the top item in the stack for me.
On no! We'll look into this.
Hi Harcourt, I’m still in the early stages of learning Play, but I’m absolutely loving the livestreams and tutorials so far. The prototypes I’ve seen posted on LinkedIn are nothing short of amazing-seriously inspiring stuff! I’m reaching out because I’ve been experimenting with the prefabs, and while I really like their out-of-the-box functionality, I’m struggling to understand how to extend their capabilities. For example, with the ‘Flick to Bounds’ prefab, I can’t seem to attach a condition or figure out how to capture the object’s coordinates. My goal is to set rules based on the object’s position on the X and Y axes-for instance, creating an interaction that changes the background color based on its location. I guess my broader question is: how can I take a prefab and build on it? Should I be unlocking it? Using expression panels? Maybe sending data into a variable and leveraging an event listener to capture values, which could then run into a set of conditions feeding into Set Properties? I realize this is a lot of detail-thank you so much for your time and any guidance you can share!
Hi Jon! To edit a prefab, you need to unlock it and edit/add nodes inside. You can't add a prefab to another interaction. Let me know if that answers your question :)
🔥
this FINALLY looks like something i may use as a replacement for protopie
Woohoo!
Thanks so much for these long-form videos. I'm having trouble locating some of these files to duplicate into my drafts and learn from. For example, I couldn't find the livestream file in Play's lobby. Would it be possible to add these files there or provide them another way? 😊 I’d love to go through the patches slowly. Also, some elements (like Event and Event Listeners) weren’t working in the Livestream previously, but they might be functional now, and it would be great to explore them. Thanks so much! 🙏
These are for Play 1.0-happy to make any files for Play 2.0. Just email me!
Such an amazing livestream. Very useful!
Thank you, Vikas!
Heads up… The app clip is not showing the same prototype as what’s in the live stream.
Try this one! appclip.apple.com/id?p=com.createwithplay.playgen3.Clip&pid=3db72fcbce7080cKJ15&e=0
I love these interactions to showcase prefabs. Watching the video now and will get to work ... maybe... over the long weekend. Thanks Fede and Dan!
I am keen to try this but I use Sketch. I see it does Figma imports but can it do Sketch? Thanks
Unfortunately, no. You could try importing from Sketch into Figma and then into Play?
I genuinely can’t believe how powerful this tool is!! Honestly unbelievable the number of features and how nice the UI is. Thank you for such a wonderful tool! I know Apple is gonna soon just acquire y’all!
Thank you for this! Could you explain how to change the page background colour when moving between cards? There doesn’t appear to be a “set background colour” action
Sure! Check out this video: th-cam.com/video/NcdOiwPu28I/w-d-xo.html
would reaaally love a link so that I can access this project!
We redid this for Play 2.0. Check it out here: dashboard.createwithplay.com/o/share3/3d51235cae9300ubt44/duplicate
Is there a way to set the navigation area header copy dynamically using variables?
hi! is there any tutorial on how to create the entire application from scratch ? I'd love seeing how the entire to do list from its beginning was done :)
@yousr9847 Not right now! That's an interesting idea to create. Maybe we'll do a live stream. If you want to learn how to create another prototype from scratch, we just added a course to our community. As a bonus, we're giving users who complete it and post their finished App Clip a free month of Play Pro. community.createwithplay.com/c/start-from-scratch-build-a-gallery-app/
Loving this feature! For anyone looking to design custom haptics, our platform's got you covered. Can't wait to see what everyone creates!
Hey, I did all the steps, but the prototype is not working for me. Even on picking files from templates, none of the prototypes worked for me.
Hi! Make sure you update the iOS app to Play 2.0 as well.
Is it possible to change the font of the native navbar / tab bar elements? Also, what about changing the color of the Save/Cancel/etc. left and right elements?
You can't change the font right now, but you can change the color by just using custom words or symbols.
hey guys, when I try to add nodes on the Toggle Tap - SecondTap, the function doesn't work. How can I fix this?
Hi! We fixed this bug in the most recent release, so update to 2.3!
@ nice job!
Can not find the Page Event trigger
It's an Event trigger with the Type: View and Event: On Load.
its not usefull in real world!
🔥
What are you using to run the prototype? Simulator? iPhone? Something else?
We use an iPhone! We're showing it on the screen using a program called Bezel.
How the hell can I enable that iPhone preview window on the right side? :)
Hi! The iPhone "preview" is just an iPhone mirrored with a program called Bezel.
Very useful! But there are too many youtube ads
What if I have more than 2 modes? Light, Dark, Light High Contrast, Dark High Contrast, etc.
We don't support more than two modes at this time! You can adjust objects' colors with interactions using the Expression Editor for additional variations.
Hi i’m an italian university student, i’m studing web design and I literally fall in love with play 2.0 and your tutorial, you are amazing! I’ll watch every single video you’ll upload❤
Thank you! 😀
Would be great for these videos if you could link the image data/reference designs! Great content.
Great idea! We'll try to do this going forward.
1:43 Should we implement a Shift + Left Click shortcut to open the Expression Editor? So we can click anywhere on the Value property to open the editor with just one click.
Cool idea! I'll suggest it to my team.
I adore Play)🐸
Thank you!!
device.screenHeight * 0.5 is not working for me, it produces an error when I try to add 0.5 value at the end
Hi! Can you email support@createwithplay.com with a screenshot? Thanks!
I had the same. Try with "0,5"
I don’t understand all these comments from Windows people. If you actually wanted to develop for the iPhone or other Apple platforms, you would already own a Mac. However, this app is also available on the iPhone and the iPad.
Question-are these older videos still relevant in Play 2.0? Thanks!
Somewhat! The UI is out of date and interactions are a bit different.
First time I’m seeing Play in action. Saw this featured on Sean Allen’s channel. I’m a UX/Product Designer and a total SwiftUI novice (only have html/css experience). I am building an app with Claude (and making a shocking amount of progress). I see this as a way to make my app user friendly because my app has the functionality but I am unable to design it because I don’t know SwiftUI. And Claude is a bad designer. When it comes to conditions in Play, I wish that they were less technical. I wouldn’t know for example scrollOffsetY >= 8. I’m not sure if anything can be done on your end to make it designer friendly but this would be one place where I would get stuck beyond prefabs (which sound awesome by the way). Excited to give Play a try ASAP!
By the way, I could see myself skipping Figma altogether and going straight into Play for design.
Hey!! I recently designed an app that looks great on my model iPhone, but when opened on a different phone, the layout is all over the place. Could anyone help me with how to auto-layout elements so they resize and adjust based on the device they’re being viewed on? Like is there a setting i’m missing or do i have to put all the objects into a Stack in order for it to resize?? I’d be really grateful for any guidance!
Hi! Make sure the width is set to 100% or Fill rather than a fixed value.
Hey!! I recently designed an app that looks great on my model iPhone, but when opened on a different phone, the layout is all over the place. Could anyone help me with how to auto-layout elements so they resize and adjust based on the device they’re being viewed on? Like is there a setting i’m missing or do i have to put all the objects into a Stack in order for it to resize?? I’d be really grateful for any guidance!
Hi! Make sure the width of all the objects is Fill or 100%. That way, they'll stretch to fill the whole screen, regardless of what that screen size is.
I don't have .value. It gives me error when I type .value
What object are you writing .value after? Feel free to email support@createwithplay.com with more details and we can help!
Which website ?
createwithplay.com
This is cool. Please share more ❤
We need drag and drop list
@Ilya_pekhterev This is in Play now as a prefab! Drag and Drop List.
We need drag and drop list
We need drag and drop list