67

Early Impressions of Craft's Prototype Beta

over 7 years ago from , Product Designer at Jumbo Privacy

I received access to Invision's Craft Prototyping beta yesterday afternoon and have since had an hour or so to play around with it and I'm impressed. Craft inside of Sketch is incredibly smooth and fast and the prototyping section is no different.

When you first open Prototype, you're asked to create a new prototype without any context of where that concept would live or be saved, which caused some slight bit of confusion as we didn't want Prototype to interfere with our current projects on Invision. As far as I know right now, the Prototype only lives locally within the file itself. I confirmed this to be true by having another designer send me a Sketch file that contained a tap-through prototype and it worked on my device no problem.

The interface reminds me of Flinto and how click-through interactions are produced. If you have an object of any kind, you simply select the object, press 'C' and link it to another artboard. After clicking, a modal will come up asking you what gesture to activate the transition with, what behavior you'd like it to do (ex: link to an artboard, link back, dismiss a modal, launch Camera, or Browse photos), and then choose what transition should happen between the two artboards.

The coolest feature by far in the Beta, are the ability to use the iPhone's camera to add a photo into the prototype. You link an object to the camera action and name the layer you'd like to import the photo to _photo. After taking the photo, the image will appear inside wherever you've placed that photo square. Unfortunately, deviating away to another part of the prototype will remove this.

In addition to the Camera, Craft also has access for you to pop up the keyboard, create input fields that you can type in, browse for photos to insert, embedding a website into a shape (we tried this with google maps), send an email, a text, or even a phone call, all within the prototype. Talk about power.

My only issue so far with the prototypes, and I'm sure the problem will be solved quite quickly in the future, is the lack of sharing with others and testing your prototype within Sketch. With the Invision website, you can link the prototype out to others to view and it's not an issue, but you also relinquish all of the major features that Craft gives you. I'm sure with time, they'll have solved all these kinks.

If you have access to the beta, let me know what you think? I'm planning a longer write-up with all of the features in depth but for now, I'm still exploring the possibilities.

28 comments

  • Giovanni HobbinsGiovanni Hobbins, over 7 years ago

    This basically makes Adobe XD pointless. I wonder if Sketch will merge with Invision eventually.

    10 points
  • Yura TanskiyYura Tanskiy, over 7 years ago

    Yes, Craft's Prototype is nice. Most important for me is that it works in Sketch, and I don't need to export anything. It is the most frustrating part when you work with Flinto or Framer. The interface is pretty intuitive, but it lacks visual representation of event connection. I think it will be hard to maintain bigger projects as you don't see what buttons are clickable and where they lead to. But I think Invision team will fix it in the future.

    I liked fixed header/footer feature, works perfectly.

    The only thing when you want to share a prototype, there is no way to do it. You should use your phone to make a live demo like in good old days.

    7 points
    • Devin FountainDevin Fountain, over 7 years ago

      I noticed after I had written this post that there were indicators on the layer list. On the left side of a layer you can see an arrow pointing to it that indicates the transition it's using.

      1 point
  • Chris LüdersChris Lüders, over 7 years ago

    Does it work for websites and not just for mobile stuff? How complex are the motion effects? For example if you want to create a smooth off canvas menu animation

    2 points
    • Devin FountainDevin Fountain, over 7 years ago

      Yes it works for websites. I mean, technically, it can work for any design as long as you hook up a shape/text element to an action. It could be an app, a website, a tiny flash ad, whatever.

      0 points
  • Wesley HainesWesley Haines, over 7 years ago

    Ok so this is exactly what I was hoping for.

    Besides some of the features mentioned above, the app is lightning fast and does not slow down editing objects whatsoever, at least in this version. The integrations with Camera, Photos, Messages, Phone (!), Mail and others are seamless and work very well. At times, tap targets don't seem to work, but that's expected for a private beta. In true Invision fashion, I was able to create a flow-based prototype within literally minutes. No lag, very few bugs.

    Paired with everything else in Craft, you can literally design an entire app/experience in no time. Crazy!

    If only it worked with Android :(

    Definitely interested to see how Motion functionality might be added too.

    Well done team!

    2 points
  • Alex MartineauAlex Martineau, over 7 years ago

    Anyone else seeing performance issues with Sketch now that you have the prototype beta installed?

    2 points
    • Henry MoranHenry Moran, over 7 years ago

      Yes, I was about to comment on this. I also uninstalled the plugin to check and it seems to be faster without it. Hopefully the performance issue won't be a problem for long.

      2 points
    • Devin FountainDevin Fountain, over 7 years ago

      Haven't had an issue yet. Running on a Macbook Pro 13" 2015

      0 points
    • Jon MyersJon Myers, over 7 years ago

      Yeah - I turned Prototyping off in the Craft Manager for this reason.

      I'm sure it will get better.

      0 points
    • Joe BarberJoe Barber, over 7 years ago

      Yup. Especially while mirroring to the invision app. I ended up having to disable prototype while working on larger files because it starts slowing down really quickly. Hopefully something they can fix though, because I was loving how quickly I could test out flows!

      0 points
      • Devin FountainDevin Fountain, over 7 years ago

        I'm going to apply it to a massive project today and see how that fares. I'll probably update the post after that with a comparison. I was only running it through simple file to get a feel for how the process works.

        0 points
  • Phillip Gockel, over 7 years ago

    The biggest issue I've run into so far (and for me, it's significant), I don't own any apple devices besides a mac, and therefore can't actually preview any of the builds. I get prioritizing iOS first, but I'm surprised there's no browser preview you can run locally on your computer.

    0 points
  • Salva FerrandoSalva Ferrando, over 7 years ago

    Craft also has access for you to pop up the keyboard, create input fields that you can type in

    I want this so hard in Principle. I'll keep an eye to this also. Thanks for your first impression's.

    0 points
    • Andrew Richardson, over 7 years ago

      This is awesome news! I recently did a prototype with an input that I just had it auto fill if people hit the correct area which was a little weird during user testing.

      0 points
  • Dean BagnallDean Bagnall, over 7 years ago

    Great post. Looks like a promising step for the future of prototyping. Shame I don't have a code to try it myself :(

    0 points
  • Dan GDan G, over 7 years ago

    Can't see a link to sign up to the beta Q_Q

    0 points
    • Devin FountainDevin Fountain, over 7 years ago

      There are currently no links to sign up for the private beta, but I'm sure if you ask a designer nicely for one, ye' shall receiveth.

      0 points
  • Michael Locke, over 7 years ago

    Thanks for the insight. Looking forward to getting up and running with Craft and really taking advantage of this feature. Designing and Prototyping is a must (in one app), something I've been used to in Adobe Fireworks. Now we get it in Sketch. Really looking forward to this.

    0 points
  • Bryce HowitsonBryce Howitson, over 7 years ago

    Thanks for sharing the high level overview with us! There are so many prototyping tools now that I tend toward a "wait and see" approach. That said the ability to add inputs, show the keyboard, embed sites, etc sound really powerful.

    0 points
    • Devin FountainDevin Fountain, over 7 years ago

      It is incredibly powerful. In one instance, I used the form fields to determine if there was enough padding or space to write a specific length of text and it turns out, there wasn't.

      3 points