Craft by InVision is a free plugin that helps streamline your design workflow by automating tedious actions and pulling in realistic sample data. The following Craft tools are available for Photoshop:
These tools are built for Photoshop for MacOS. However, if you are using Photoshop for Windows, you can still download the Craft Sync tool.
Before using Craft with Photoshop, you will need to install Craft Manager. For steps on installing and updating Craft Manager for MacOS, reference our Craft Manager Getting Started Guide. If installing Craft Sync for Photoshop for Windows, reference this article: Installing Craft Sync for Windows
After installing Craft Manager, you can enable the tools in Photoshop. To enable each tool:
Repeat this process for each Craft tool you want to use.
When your designs are right at your fingertips, you can make faster, smarter decisions about the next phase—your prototype.
Today, we’re thrilled to share a powerful new tool to make your workflow more continuous and contextual, keeping you in the zone and empowering you and your team to create better products, faster. Prototyping in Sketch is here, with Craft Prototype.
With Craft Prototype, you’ll experience an unparalleled level of continuity between Sketch and InVision. By bringing your design and prototyping process together, work faster, collaborate more seamlessly, and stay focused to create more amazing products with your team.
Just add a hotspot to any layer in your Sketch project. Then, link it to an artboard with a desktop or mobile gesture and create transitions by fading, sliding, rotating, and more. You’ll instantly get a bird’s eye view of how your screens are connected.
When your prototype is ready for review, sync your screens to InVision with Craft Sync. With just a click, you can preview your work, share with your team, and collaborate in real time.
Product design is complex, but your workflow shouldn’t be. Bring unrivaled context and continuity to your workflow—and create better products—with Craft Prototype, now free as part of the Craft suite of plugins for Sketch and Photoshop.
Download and install the InVision Craft plugin if you haven't already. If you've never used it before, you might get confused when you open the app because you.
In any screen design project, whether small or large, there are always going to be elements that repeat from screen to screen. Whether it's an entire header, or an entire footer, or just a navigational element, these items need to match from screen to screen, and if we make a change in one place we don't want to have to make that change over, and over, and over again. Solving this problem is what Components in Studio are all about.
So, I've got this left point arrow here, and I would like to turn that into Component because I plan to reuse that all over the place in this particular project. All you need to do is with an element selected, whether it's a group, or a single layer, you can head up to the toolbar at the top of the screen, and this button here will allow you to create a Component. You can also press command K on the keyboard to bring up this exact same dialogue box. Now, I'm not going to name this arrow left because I plan to use it for more than just pointing left. I'm just going to name it Arrow, and then I'll click done to create the component, so now where its been added is to my component library at the top of the layers list, there's a little book icon you click, and here is our Component Library showing a list of all the Components that we've created in this particular document.
So, here I've got my Arrow. I can click and drag anywhere in my project to create a new one or you can of course, copy, and paste or option drag any existing Component to create another instance of that Component. So it's important to know that each and ever time you use a Component within your document, that's considered a Component Instance. The Component Master, is what they all sync with. So if I want to make a change to the appearance of these buttons, which I do, I can select an Instance and then head up to the top right corner where it says, "Edit Component." That shows me the master of that Component that all the Instances are syncing with.
So I can now click, and I'm going to remove the stroke from this background box, I'll click on this blue color, and I'll switch it out to be more consistent with the UI, using this red color and now I can click the arrow to return to my design and every instance of that Component has updated to match that master. No more blue color, no more stroke on both of these arrows. And if I used it 100 times in 100 places all 98 of the other ones would have updated at the same time instantly.
If you've got a Component instance that you don't want to be a Component at all anymore, you don't want it to sync, you want it to be its own rogue element, you can do a right click and then you can choose detach Component and it will turn back into the regular groups and layers that it was before. Now for those of you who have been paying very close attention you might notice that I have two left arrows instead of a left arrow and a right arrow. If that's bugging you, you're not alone, it's bugging me too, so let's take a look at how to fix something like that using Component Overrides.
Now it's time to do some high fidelity prototyping, using the Motion transition.
This is where we're headed and I think you're going to be surprised just how quickly and easily we get there.
Now, before we add our Motion transition or play with the timeline, it's important to understand how this works.
It is, for the most part, completely automatic and what Studio's going to do is automatically match up the layers that are the same objects between the two screens and animate the differences in the properties between those two screens.
So, for instance, this image is small here. The same image is larger here. Studio is going to animate that difference; and the background here is white, the background here is black with an image. It's going to animate the difference.
So, what we're going to end up with is something much more high fidelity, without much effort at all. We just have to make sure that our point A and our point B are as we like and that our layers have matching names, so that we can help out the algorithm that does the matching.
So, one other thing that I want to do. I would like for these arrows to slide in, instead of just appearing arbitrarily. So, what I'm going to do is I'm going to select these. I'm going to hit copy, command C, on the keyboard. I'm going to head over to this artboard, hit paste and I'm going to position them by nudging. I'm going to use shift and the arrow keys to nudge these just out of view and then once I've done that, we now have objects that match between these two screens and it's going to animate the difference in position, thereby sliding those arrows in.
The last thing I want to do, just to be extra fancy, is this background image here. I would like for this background image to fade in and sort of grow. I think that's a cool effect. So, I'm going to select the background images I have and press command C for copy, head over to artboard one, press command V to paste and now I'm going to zoom out just a little bit and I'm going to resize the image; and the way Studio handles images is really cool.
If you click and drag the handles to scale an image out of proportion, it automatically scales the bounding box and then scales the image to fill that bounding box. It doesn't become distorted.
So, by shrinking it the way I did, in a seemingly arbitrary fashion, that is actually exactly what we want to do and then I'm going to send this layer to the back. I can just click and drag on the layers list to make it the bottom most layer and the last thing, I would like the opacity to be zero. So, it's going to go from 0% opacity on this artboard to, let's see, 20% opacity on this artboard and it's going to do so in a smooth and animated fashion, which is the best part.
So, now I think we're ready to apply our Motion transition. We've got all of our objects set up where we want them from point A to point B, so now we just have to make the magic happen.
So, I'm going to select our image on the left hand side, which is our trigger and if we head over to the inspector on the right hand side, you'll see that we've got an interaction already applied here. I'd like to remove that and start fresh with you guys, so you can see, one, how to remove an interaction and, two, we'll add another one together for practice.
So, we'll do a right click on this interaction. You'll find delete. We'll delete that interaction, gone; and again, to create an interaction that links from this selected object to the screen on the right, we'll press the letter C on the keyboard. We'll move over here and we'll click to create that interaction and now we'll switch the transition type from preset to motion; and that's it. The magic has already happened. Studio has already gone and matched up all the layers and created this wonderful animated transition.
I'm just going to make the transition a little bit longer, so it's easier to see it happen. We'll hit save and we'll head up to the play button on the toolbar at the top of the screen and click. There it is. It did it.
I'm going to hit the back arrow to go back and play it again and again and again. Just like that, we've got the arrow sliding in. We've got the image growing. We've got the background image coming in. It is a beautiful thing and it happened completely automatically. We just had a little bit of set up to do.
So now, we're ready to do some fine tuning and edit the details of this transition with the timeline.
Prototyping is an essential part of interaction design process: read the handy tips how to make prototyping easy and productive with Sketch.
Craft by InVision is a free plugin for Sketch and Photoshop that helps streamline your design workflow by automating tedious actions and pulling in realistic sample data.
Craft is not compatible with InVision Studio. If you want to publish Studio prototypes to InVision Cloud, you can do so directly from Studio. Learn more about publishing from Studio.
Craft consists of the following tools:
Not all Craft tools are available for Photoshop. For more information, check out Craft for Photoshop.
Craft by InVision is a free plugin for Sketch and Photoshop that helps streamline your design workflow by automating tedious actions and.
NikokoraSeptember 09, 2019 4:01 AM
Very much I regret, that I can help nothing. I hope, to you here will help. Do not despair.
MagarSeptember 11, 2019 8:44 AM
In it something is. Thanks for the help in this question. All ingenious is simple.