InVision, which is arguably one of the best prototyping and collaboration tools for the average designer, released a Sketch plugin last month – it’s called Craft. Craft extracts images and text from various sources so you can quickly fill your Sketch mockups with real data without leaving Sketch.
You don’t need to to be an InVision user to use Craft – Craft benefits the average Sketch user but also benefits those that use InVision for collaborating with a team as well.
Lets try it out.
Installing Craft
Start by installing Craft. Sketch plugins can usually be installed via the Sketch Toolbox; InVision, however, installs Craft through their very own Craft Manager (kind of like the Creative Cloud app), so download that here and follow the install instructions.
Designing a Quick Modular Card Grid
Now that Craft is installed, open Sketch. You’ll see the Craft interface on the right-hand side, next to the Inspector. If not, you can toggle Craft on and off easily, using command+P.
Press R to select the Rectangle Tool and draw out a rectangle that’s 400x300px – now let’s replace that rectangle with an image from Creative Market (without downloading it) using Craft.
Inserting Placeholder Images
From the Craft interface, select the “Photos†tab. You’ll notice that you can upload images from your computer, your Dropbox account, Unsplash, or you can extract images from the web.
Select “Web†and choose one of the images you’re considering for the website; copy the web address. Paste it into the address bar in the Craft interface and then click on that image. Craft will automatically replace the rectangle with your image, and resize the image as it sees fit.
Note: the image is actually used as a fill background for the rectangle, which is how it’s cropped to fit so nicely.
Inserting Placeholder Text
Now let’s repeat these steps, but this time with text. Press T to choose the Text Tool. You can totally use whichever styles you choose, but for the sake of clarity I’m using the Roboto Light font; “Size†36, â€Color†#222222, “Width†400px. I’ve also added a quick background to the card so that it has a container.
Select the “Type†tab from the Craft interface – then “Headline†– then “Cookingâ€. And there we have it, this is how we design with real data using Sketch. Obviously we aren’t really cooking turkey (they’re blueberry cupcakes for starters!), but it does allow us to mockup layouts that are far more accurate, because the data being used is realistic (as opposed to lorem ipsum).
Duplicating the Modular Cards
We now need to duplicate this card design multiple times, effectively creating a modular layout. Problem is, we want different image and text data in each instance of the card.
Craft can accomplish that easily though. Start by selecting all of the layers and Grouping them together with command+G, and then revert back to the Craft interface – this time choose the “Duplicate†tab. We’ll tile the card both horizontally and vertically, so make sure those options are checked, and that there are two rows, three columns, and 20px between each card.
When those options are correct, hit “Duplicateâ€.
Craft actually sources these images from Unsplash, but you can totally repeat the “insert images†step to insert your beautiful, far more unique Creative Market images, either from your computer (if you’ve decided upon and bought an image), or from the web address (if you’re still trying out watermarked images).
Quick tip: if you wanted to keep the design in the theme of food, you can revert back to the “Photos†tab and choose “Food†under the Unsplash option. Craft will remember the setting.
Conclusion
InVision has a huge vision for Craft (see what I did there?). Not only can we now design with real data (and test various Creative Market images with ease, and without even downloading them!), but we can also use the “Styles†tab sync the documents colours, fonts and styles directly to InVision.
But we’ll soon be able to take prototyping to a whole other level. InVision recently acquired SilverFlows, a Sketch plugin that allows the designer to create user flows and animations directly within Sketch – InVision will eventually integrate this into Craft. I’m dying to see to where InVision takes these ideas! How about you?
Products Seen In This Post:
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
