Create with Play
Create with Play
  • 160
  • 171 691
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
มุมมอง: 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
Actions Preview in Play 2.0
มุมมอง 18828 วันที่ผ่านมา
Actions Preview in Play 2.0
Conditions Preview in Play 2.0
มุมมอง 13828 วันที่ผ่านมา
Conditions Preview in Play 2.0
Adding a URL to a Play Prototype
มุมมอง 9128 วันที่ผ่านมา
Adding a URL to a Play Prototype
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
Adding a Badge to a Tab Bar Item
มุมมอง 226หลายเดือนก่อน
Adding a Badge to a Tab Bar Item
Create a Slide Out Menu (Play 1.0)
มุมมอง 546หลายเดือนก่อน
Create a Slide Out Menu (Play 1.0)

ความคิดเห็น

  • @cinekai
    @cinekai 13 ชั่วโมงที่ผ่านมา

    If I get the Starter or the Pro version, will the swiftui code exported handle all this logic as well ?

  • @DavidIbe-q2z
    @DavidIbe-q2z 14 ชั่วโมงที่ผ่านมา

    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.

  • @md.rafiqulislam9396
    @md.rafiqulislam9396 วันที่ผ่านมา

    Alhamdulillah

  • @md.rafiqulislam9396
    @md.rafiqulislam9396 วันที่ผ่านมา

    Nice vedio

  • @lashamonaselidze8647
    @lashamonaselidze8647 2 วันที่ผ่านมา

    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.

    • @CreatewithPlay
      @CreatewithPlay 22 ชั่วโมงที่ผ่านมา

      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.

  • @dantecorbett2221
    @dantecorbett2221 8 วันที่ผ่านมา

    Protopie enters the chat.

  • @MichaelMiller-r6g
    @MichaelMiller-r6g 9 วันที่ผ่านมา

    Was there ever a second video for interactions with blur?

  • @SalmanSuhail
    @SalmanSuhail 9 วันที่ผ่านมา

    Any chance you could show more details around a list? Specifically how to do swipe and drag and drop actions?

    • @CreatewithPlay
      @CreatewithPlay 4 วันที่ผ่านมา

      Yes! Great suggestions. We'll create a tutorial for the swipe action soon. For now, you can check out the Templates section!

    • @joepatbob
      @joepatbob 4 วันที่ผ่านมา

      How can you do line segments?

    • @CreatewithPlay
      @CreatewithPlay 3 วันที่ผ่านมา

      Hi! What do you mean by this?

    • @joepatbob
      @joepatbob 14 ชั่วโมงที่ผ่านมา

      @@CreatewithPlay like the line segments between list items in iOS

  • @erikmcpherson
    @erikmcpherson 11 วันที่ผ่านมา

    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.

    • @CreatewithPlay
      @CreatewithPlay 11 วันที่ผ่านมา

      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.

    • @erikmcpherson
      @erikmcpherson 11 วันที่ผ่านมา

      @@CreatewithPlay Got it, thank you for the quick reply!

  • @u_walk2251
    @u_walk2251 12 วันที่ผ่านมา

    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

    • @CreatewithPlay
      @CreatewithPlay 11 วันที่ผ่านมา

      You can't connect a Play prototype to a custom database at this time! We're working on Spline integration.

    • @u_walk2251
      @u_walk2251 11 วันที่ผ่านมา

      @@CreatewithPlay just so you know, i'm lovin it

  • @djsouljah
    @djsouljah 15 วันที่ผ่านมา

    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!

    • @CreatewithPlay
      @CreatewithPlay 14 วันที่ผ่านมา

      Thanks for the kind words!!

  • @learningJourney2
    @learningJourney2 17 วันที่ผ่านมา

    Why no android?

    • @CreatewithPlay
      @CreatewithPlay 14 วันที่ผ่านมา

      We're focused on iOS apps for now!

  • @delizade
    @delizade 17 วันที่ผ่านมา

    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...

    • @delizade
      @delizade 17 วันที่ผ่านมา

      by the way the QR code can't be read by the phone too...

    • @CreatewithPlay
      @CreatewithPlay 14 วันที่ผ่านมา

      Here is our website: createwithplay.com/ and our community: community.createwithplay.com/home

  • @envigraphy
    @envigraphy 17 วันที่ผ่านมา

    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.

  • @simon4512
    @simon4512 17 วันที่ผ่านมา

    In before Play isn't a prototyping tool anymore, but a visual editor for production apps

  • @pussydestroyer144
    @pussydestroyer144 17 วันที่ผ่านมา

    this could be an ubiquitous product but 1-project limit is plain sad.

    • @CreatewithPlay
      @CreatewithPlay 14 วันที่ผ่านมา

      You can upgrade to get more projects or just create drafts!

  • @samtobin35
    @samtobin35 19 วันที่ผ่านมา

    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

    • @CreatewithPlay
      @CreatewithPlay 14 วันที่ผ่านมา

      Thanks! This is great feedback. We'll increase the volume on tutorials going forward.

  • @beeyourselfpls7213
    @beeyourselfpls7213 19 วันที่ผ่านมา

    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!

    • @CreatewithPlay
      @CreatewithPlay 14 วันที่ผ่านมา

      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.

  • @grabani
    @grabani 19 วันที่ผ่านมา

    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?

    • @CreatewithPlay
      @CreatewithPlay 14 วันที่ผ่านมา

      Great question! Not right now.

  • @IWhy4589
    @IWhy4589 19 วันที่ผ่านมา

    can you intrduc it for windows

  • @husseinmohammad
    @husseinmohammad 20 วันที่ผ่านมา

    This is perfect…❤🎉

  • @VaibhavShewale
    @VaibhavShewale 20 วันที่ผ่านมา

    so we can only create app for ios?

    • @CreatewithPlay
      @CreatewithPlay 14 วันที่ผ่านมา

      For now, yes! We'll add support for iPad next, then macOS and watchOS apps.

  • @Obedthian-UK
    @Obedthian-UK 20 วันที่ผ่านมา

    I don't even create apps but I need this

  • @delizade
    @delizade 20 วันที่ผ่านมา

    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...)

    • @CreatewithPlay
      @CreatewithPlay 14 วันที่ผ่านมา

      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.

  • @nanobugxl
    @nanobugxl 21 วันที่ผ่านมา

    You should allow this program for Windows as well.

  • @shao7414
    @shao7414 21 วันที่ผ่านมา

    Can we make a bezier creator ?

    • @CreatewithPlay
      @CreatewithPlay 14 วันที่ผ่านมา

      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.

    • @shao7414
      @shao7414 13 วันที่ผ่านมา

      @ thanks a lot

  • @Tensai0
    @Tensai0 21 วันที่ผ่านมา

    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

  • @hungjaketranquang4365
    @hungjaketranquang4365 21 วันที่ผ่านมา

    So... no Windows released?

    • @CreatewithPlay
      @CreatewithPlay 14 วันที่ผ่านมา

      No Windows for now!

  • @brianmolloy9393
    @brianmolloy9393 22 วันที่ผ่านมา

    confusing with there being a "google play store"

  • @tooth2302
    @tooth2302 23 วันที่ผ่านมา

    Really want to get this but I was wondering how your export feature works do you guys only export ui or interactions as well?

    • @CreatewithPlay
      @CreatewithPlay 22 วันที่ผ่านมา

      We're adding code export for interactions in the next few weeks!

    • @tooth2302
      @tooth2302 21 วันที่ผ่านมา

      @@CreatewithPlay exited to see it consider me a new customer!

  • @prabhattambe4047
    @prabhattambe4047 24 วันที่ผ่านมา

    Cool, but what is that animation called? sliding numbers up? Would be happy if you assist me.

    • @CreatewithPlay
      @CreatewithPlay 22 วันที่ผ่านมา

      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!

  • @itcb
    @itcb 24 วันที่ผ่านมา

    Now make it available on Windows

  • @vrydesigns
    @vrydesigns 24 วันที่ผ่านมา

    I really like Prefabs and the linking interaction.

    • @CreatewithPlay
      @CreatewithPlay 24 วันที่ผ่านมา

      Thanks! Let us know if you have any prefab suggestions.

  • @mrgyani
    @mrgyani 24 วันที่ผ่านมา

    What a beauty.

  • @AnkushNarula
    @AnkushNarula 25 วันที่ผ่านมา

    Beautiful app - thoughtful design - an iPadOS version would make even more productive!

    • @CreatewithPlay
      @CreatewithPlay 22 วันที่ผ่านมา

      You'll be able to design for iPad soon!

    • @AnkushNarula
      @AnkushNarula 22 วันที่ผ่านมา

      @@CreatewithPlay that's great! Will it be possible to run the Play 2.0 design interface on the iPad itself?

  • @davidfitcher2953
    @davidfitcher2953 26 วันที่ผ่านมา

    It's code based, seems not so easy for designers

    • @CreatewithPlay
      @CreatewithPlay 22 วันที่ผ่านมา

      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!

  • @DominoKiddoo
    @DominoKiddoo 26 วันที่ผ่านมา

    please make a windows version

    • @andndre
      @andndre 25 วันที่ผ่านมา

      :)

  • @brightbaiden7904
    @brightbaiden7904 26 วันที่ผ่านมา

    Is it built for just Mac users or window users as well?

  • @XEQUTE
    @XEQUTE 27 วันที่ผ่านมา

    im in aWE

  • @aghileslounis
    @aghileslounis 27 วันที่ผ่านมา

    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!

  • @ABIRHS
    @ABIRHS 27 วันที่ผ่านมา

    no AI?

    • @CreatewithPlay
      @CreatewithPlay 25 วันที่ผ่านมา

      No AI right now!

    • @atilla1950
      @atilla1950 17 วันที่ผ่านมา

      Thank god there's no AI. Let me focus on what matters while designing and prototyping.

  • @Celestial_04
    @Celestial_04 27 วันที่ผ่านมา

    For me, version 2.0 is only if Play is Windows compatible.

    • @CreatewithPlay
      @CreatewithPlay 25 วันที่ผ่านมา

      Still just Mac for now!

    • @Celestial_04
      @Celestial_04 25 วันที่ผ่านมา

      @@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.

  • @niwashlarc4599
    @niwashlarc4599 27 วันที่ผ่านมา

    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.

  • @letexia
    @letexia 28 วันที่ผ่านมา

    Will there be a version for Windows in the future or not?

    • @CreatewithPlay
      @CreatewithPlay 22 วันที่ผ่านมา

      Our first step will be to provide a web-based inspector that can be viewed on Windows.

  • @DesignnQuest
    @DesignnQuest 28 วันที่ผ่านมา

    How do I add drawer ?

    • @CreatewithPlay
      @CreatewithPlay 14 วันที่ผ่านมา

      You can follow this tutorial! We'll add a tutorial for non-native sheet drawers soon.

  • @TunnaDuong
    @TunnaDuong 28 วันที่ผ่านมา

    can it export to React Native code instead of SwiftUI?

    • @CreatewithPlay
      @CreatewithPlay 25 วันที่ผ่านมา

      Just SwiftUI! I'll let my team know there is interest in React Native code export.

  • @oladrolahola
    @oladrolahola 29 วันที่ผ่านมา

    Even more tools for designers to scare us with🥲

  • @NishaKumari-f9b1l
    @NishaKumari-f9b1l 29 วันที่ผ่านมา

    Hey. I have a question. How to add border to individual sides of an element? I could not find the option.

    • @CreatewithPlay
      @CreatewithPlay 25 วันที่ผ่านมา

      We don't offer individual borders at this time, but I'll add a request for that.

  •  29 วันที่ผ่านมา

    I developing on windows, sooo windows edition when👀👀

  • @grenishrai611
    @grenishrai611 29 วันที่ผ่านมา

    Sad thing is its only available for macos