- 160
- 171 691
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.
Counting the Characters in a Given String with an Expression Editor Function
In this video, you'll learn how to count the total number of characters in a given word or phrase using a String Count function in the Expression Editor. We'll use a hard-coded string value first, then we'll use the value that a user entered in a text field.
Learn more on our support site: learn.createwithplay.com/en/articles/9678351-expression-editor
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
#Functions #DesignTool #CreatewithPlay
Learn more on our support site: learn.createwithplay.com/en/articles/9678351-expression-editor
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
#Functions #DesignTool #CreatewithPlay
มุมมอง: 15
วีดีโอ
Generating an Image from a Keyword with an Expression Editor Function
มุมมอง 482 ชั่วโมงที่ผ่านมา
In this video, you'll learn how to use Unsplash Autofill from an interaction. You can use the Unsplash function within the Expression Editor to randomly generate an image based on a given keyword. The Unsplash function's parameter is a keyword, and we'll use the value a user enters into the text field as the keyword. Learn more on our support site: learn.createwithplay.com/en/articles/9678351-e...
Selecting a Random Value from a Range with an Expression Editor Function
มุมมอง 102 ชั่วโมงที่ผ่านมา
In this video, you'll learn how to use the Random Int function in the Expression Editor to return a random value within a provided range. The Random Int function has two parameters: number 1 and number 2. Each time the function is triggered, it will return a value between numbers 1 and 2, including numbers 1 and 2. Learn more on our support site: learn.createwithplay.com/en/articles/9678351-exp...
Rounding a Given Value to the Nearest Whole Number with an Expression Editor Function
มุมมอง 132 ชั่วโมงที่ผ่านมา
In this video, you'll learn how to use the Round function in the Expression Editor to round a given value to the nearest whole number. The Round function has one parameter, which is the value you'll enter to round. Learn more on our support site: learn.createwithplay.com/en/articles/9678351-expression-editor Install Play for macOS and iOS: createwithplay.com/download Get more info on Play, a co...
Starting From Scratch in Play
มุมมอง 22214 วันที่ผ่านมา
In this video, we'll create a card from scratch. We'll add objects to the canvas, and group them together using a horizontal (H) stack. Then, we'll customize the card's appearance by adjusting its settings. 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...
Designing a TikTok Style Card Carousel (Part 2)
มุมมอง 22014 วันที่ผ่านมา
In this video, we'll take the TikTok style card carousel we designed in Part 1 and add some interactions. We'll add an interaction to pause the video, play an SF Symbol animation, and open a native sheet. Watch the first video here: th-cam.com/video/2yl9R2CkWyM/w-d-xo.html Install Play for macOS and iOS: createwithplay.com/download Get more info on Play, a collaborative design software that com...
Two Ways to Display a Stepper's Value
มุมมอง 14714 วันที่ผ่านมา
In this video, you'll learn how to display a native stepper's value in a text element in your prototype. First, we'll use the Expression Editor to target an object's property. Next, we'll use a global variable, which allows us to display the stepper's value across different pages. Install Play for macOS and iOS: createwithplay.com/download Get more info on Play, a collaborative design software ...
Designing a TikTok Style Card Carousel (Part 1)
มุมมอง 24514 วันที่ผ่านมา
In this video, we'll start from scratch to create a TikTok style card. We'll then turn the card into a component and add multiple instances of the component to a stack to simulate TikTok's infinite scroll. 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:...
Changing an Object position when the keyboard shows and hides
มุมมอง 30914 วันที่ผ่านมา
In this video, we'll learn how to use keyboard events in Play to move an object to the top when the keyboard appears and back to its original position when the keyboard hides. Try it with your iPhone: appclip.apple.com/id?p=com.createwithplay.playgen3.Clip&pid=3d7a5d92099a00Qoloy&e=0 Duplicate this project to your Drafts: playapp.createwithplay.com/o/share3/3d7a5d92099a00Qoloy/duplicate Learn m...
Customizing a Prefab to Create a Dynamic Grid
มุมมอง 18614 วันที่ผ่านมา
In this video, you'll learn how to customize prefabs by changing the prefab's interaction nodes and adjusting the prefab variables through other interactions. We'll use a custom event, Segmented Controller Event triggers, and Set Event and Set Variable actions. Duplicate this project to your team to try for yourself: playapp.createwithplay.com/o/share3/3d79f5cea1ab0012hPN/duplicate Install Play...
Dynamic Type Support for Accessibility with Custom Fonts
มุมมอง 13114 วันที่ผ่านมา
In this video, you'll learn how to make your prototypes accessible by adding Dynamic Text support to Type Styles with custom fonts and Play-provided fonts. Once Dynamic Type is enabled, all text will scale up or down according to the user's device's Accessibility settings. Please note: the Dynamic Type switch will not appear if your Type style uses System Font. In this case, just use System Sty...
Editable and Selectable Text Elements
มุมมอง 8814 วันที่ผ่านมา
In this video, you'll learn how to make your text elements editable or selectable in Play. If a text element has "Is Selectable" turned on, the user can natively select any word or section in the text element and use the native edit menu that appears. If a text element has "Is Editable" turned on, the text element will essentially function as an input text field. While Apple's native text field...
Using SVGs in Play
มุมมอง 21214 วันที่ผ่านมา
In this video, you'll learn how to upload and customize SVG elements. SVGs are great for using custom icons in your Play prototypes. They're also helpful for Figma import as all vectors will now be imported as SVGs Learn more on our support site: Install Play for macOS and iOS: createwithplay.com/download Get more info on Play, a collaborative design software that combines a familiar canvas wit...
Loops Preview in Play 2.0
มุมมอง 40828 วันที่ผ่านมา
Loops let you apply actions to all the objects of a page or a stack. To learn more about the Loop Children nodes, watch this video: th-cam.com/video/tMedCnPiNh0/w-d-xo.html Install Play for macOS and iOS: createwithplay.com/download #Loop #DesignTool #CreatewithPlay
UI 2.0 Preview
มุมมอง 21528 วันที่ผ่านมา
When you spend multiple hours in a tool daily, the details are critical. Play 2.0 introduces a number new of UI improvements to make your workflow faster and easier. To learn more about the Conditions, watch this video: th-cam.com/video/xiYNEPxVnbw/w-d-xo.html Install Play for macOS and iOS: createwithplay.com/download #UI #DesignTool #CreatewithPlay
Expression Editor Preview in Play 2.0
มุมมอง 12128 วันที่ผ่านมา
Expression Editor Preview in Play 2.0
Prototyping with Set Property Actions in Play
มุมมอง 10928 วันที่ผ่านมา
Prototyping with Set Property Actions in Play
Three Ways to Create a Component in Play
มุมมอง 13628 วันที่ผ่านมา
Three Ways to Create a Component in Play
Checking a Text Field’s Value with a Condition
มุมมอง 8828 วันที่ผ่านมา
Checking a Text Field’s Value with a Condition
Tracking a User's Scroll with a Progress Bar
มุมมอง 18528 วันที่ผ่านมา
Tracking a User's Scroll with a Progress Bar
Play 101 | Part 5: Prototyping with Interactions
มุมมอง 31728 วันที่ผ่านมา
Play 101 | Part 5: Prototyping with Interactions
Play 101 | Part 4: Designing with Native Elements
มุมมอง 26728 วันที่ผ่านมา
Play 101 | Part 4: Designing with Native Elements
Play 101| Part 3: Components, States, and Instances
มุมมอง 34328 วันที่ผ่านมา
Play 101| Part 3: Components, States, and Instances
Play 101| Part 1: An Overview of Play's UI
มุมมอง 60928 วันที่ผ่านมา
Play 101| Part 1: An Overview of Play's UI
Play 101| Part 2: Designing Layout with Stacks
มุมมอง 47128 วันที่ผ่านมา
Play 101| Part 2: Designing Layout with Stacks
If I get the Starter or the Pro version, will the swiftui code exported handle all this logic as well ?
Guys you have an excellent tool. For non-coders like us who have zero knowledge in coding, please make it possible for us to export our code and convert it to a fully functional native iOS app using Cursor. That will be a game changer and would open up a massive market for you in developing countries.
Alhamdulillah
Nice vedio
Is it possible to create a layout adjustment logic without using static numbers? I’d like to detect if the keyboard overlaps an input field and, if so, adjust the positions of elements dynamically rather than using absolute values.
You can now! We have a new property called ".keyboardHeight" and ".keyboardHeightAccessory" that do exactly what you ask and are dynamic accross iPhones and keyboard sizes.
Protopie enters the chat.
Was there ever a second video for interactions with blur?
Any chance you could show more details around a list? Specifically how to do swipe and drag and drop actions?
Yes! Great suggestions. We'll create a tutorial for the swipe action soon. For now, you can check out the Templates section!
How can you do line segments?
Hi! What do you mean by this?
@@CreatewithPlay like the line segments between list items in iOS
Nice, very clear tutorial. One question on the last part: why are you using -3? I understand why the value is negative, but not why you're using the number 3.
Hey Erik! Thanks for the kind words. 3 was a nice value based on the height of my element that worked well for elements of that height and lower. You could aso divide by any number depending on how much space at the top you want. But was me just testing a few numbers. Hope this helps.
@@CreatewithPlay Got it, thank you for the quick reply!
within a pro plan, can i connect the PLAY PROTOTYPE to a custom database or swiftDATA and APIs ? spline integration into play-file ? i see, you got the rive integration already, sweet
You can't connect a Play prototype to a custom database at this time! We're working on Spline integration.
@@CreatewithPlay just so you know, i'm lovin it
Amazing work guys, I was doing a lot of UX work a few years ago and always had a vision of having this kind of feature set available to us and felt the tools we had at our disposal were stuck in early 2000's some event 90's :D..You've outdone yourselves. I have moved on to data engineering now but you've made me kind of regret my decision haha...I will keep an eye on this product!
Thanks for the kind words!!
Why no android?
We're focused on iOS apps for now!
the first problem about this app its name... you cant reach anything on the Internet by searching play or play 2. you can't find its mobile app also. you can't find website, any community talking about this app. how the hell you could pick this name? You can pick "browser" too I guess? "Animation" perfect ideas for a new thing...
by the way the QR code can't be read by the phone too...
Here is our website: createwithplay.com/ and our community: community.createwithplay.com/home
This looks like so much potential. Too bad it has a name that sounds like it was named by the same guy who renamed Windows Remote Desktop into Windows app. That, combined with the fact it only runs on Mac, means that it will forever be a niche product.
In before Play isn't a prototyping tool anymore, but a visual editor for production apps
this could be an ubiquitous product but 1-project limit is plain sad.
You can upgrade to get more projects or just create drafts!
Great videos! One comment- the volume is really low on almost all of these tutorial videos, so it forces you to turn the volume up pretty high. But then the advertisements before/after the videos are very loud and it’s a little jarring
Thanks! This is great feedback. We'll increase the volume on tutorials going forward.
Do you guys plan to allow users to make their own prefabs? It could be almost like "components" but for logic and interactions. I can see how much easier it would be to control complex logic and interaction flows, especially being able to control all of them from one place. It's probably pretty hard to develop, but it would be insanely convenient!
Yes! We're working on that feature now. Eventually, we want to have community prefabs that users can publish and team prefabs that can be used like a motion design system.
Hi ya - can you paste the other way (IMPORT) from xcode into the code section of play; say from an existing xcode view into play?
Great question! Not right now.
can you intrduc it for windows
This is perfect…❤🎉
Thanks!
so we can only create app for ios?
For now, yes! We'll add support for iPad next, then macOS and watchOS apps.
I don't even create apps but I need this
so, 1) is this a prototyping tool? Developing animations? and then developers has to develope those animastions again? 2) we only get Figma designs here but we can't share animations (off course) ? 3) is it possible to design a UI here? I mean, is it a Figma like app also? they killed Flash years agp... still world has been struggling to merge animations and design together. there are millions of tools but they can't work together. and like companies like figma, they don't give a sht about our pain. like Sketch did, like Adobe did.... Figma presents a fkn joke feature and moronic crowd just applauding, thats it. there are millions of tickets about some problems and feature request for years in their formal community platfoem... they even don't answer but tons of designers waits them.. I watched some videos about this product. yes it seems efficient and solved many idiotic problems successfully. Especially seeing node system there, thank god, shows that people behind this product are not idiots... I hope, I just can make design here efficiently... please don't wait us for that, and please don't wait to be bought :) (my english may harm your brain so sorry for this...)
Hi! Play is a design and prototype tool for iOS apps. You can design both UI and interactions (animation) in Play. Everything you can design in Play is 1:1 with code, so it's much easier to translate from design to code, even without using the code export.
You should allow this program for Windows as well.
Can we make a bezier creator ?
You can do this in the animation settings for actions! Choose a "Custom" easing curve and play around with the value in the expression editor. We'll make a video for this in the future.
@ thanks a lot
This is realy clean, the name should be changed to an easy to find SEO friendly name. Play? Will show google play and such Createwithplay? To long Why not: Prefab Interplay Inplay Preplay PL-studio Playcreate? (Procreate influenced) Just think about it
So... no Windows released?
No Windows for now!
confusing with there being a "google play store"
Really want to get this but I was wondering how your export feature works do you guys only export ui or interactions as well?
We're adding code export for interactions in the next few weeks!
@@CreatewithPlay exited to see it consider me a new customer!
Cool, but what is that animation called? sliding numbers up? Would be happy if you assist me.
Hey! This interaction scrolls through a V Stack of numbers using the Timer trigger + Set Scroll Y interaction. Feel free to email us at support@createwithplay.com with further questions, and I can help you out!
Now make it available on Windows
I really like Prefabs and the linking interaction.
Thanks! Let us know if you have any prefab suggestions.
What a beauty.
Beautiful app - thoughtful design - an iPadOS version would make even more productive!
You'll be able to design for iPad soon!
@@CreatewithPlay that's great! Will it be possible to run the Play 2.0 design interface on the iPad itself?
It's code based, seems not so easy for designers
Our interface is quite similar to Figma, so most designers will find the canvas intuitive. The condition editor requires you to write an expression that might feel like code. We'll add additional educational resources for this!
please make a windows version
:)
Is it built for just Mac users or window users as well?
Just Mac users!
im in aWE
Thank you!
it's so beautiful! I really think blueprints is the way to go, and it's the future for app development. Just like game developers use blueprints to code many things using Unreal Engine. I think we should have the same thing for building applications! Imagine you can just build your UI with blueprints in visual mode like this and take the code from there to add logic and complex things! The future is you guys go even further to not only prototype for design, but extending the editor to build the entire app with ability to use custom code when you need it, just like Unreal Engine ! You guys are so close ! I love it! Everything is beautiful!
Thank you!
no AI?
No AI right now!
Thank god there's no AI. Let me focus on what matters while designing and prototyping.
For me, version 2.0 is only if Play is Windows compatible.
Still just Mac for now!
@@CreatewithPlay Yes but there is no 2.0 version. The REAL 2.0 version is only if your app is compatible with windows or/and linux.
nice tool. it would be even more nicer if you bring it to other platforms which has like 70% market share instead of gatekeeping it to Apple.
Will there be a version for Windows in the future or not?
Our first step will be to provide a web-based inspector that can be viewed on Windows.
How do I add drawer ?
You can follow this tutorial! We'll add a tutorial for non-native sheet drawers soon.
can it export to React Native code instead of SwiftUI?
Just SwiftUI! I'll let my team know there is interest in React Native code export.
Even more tools for designers to scare us with🥲
Hey. I have a question. How to add border to individual sides of an element? I could not find the option.
We don't offer individual borders at this time, but I'll add a request for that.
I developing on windows, sooo windows edition when👀👀
Sad thing is its only available for macos