135

Sneak peek of new tool for designing complex interactions and animations

5 years ago from , Senior Designer at Google

We just posted a sneak peek of Pixate, the new mobile design tool we're building for prototyping complex interactions and animations:

http://www.pixate.com

If you've played with Origami or Framer, we're aiming to build something a lot more capable and easy to use—a visual tool that produces real, full-fidelity native prototypes for both iOS and Android.

We're currently in private beta, but we'll have some invite codes for the DN community soon. In the meantime, any input or feedback would be great to hear.

Lastly, if you're attending http://valiocon.com I'll be giving a demo of Pixate there—hope to see you then.

82 comments

  • Allan GrinshteinAllan Grinshtein, 5 years ago

    Holy crap, this is awesome.

    35 points
  • Brennan Smith, 5 years ago (edited 5 years ago )

    I am asking you nicely, shut up and take my money!

    17 points
  • Mattan IngramMattan Ingram, 5 years ago

    Looks fantastic, but I'm still waiting for a good equivalent for desktop and web app prototyping.

    10 points
    • Tor Løvskogen BollingmoTor Løvskogen Bollingmo, 5 years ago

      I guess Keynote is kinda close.

      0 points
    • Carolann BonnerCarolann Bonner, 5 years ago

      From the interface in the video, it looks like you can set custom dimensions on your prototype. I wonder if it would be possible to just set the dimensions to a standard desktop size.

      0 points
      • Justin Belcher, 5 years ago

        You could – with the caveat of needing to preview on an Android or iOS device since our animation engines are built on native iOS and Android frameworks.

        1 point
        • Mattan IngramMattan Ingram, 5 years ago

          Good to know.

          Let your team know that designers want interaction prototyping tools for desktop too!

          4 points
    • Chad HendersonChad Henderson, 5 years ago

      Agreed. I would love a simple workflow for prototyping animations and interfaces on desktop.

      5 points
    • Adam T.Adam T., 5 years ago

      I use iPad landscape in Flinto to make webapp protoypes... Actually works pretty well.

      1 point
  • Nick TassoneNick Tassone, 5 years ago

    Incredible! Looks so easy to use, especially when compared to Origami/Framer. Looking forward to giving it a spin.

    4 points
  • Noah TovaresNoah Tovares, 5 years ago

    Wow, any idea when you will have beta codes!? Can't wait to try this out

    3 points
  • Juan ArreguinJuan Arreguin, 5 years ago

    @Justin I want in! :)

    I'll see ya at Valiocon!

    2 points
  • Vinay ChilukuriVinay Chilukuri, 5 years ago

    This seems super cool, Justin. Wish there is also an app that takes care of adding interactions as easily to web-based prototypes!

    2 points
  • joe andersonjoe anderson, 5 years ago

    This looks pretty awesome, can you explain in a little more detail how the values get translated to native code?

    2 points
    • Justin BelcherJustin Belcher, 5 years ago (edited 5 years ago )

      Both the iOS and Android mobile apps are running custom animation engines built on top of native frameworks. We think that's important so things "feel right" on device, as they rarely do in webviews or approximated simulations.

      Those engines are driven by the data from the UI. That data is pulled down whenever you publish for now, but soon they'll be updated in real-time as you edit. You can also interact with your prototypes on the mobile app without the UI – which is helpful for demoing or letting developers play with the interaction themselves.

      2 points
      • Drew ShimomuraDrew Shimomura, 5 years ago

        This is super sweet. FWIW, if you get to a point where you're trying to decide between releasing and getting the real-time updates working, just release it! I'd rather start playing with it sooner than have the real-time updates, which I'd consider awesome but not need-to-have functionality.

        Thanks, Justin, I'm super stoked to work with this.

        1 point
  • Sergi MiralSergi Miral, 5 years ago

    You got my attention!

    2 points
  • Jim SilvermanJim Silverman, 5 years ago

    holy crap it's web-based

    1 point
  • Chris SlowikChris Slowik, 5 years ago

    This is amazing. Exactly what we've been looking for =]

    1 point
  • Dan BerkoDan Berko, 5 years ago

    Really pumped about this. Nice work!

    1 point
  • Jaffar KhorshidiJaffar Khorshidi, 5 years ago

    This looks VERY promising! Currently a big fan and heavy user of Origami and FramerJS. Would love to give this a run soon!

    1 point
  • Daniel FeldtDaniel Feldt, 5 years ago

    Aww shit, this could have saved me a lot of After Effects and Framer.js-time the last few months (I'm a n00b in both tools). Can't wait to try it out for future products. If it works half as sweet as the demo video you have a paying customer in me!

    Hoping for a chance of getting a beta invite!

    1 point
  • Vaibhav Kanwal, 5 years ago

    I am sold. Is there an early alpha subscription? Take my money like NOW!

    1 point
  • Aaron SAaron S, 5 years ago

    Holy moly, I've been waiting for something like this, for absolutely ages!

    1 point
  • Daniël van der Winden, 5 years ago

    I would love an invite to this.

    1 point
  • César MigueláñezCésar Migueláñez, 5 years ago (edited 5 years ago )

    Mind=blown.

    1 point
  • Brian A.Brian A., 5 years ago

    That's seriously cool. Looking forward to trying this.

    1 point
  • Clark WimberlyClark Wimberly, 5 years ago

    Are you the same group that was on Kickstarter a few years back? The name sounds familiar.

    1 point
    • Justin BelcherJustin Belcher, 5 years ago (edited 5 years ago )

      Yup that's us Clark. We built an open-source framework called Freestyle for styling and animating native Android and iOS UI components with CSS. You can check that out here: http://www.freestyle.org/

      A lot of our design tool is built on that foundation, and ultimately we're interested in the entire workflow –from prototyping, to handoff, to how those designs evolve over time as things are built.

      3 points
  • Maciej ZadykowiczMaciej Zadykowicz, 5 years ago

    Wow, looks like you guys have the killer combo of visual and code input. Dare I say from the demo, you nailed it.

    1 point
  • Matt Smadner, 5 years ago

    UGH, just what I wanted. You are going to save me 300 hours of aftereffects work a week.

    1 point
  • Frank MoennixFrank Moennix, 5 years ago

    This is so impressive!

    1 point
  • Oliver JohnstonOliver Johnston, 5 years ago

    Far out!!!

    1 point
  • Maxime RenaudinMaxime Renaudin, 5 years ago

    This look really really cool ! Can't wait to try this out !

    1 point
  • c kizerc kizer, 5 years ago

    Looks fantastic. I want a invite code!

    1 point
  • Tony GinesTony Gines, 5 years ago

    Great work, guys. Can't wait to try it out!

    1 point
  • Sorel ArghireSorel Arghire, 5 years ago

    Sweet Hesus

    1 point
  • Andrew SassAndrew Sass, 5 years ago

    This looks great. Will this output any objective-c code or is it just for for prototyping?

    1 point
    • Justin Belcher, 5 years ago

      Yes, the tool will produce output for engineering handoffs, and we're exploring a few options:

      One is outputting "spec sheets" that describe all of the animation parameters, relationships, and custom easings. Another is generated code in the form of ready-to-build Objective-C or Java projects. And lastly there's the option of an embedded framework, so that animations can be easily added to an existing app.

      What we're finding is that developers are understandably particular about how these things are built out, so being able to play with the real prototype on device and see what code/values achieved that effect is usually just right for a handoff.

      8 points
    • Oliver JohnstonOliver Johnston, 5 years ago

      Or Swift ?

      0 points
  • Amilton PagliaAmilton Paglia, 5 years ago

    +1

    1 point
  • Valtteri KarestoValtteri Karesto, 5 years ago

    This is exactly what I would need in my current project!

    Where can I put my credit card number?

    1 point
  • Jason CalleiroJason Calleiro, 5 years ago

    Exact tool I have been looking for. Working with framer, but this just brings it back to a medium I'm much faster in. Let me know the address you want me to send my wallet to. Thanks!

    1 point
  • Braden HammBraden Hamm, 5 years ago

    Really wish I was going to Valio Con now. Attendees will probably get access to the beta.

    1 point
  • Bardan Gauchan, 5 years ago

    Holy Shit. I want this so bad! I want in on the beta please!

    1 point
  • Christian CalviñoChristian Calviño, 5 years ago

    Like keynote but better. Well done.

    1 point
  • Jared HardyJared Hardy, 5 years ago

    This looks awesome, I think this pivot is a great move for pixate.

    1 point
  • Ugur KanerUgur Kaner, 5 years ago

    Hey Justin, let me know when codes are available, would be glad to post this on Product Hunt and get feedback

    1 point
  • Brian MiuraBrian Miura, 5 years ago (edited 5 years ago )

    Lastly, if you're attending http://valiocon.com I'll be giving a demo of Pixate there—hope to see you then.

    Awesome. Could you tell me which date & time you will be giving a demo by any chance?

    0 points
    • Justin Belcher, 5 years ago

      Drew has us slated for 4pm on Saturday. I'll try to remember to update this thread if that changes between now and then.

      0 points
  • Braden HammBraden Hamm, 5 years ago

    Can this be used for multi-screen, clickable prototypes? Or is it more animation and interaction focused?

    0 points
    • Justin Belcher, 5 years ago

      For now we are more focused on the interaction and continuous animation piece, but we do support Tap gestures and multi-screen transitions/navigation is planned as well.

      2 points
      • Braden HammBraden Hamm, 5 years ago

        Awesome! It's difficult (for me anyway) to do more than single interactions with Origami and Framerjs as well. The new Pixate looks to be a big improvement. Can't wait!

        0 points
  • Lasse EriksenLasse Eriksen, 5 years ago

    Wauv-sa!

    0 points
  • Vitor FernandesVitor Fernandes, 5 years ago

    wow!

    0 points
  • Daniel GoldenDaniel Golden, 5 years ago (edited 5 years ago )

    *

    0 points
  • Jeffrey KamJeffrey Kam, 5 years ago

    This looks incredible.

    0 points
  • Asher SimondsAsher Simonds, 5 years ago

    This looks awesome - we've been exploring good ways to prototype interactions on Android and this would be great to try!

    0 points
  • Matthew DeutschMatthew Deutsch, 5 years ago

    this looks amazing.. can't wait to play with it!

    0 points
  • Diego LafuenteDiego Lafuente, 5 years ago (edited 5 years ago )

    Got it.

    0 points
  • Philip TribePhilip Tribe, 5 years ago

    This looks great. Happy to beta test it ;)

    0 points
  • Collin HartiganCollin Hartigan, 5 years ago

    Awesome work Justin. Any idea as to when we will be able to get our hands on the product?

    0 points
    • Justin Belcher, 5 years ago

      The plan is to start sending out beta codes over the next few weeks and launch much sooner than later =).

      2 points
      • Adam T.Adam T., 5 years ago

        Glad to hear it! This looks awesome.

        0 points
      • Mathieu MayerMathieu Mayer, 5 years ago

        Looks like a super slick tool.

        Would be glad to be part of the beta program. Actually, would make more sense if we could have a team beta invite so we can try this out within our current workflow at my studio. We can then give you full feedback, as a team too.

        We're looking for a quicker way to prototype interactions. Right now, it's either After Effects or Framer.js but only 2 of us are familiar with JS... And AE is only time based... Well, you know what the problem is right :D

        Anyways, keep up the good work! Thanks for addressing this problem :p

        1 point
  • Hash MilhanHash Milhan, 5 years ago

    oops, the site doesn't work. have we given it the hug of death? :-/

    0 points
  • Ben RegaliBen Regali, 5 years ago

    I'd love to beta test the sh*t out of it. Pixate looks really promising!

    Also I love the idea of outputting specs/code for devs, that really adds extra value. Also makes it much easier to have consistent animations! Great stuff, guys.

    0 points
  • Mike HeitzkeMike Heitzke, 5 years ago

    Any chance we (Asurion) could get in on this private beta? Pretty pretty please? We'd really love to get a chance to utilize this and would really help with app mockups.

    Looks very promising, I've been preparing a talk on the current landscape of mobile prototyping, and now I have to add you guys to it.

    0 points
  • Tom ReinertTom Reinert, 5 years ago

    That is just perfect.

    I've been trying to catch up to quartz, origami, framer etc. but I always thought: "Somewhere, someone brilliant is building a graphic editor for mobile interaction design. Just wait…"

    Wait is almost over, I reckon. Thanks for building this!

    0 points
  • Shane McCleeryShane McCleery, 5 years ago

    Can't wait to try this out.

    0 points
  • Cesare Rocchi, 5 years ago

    Wow, I am very impressed. Do you (plan to) support multiple touches?

    0 points