Sketch & Craft: A match made in real data heaven
Sketch has just made a new best friend, and it’s called Craft*
*From those nice folks at InVision Lab.
In the past I’ve been a great advocate of a couple of Sketch plugins that have saved me a great deal of time when working with live data – Content Generator, and Unsplash It. These two plugins eased the pain that so many designers initially felt when trying to implement text, and image assets into their design concepts inside of Sketch.
But with Craft, having those features wrapped up in a tidy little bundle is something else. Let me give you a quick overview of this awesome tool…
Go grab a copy of Craft
Firstly hop on over to http://labs.invisionapp.com/craft and download a copy of Craft. Install it, and then let the (real-data) party begin. Woohoo!
Back in Sketch you will now see a new panel appear next to the Inspector Panel, and also a new item in the Menu bar.
Quick Note: The dropdown menu does not seem to have the Type option yet, and limited with some other features. Stick to the panel for now. I’m sure those missing options will be featured in an update. No deal breaker!
Shortcuts to use for your Photos
- Insert photo from folder Shift + Ctrl + 1
- Insert photo from Dropbox Shift + Ctrl + 2
- Insert (random) photo from Unsplash Shift + Ctrl + 3
Quick Note: For the folder, and Dropbox options you will, of course, need to specify a folder from the main panel before you start using those shortcuts.
I’ve created a simple News Feed screen for iPhone 6, which you can download here, and it gives you a quick chance to kick the tyres on Craft. They are worth kicking (in a nice way of course).
Now let’s hop on through the great features that Craft brings to the table…
Type
Bye, bye to Lorum Ipsum. And hello to placeholder text for just about everything inside of your design. Titles, article copy, dates etc… You can even add your own custom action to the Type option. You want your blog titles to appear as the names of every Bill Murray movie (who doesn’t love the Big M)? Go for it!
A keyboard shortcut to easily cycle through different snippets of text would be a requested feature in a future update.
Photos
Import photos from Dropbox, a private folder, or the web, right into your design.
With Craft you can easily add in placeholder images to your Sketch screens. Craft gives a variety of options to choose from. My personal favourite being able to grab a random image from Unsplash. But you can also, quite easily grab images from a Dropbox folder of your own, or even an image from the web. For example, I have used images from UIFaces in the past for my Avatars.
Quick Note: Currently it seems that images chosen from the Web option in Craft won’t alter when used with the Duplicate feature, the same image is duplicated, just not replaced like the Unsplash option. But I’m sure there’s an update coming for that.
Duplicate
This is another truly handy, and time-saving feature. I’ve used the Grid tool in the past to quickly make duplicates of an element, with the required number of copies, spacing etc… or even a simple Alt + Drag. The great thing about the Duplicate feature in Craft, is that it will do all of the above, but automatically replace images, and text in the copies you’ve just made. No need to go through and replace the images, and text manually. Winner!
I’m impressed with what InVision LABS have brought to the table with Craft. A few niggles need ironing out. More keyboard shortcuts would be great, and a few UI tweaks to make it look 100% native to Sketch would be awesome. (Oh I’m a stickler for those minuscule touches).
Separate plugins that came before did an amazing job in their own right, but having all these features inside of that one panel is a dream. With Craft, and the upcoming launch of Silver http://silverflows.com, that ‘Project Comet Adobe Thingy Project Thing’ needs to be looking over it’s shoulder.
The **** just got real!
Thanks for reading the article,
Marc
Oh. Before you go, don’t miss out on this amazing offer for Sketch users…
Want to rapidly improve your design workflow?
Meet Cabana. A Design System for Sketch that helps you work better, smarter, and faster than ever before…
Use the offer code MEDIUM20 to receive 20% OFF Cabana here.
