Craft Prototyping now available in Sketch (invisionapp.com)
over 6 years ago from Stephen Olmstead, Design Partnerships @ InVision App
over 6 years ago from Stephen Olmstead, Design Partnerships @ InVision App
Hey DN friends - I’m beyond delighted to share with you that prototyping is now available in Sketch via Craft. That’s right, we’re out of beta and looking to make the design workflow simpler while saving you some time on those roundtrip, iterative prototyping cycles. :)
Some of you know this journey started out back when the small, but mighty team at Silver Flows joined our merry band here at InVision. Since that time we’ve been focused on honing the tool into its simplest, most powerful form together. Our guiding principles were to make prototyping in Sketch as easy to pick up as possible while simultaneously delivering powerful end results that can be previewed and shared in record time.
To this effect, we’ve integrated Prototyping deeply into the heart of the Craft Sync. That means that not only can you quickly link screens in Sketch (using the hotkey ‘c’) but now those screens AND hotspots sync over to InVision and allow you to generate a share link for previewing… all without leaving Sketch. Woot woot.
Huge thanks to the entire community and especially to the beta group who helped bring us to this point. We invite all of you to continue sending feedback our way as we look to enhance and build upon this newfound ability. Enjoy!
This is so exciting!
I've been using the Beta build for tonnes of user testing sessions with a client for a mobile version of an epic internal tool we've built... it's been such a delight. So excited to see this in the main build :D :D :D
Hey Stephen. Can I ask where 'Fixed Header' and 'Fixed Footer' options have gone within Sketch?
Hey sir- currently these need to be set in the InVision prototype that gets generated, however this is one were actively looking at to have implemented moving forward. Trying to do something super minimal (similar to how you can do positional anchor-style linking with todays release).
Seems to be quite a few things missing in the plugin that are local inside the invision website. I was hoping you all would be releasing something comparable to principle or UXpin with this new feature. Guess we will have to keep waiting.
Hang tight my friend- there's more to the iceberg than what you can see sticking out of the water- going to continue to surface more helpful improvements and additions over time. Product team has been SUPER busy plugging away. Thanks for your patience!
I want to try this real bad. But Craft Manager says I'm up-to-date and I can't find prototyping anywhere. Also uninstalling Craft Manager is all but impossible.
Hey Dustin- just a heads up that prototype doesn't appear as a separate plugin (its part of sync). There is a small 'lightning' icon at the bottom of the pane that will allow you toggle hotspot relationships on and off. If you still don't see it, hit us up at support@invisionapp.com and we'll get you squared away.
What was the logic behind putting prototyping at the bottom of the bar? I understand its a 'mode' unlike the other features, but after using Prototyping Beta, it threw me off a tad.
Trev- the logic here is that the bottom button isn't actually a 'plugin open', its actually more of a 'relationship' toggle. Prototyping is part of the Sync plugin, but the toggle at bottom allows you to easily view or dismiss all interactions you've created in the document.
Great feedback- will keep monitoring- thanks for uplifting this!
You're probably still in the Prototype Beta. It tied me up until this morning when I saw they had a page stating that it's not supported anymore. I had to go into Craft Manager and switch version at the top.
Where is motion??? 3 years in the making??? https://www.invisionapp.com/blog/motion-prototype-animation/
Ed- your passion for this is matched (and dare I say exceeded) by our own. We cannot wait to get the full effect of this out into y’alls hands.
Motion has continued to evolve here internally, simultaneously both expanding in scope, while also leading to some actionable innovations and ’aha’ moments that you’re seeing released (and will continue to see in coming months) and rolled into in the core InVision and Craft platforms. We sure do appreciate your patience- I know there’s excitement to get this ASAP, and we promise to release it as soon as we’re 100% confident that we’ve nailed this for the community and substantially adding another time-saving tool to your workflow. In the meantime, please hit up support so we can get you on earliest beta of this when its ready. :)
I'm also waiting for the motion part.
Is it possible to link to an artboard on a different page? All my designs are broken up by section.
I've been looking forward to this for ages. And it's very cool and all, but seemingly inherently flawed - I can't think of a way to link from an element within a symbol with out detaching it.
I could draw hotspots within my sketch files I guess, but that could get messy
Seconded. Played with it a bit yesterday and I can't seem to figure out linking from symbols.
Same. I like the concept here a lot, but if I have a nav (or any element with more than one instance), it's almost certainly inside of a symbol. I don't want to have to detach symbols everywhere just to make a link possible...
Came here hoping for a fix for this exactly. Don't want to draw weird invisible shapes to use as hotspot links. Hope there's a fix for this soon.
Very cool, excited to finally try this out in production! The feature set has really come a long way from the initial beta (which was already promising).
I like how it not only integrates the initial prototyping features of Silver Flows, but also shows the actual flows between screens, similar to what can be achieved with the User Flows plug-in. Not having to recreate the flows with two separate plug-ins will be a real time-saver.
I was thinking the same thing. Sometimes that's all you need to show to other stakeholders, the full picture with arrows showing what the interactions do or take you to. I guess I'm not using User Flows anymore. It's a great plugin but you get that same functionality with Craft and the arrows don't get added as extra layers.
Thanks Morten and Pablo. Bringing over features from UserFlows into Craft Prototype was intentional. I made UserFlows as a quick proof-of-concept to test how connections between artboards might work and how important the feature might be to designers out there (a lot, as it turns out). We implemented similar features in Craft Prototype but made it even more powerful. As Pablo mentioned, the arrows are not additional layers in Sketch and they also update automatically as you move, scale, and even duplicate layers. This is only the beginning though, so look out for more amazing features in coming weeks. Enjoy
That's awesome – I am actually just now realizing that you created both Silver Flows and the User Flows plug-ins, Aby! Good job :)
Can we expect some of the other features from User Flows (like a way to visualize conditions) to also be integrated in to future releases of Craft Prototype?
This is good news. However, just having a little play and I can't see how it's possible to create Hotspot Templates? Is this something thats possible? If I have several artboards with different pages on each containing a nav, I don't really want to have to link the nav up on every single page. This was solved by Hotspot templates in Invision, is Prototype able to do something similar?
Hey Sean- if you make a connection using prototype and then copy and past that element on another board, it should maintain those links effectively allowing you to mimic the same sort of behavior as hotspot templates. Give it a go and let me know what you think. :)
I'm always for better design software and tools. As a person who uses InVision and Craft Sync every day and leads a team at a very large company, this strikes me as a product searching for a problem in its current feature set - especially considering functionality in InVision already. I had the same reaction with the screen share functionality released a while ago in Craft. I'd be curious to hear how the InVision product management team prioritizes features based on how they've defined personas at certain company sizes, how they determine potential market opportunities, and how they measure good product-market fit.
I'm assuming the key is to reduce friction. Faster creation of prototypes means faster feedback cycles and better products. I think we're just in a bit of an awkward phase where multiple products are a bit Frankensteined together in the search for a better tool that covers the whole workflow. This way of working essentially includes a desktop app (Sketch), a plugin manager (Craft), Sketch plugins (Sync), a web-site (InVision) and optionally an app (InVision app). It definitely works, but it doesn't quite yet cover the various needs of diverse design teams, and it could be a bit more elegant overall. Hopefully that's just a matter of time. I'm curious what your needs are in a big organization like Salesforce...
Proximity to design and friction reduction are two of the biggest wins from our point of view here Andrew. You can still prototype in InVision or you can use Craft Prototype (which can be faster for rapid iterations with the context of the design tool). We are highly focused on building to the needs of the community not the other way round- all of this is based on deep conversations with folks like yourself.
Happy to have a 1-on-1 chat with you at some point if you'd like to hear more about our product building and prioritization process (hit me at stephen[at]invisionapp.com if you're game). I'd also be delighted to pick your brain and find out more about your team's process so we ensure were blending that perspective into our product roadmap as well! :)
Awesome! Been looking forward to this for a long time. However I can't seem to add transition or scrolling to my prototype. Is this normal?
If you want to add a transition, change gesture to tap
Looks great! Have I understood it correctly - in order to test the prototype, I have to upload it to Invision first? I can't preview it in Sketch?
You're correct on that Jonas for now- we're also playing with an in-app player concept as well which would pull from InVision down the road. Regardless the goal being to have it be a hosted artifact you can easily share for feedback (something we didn't have in beta version).
Very cool to see this progress. One request would be to please find a way to include rendering of the arrows when exporting slices. That would allow for saving PNGs of whole user flows, in addition to having the prototype. Thanks for all the hard work on this stuff.
Love the suggestion- thanks Christoph- you're always so on-point with your freedback. :)
Hi Stephen, is there a plan to allow users to update the hotspots in the browser?
We've been chatting through that one actually. Right now we locked those to avoid collision/confusion between the two hotspotting environments, but we're testing some alternate options here to see if we get some more flexibility in the mix for this use case while still keeping it dead simple to use.
Thanks for the rundown Stephen!
This handles 99% of my prototyping without touching the browser, except 'Link back / Close'
Awesome otherwise.
You can link back / close by clicking at the top of the window. Do you see it?
Oh, I just watched the video and saw that, I guess I'll have to update Sketch to get that.
This is great news! However, is anyone's Syncing broken after this update? It gives me that wonderful wheel of death..?
Hey Aaron- this shouldn't be the case, sounds like something is going on. Can you hit up support@invisionapp.com and we'll get you squared away?
Excited to try this out! However, I just updated Craft and it looks like Prototype is still "coming soon." Any ideas why that might be?
I had to quit the craft manager and go back in- redo the update again and then restart sketch again.
Make sure you check within Sketch, too. My version of Craft doesn't show Prototype as an option, but it still appears in Sketch if you're running v1.0.31.
Just a note here that Prototype is technically part of the Sync now with this release. That's why you wont' see the icon in Craft manager with this release explicitly. If you were in the beta instance prior, make sure to update to the full production release. :)
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now