Create with Play
Create with Play
  • 200
  • 199 422
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
มุมมอง: 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...
Prototyping a Music Player Livestream
มุมมอง 676หลายเดือนก่อน
Prototyping a Music Player Livestream
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
Navigating to a Page in Play
มุมมอง 1822 หลายเดือนก่อน
Navigating to a Page in Play
Opening a Native Sheet in Play
มุมมอง 1862 หลายเดือนก่อน
Opening a Native Sheet 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
Creating a Swipe In Menu in Play
มุมมอง 2342 หลายเดือนก่อน
Creating a Swipe In Menu in Play

ความคิดเห็น

  • @noohalmahfoodhi7937
    @noohalmahfoodhi7937 7 ชั่วโมงที่ผ่านมา

    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 ?

  • @khurramux6870
    @khurramux6870 วันที่ผ่านมา

    nice!

  • @DavidMermelstein
    @DavidMermelstein 5 วันที่ผ่านมา

    Can we get values from an api?

  • @jonbernbach8704
    @jonbernbach8704 6 วันที่ผ่านมา

    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? 🙏😃

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

      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!

  • @AlanBusby
    @AlanBusby 7 วันที่ผ่านมา

    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.

  • @Maverickbuilder
    @Maverickbuilder 7 วันที่ผ่านมา

    Why did you add the array to global and not to array?

    • @Maverickbuilder
      @Maverickbuilder 7 วันที่ผ่านมา

      @ 1:00s

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

      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.

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

    Where Can I download the play project for this?

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

    Is it possible to connect ipad os with ios?

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

    Hi, thanks for the livestream. The drag and drop list prefab only works on the top item in the stack for me.

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

      On no! We'll look into this.

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

    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!

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

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

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

    🔥

  • @majinjohnson
    @majinjohnson 18 วันที่ผ่านมา

    this FINALLY looks like something i may use as a replacement for protopie

  • @jonbernbach8704
    @jonbernbach8704 18 วันที่ผ่านมา

    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! 🙏

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

      These are for Play 1.0-happy to make any files for Play 2.0. Just email me!

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

    Such an amazing livestream. Very useful!

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

    Heads up… The app clip is not showing the same prototype as what’s in the live stream.

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

      Try this one! appclip.apple.com/id?p=com.createwithplay.playgen3.Clip&pid=3db72fcbce7080cKJ15&e=0

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

    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!

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

    I am keen to try this but I use Sketch. I see it does Figma imports but can it do Sketch? Thanks

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

      Unfortunately, no. You could try importing from Sketch into Figma and then into Play?

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

    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!

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

    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

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

      Sure! Check out this video: th-cam.com/video/NcdOiwPu28I/w-d-xo.html

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

    would reaaally love a link so that I can access this project!

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

      We redid this for Play 2.0. Check it out here: dashboard.createwithplay.com/o/share3/3d51235cae9300ubt44/duplicate

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

    Is there a way to set the navigation area header copy dynamically using variables?

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

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

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

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

  • @Hapticlabsio
    @Hapticlabsio หลายเดือนก่อน

    Loving this feature! For anyone looking to design custom haptics, our platform's got you covered. Can't wait to see what everyone creates!

  • @vaibhav5038
    @vaibhav5038 หลายเดือนก่อน

    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.

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

      Hi! Make sure you update the iOS app to Play 2.0 as well.

  • @johncasey8213
    @johncasey8213 หลายเดือนก่อน

    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?

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

      You can't change the font right now, but you can change the color by just using custom words or symbols.

  • @GuangxiCai
    @GuangxiCai หลายเดือนก่อน

    hey guys, when I try to add nodes on the Toggle Tap - SecondTap, the function doesn't work. How can I fix this?

    • @CreatewithPlay
      @CreatewithPlay หลายเดือนก่อน

      Hi! We fixed this bug in the most recent release, so update to 2.3!

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

      @ nice job!

  • @astrealofi
    @astrealofi หลายเดือนก่อน

    Can not find the Page Event trigger

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

      It's an Event trigger with the Type: View and Event: On Load.

  • @mahdi_android_developer
    @mahdi_android_developer หลายเดือนก่อน

    its not usefull in real world!

  • @divyanshkumar5053
    @divyanshkumar5053 หลายเดือนก่อน

    🔥

  • @delan0y
    @delan0y หลายเดือนก่อน

    What are you using to run the prototype? Simulator? iPhone? Something else?

    • @CreatewithPlay
      @CreatewithPlay หลายเดือนก่อน

      We use an iPhone! We're showing it on the screen using a program called Bezel.

  • @filippokłosiewicz
    @filippokłosiewicz หลายเดือนก่อน

    How the hell can I enable that iPhone preview window on the right side? :)

    • @CreatewithPlay
      @CreatewithPlay หลายเดือนก่อน

      Hi! The iPhone "preview" is just an iPhone mirrored with a program called Bezel.

  • @mazvydasbartkevicius9141
    @mazvydasbartkevicius9141 หลายเดือนก่อน

    Very useful! But there are too many youtube ads

  • @imnothin
    @imnothin หลายเดือนก่อน

    What if I have more than 2 modes? Light, Dark, Light High Contrast, Dark High Contrast, etc.

    • @CreatewithPlay
      @CreatewithPlay หลายเดือนก่อน

      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.

  • @Grammix
    @Grammix 2 หลายเดือนก่อน

    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❤

  • @pritishpatil8772
    @pritishpatil8772 2 หลายเดือนก่อน

    Would be great for these videos if you could link the image data/reference designs! Great content.

    • @CreatewithPlay
      @CreatewithPlay หลายเดือนก่อน

      Great idea! We'll try to do this going forward.

  • @imnothin
    @imnothin 2 หลายเดือนก่อน

    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.

    • @CreatewithPlay
      @CreatewithPlay 2 หลายเดือนก่อน

      Cool idea! I'll suggest it to my team.

  • @MrKnifeGuy1000
    @MrKnifeGuy1000 2 หลายเดือนก่อน

    I adore Play)🐸

  • @nuškatrošt-w9o
    @nuškatrošt-w9o 2 หลายเดือนก่อน

    device.screenHeight * 0.5 is not working for me, it produces an error when I try to add 0.5 value at the end

    • @CreatewithPlay
      @CreatewithPlay 2 หลายเดือนก่อน

      Hi! Can you email support@createwithplay.com with a screenshot? Thanks!

    • @MattKinde-w9s
      @MattKinde-w9s หลายเดือนก่อน

      I had the same. Try with "0,5"

  • @AdamEtCetera
    @AdamEtCetera 2 หลายเดือนก่อน

    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.

  • @olivedrab
    @olivedrab 2 หลายเดือนก่อน

    Question-are these older videos still relevant in Play 2.0? Thanks!

    • @CreatewithPlay
      @CreatewithPlay 2 หลายเดือนก่อน

      Somewhat! The UI is out of date and interactions are a bit different.

  • @olivedrab
    @olivedrab 2 หลายเดือนก่อน

    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!

    • @olivedrab
      @olivedrab 2 หลายเดือนก่อน

      By the way, I could see myself skipping Figma altogether and going straight into Play for design.

  • @idontwannadie.
    @idontwannadie. 2 หลายเดือนก่อน

    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!

    • @CreatewithPlay
      @CreatewithPlay 2 หลายเดือนก่อน

      Hi! Make sure the width is set to 100% or Fill rather than a fixed value.

  • @idontwannadie.
    @idontwannadie. 2 หลายเดือนก่อน

    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!

    • @CreatewithPlay
      @CreatewithPlay 2 หลายเดือนก่อน

      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.

  • @volgalgzkaradagoglu
    @volgalgzkaradagoglu 2 หลายเดือนก่อน

    I don't have .value. It gives me error when I type .value

    • @CreatewithPlay
      @CreatewithPlay 2 หลายเดือนก่อน

      What object are you writing .value after? Feel free to email support@createwithplay.com with more details and we can help!

  • @Edit001-l4z
    @Edit001-l4z 2 หลายเดือนก่อน

    Which website ?

    • @CreatewithPlay
      @CreatewithPlay 2 หลายเดือนก่อน

      createwithplay.com

  • @jvkedavies
    @jvkedavies 2 หลายเดือนก่อน

    This is cool. Please share more ❤

  • @Ilya_pekhterev
    @Ilya_pekhterev 2 หลายเดือนก่อน

    We need drag and drop list

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

      @Ilya_pekhterev This is in Play now as a prefab! Drag and Drop List.

  • @Ilya_pekhterev
    @Ilya_pekhterev 2 หลายเดือนก่อน

    We need drag and drop list

  • @Ilya_pekhterev
    @Ilya_pekhterev 2 หลายเดือนก่อน

    We need drag and drop list