Holy Sh!t~ Designing with Craft by InVision LABS in Sketch
With Real Data in Real Time
InVision launched its latest division LABS by InVision after recently acquiring code-based design tool Macaw. InVision LABS claims to be making tools to solve the design challenges of the future.
On the same day, InVision LABS launched their first product, Craft. Craft is a free plugin suite for Sketch and Photoshop that lets you design with real data in real time. 👍✨
This is yet another piece of really good news for us (designers 😍) following last week’s Sketch app update to 3.5.1 with tons of performance enhancements! ⚡️ You can read more about it from my article. 😁
Once I received the InVision email and fired up the link, the Craft introduction video surprised me with its features! 😱 …which was the same feeling when I watched the demo of Project Comet features during the Adobe MAX live stream. The features are quite identical! (I think…😝)
I know there are video tutorials on the Craft website but I’ll still run through Craft features in Sketch by using GIF animation, again! 👏
Installing Craft is quite different from how we install plugins in Sketch. After you’ve downloaded the installer from the Craft website and opened up the installer, just click on either Sketch or Photoshop (or both) to install. Super rad! It integrates directly into both Sketch or Photoshop via a panel interface. But I’m not sure if we need to repeat the steps again in the future when have new updates for Craft? Or does it auto-update?
Once you’ve installed Craft, open up Sketch app and the first thing you will notice is the new panel on the right side. You can toggle the Craft panel with CMD+P (⌘P). There is a new menu on top too, named Panels.
Craft comes with three plugins, Duplicate, Photos, and Type. Let’s dive into each one, with animated GIFs! 😅
Duplicate
With this you can easily duplicate your design element at lightning speed.⚡️ It’s pixel-perfect precision, vertically or/and horizontally.
Inside Selection
With Inside Selection, you can duplicate a list of UI elements easily.
- First you need to select a layer.
- Adjust to your desired Vertical/Horizontal Gutter.
- Press Duplicate Content.
- Now your selected layer is group under a new Group folder automatically, and with a new layer at the bottom called Selection.
- Select the layer named Selection.
- Drag it vertically down (if you want to create multiple column lists, then you can drag the Selection layer vertically and horizontally, by selecting Vertical and Horizontal Gutter checkbox upfront.)
- Press Duplicate Content, again and…BOOM💥~ a list of friends is created! (Although it takes some time to download the images from Unsplash 😝)
Specific Count
Specific Count is a more direct and easy duplicate action.
- Under Specific Count, enter the Item count number and Gutter you want on either Vertical or Horizontal.
- Select the layer you want to duplicate, press Duplicate Content, and here you go, a list of items are created! Without resizing the Selection layer!
Apparently this is quite similar to the plugin: Duplicator, which I think most UI designers are already using to create a list of things.
But InVision LABS has executed it in a more cool and dynamic way! From the GIF above, you will notice the images are generated from Unsplash and the names are generated randomly.
But again, here’s the thing. Those images generated from Unsplash are not suitable for my design which is a friends list. If Duplicate has options to change the parameter for automating images and text it would be much more awesome! Example: using UIFaces to create a profile image list; change text parameter to generate emails.
Tip: If you have made the layer you selected into a Symbol, it will save time to edit each style. For the above GIF, I’ve converted the Name, Position, arrow icon and line into a Symbol, to save time for editing.
Photos
Add photos to your design from your computer’s Local Folder, Dropbox, Unsplash or the Web that are sized to fit into your design right in a blink of an eye! 👀 (OK, I know I’m exaggerating A BIT 😅)
Folder
Let’s start with the Folder tab. In this option, you will need to select one of your folder that contains photos. After you click on Place Photos, it will randomly pick photos from the folder and place it into the shapes.
Dropbox
The Dropbox option works the same as Folder. This option is good to have since we can sync our photos across our team, and if you have a large photo library it will be more cool~!
Just copy and paste the Public Folder link of your folder from Dropbox and click Place Photos, the selected shapes will be placed with images from that Dropbox folder…This is what InVision said and taught but I have no luck in making this work. It keeps telling me my link is invalid. 😢
I’ve placed the folder with the photos in my Dropbox Public Folder, but there is no way to copy a folder link. I also tried pasting the photos into my root Dropbox and choose Copy Dropbox Link from the context menu — the link is invalid too. 😔
Anyone managed to get this to work? You can tweet me or DM me 😩
Unsplash
For Unsplash option it is super direct and easy. Just select your shapes and click on Place Photos, your shapes will be randomly generated from the Unsplash photo library. This is good if you just want some random image for your mockup. If you want more specific categories of photos, you can use the Web tab.
Web
This feature is super cool. I’ve never seen other plugins work like this before. In the Web tab, you can go to any website you desire to get photos from them. Of course you need to check the license if you’re about to publish the design or sell your design to clients.
- Just open up Web tab.
- Paste in the website link. I personally prefer Pexel, free stock photos with large libraries and categories. (https://www.pexels.com/search/car/)
- Then click on any photo. Your shapes will fill up with that image and follow the sequence of image in that webpage.
Tip: To navigate in the webpage, press and hold the CMD (⌘) key and click on the link you want to go to.
And with this Web feature, I finally can use UIFaces for my friend list UI! 😁
This feature obviously reminds us of the Content Generator Plugin. I still think Content Generator is the best for placing content due to its wider range of options. It can randomly place photos filtered by either male or female, or both. But who knows — maybe Craft will be updated with a better version just like Content Generator.
Type
With Type we can place any text according to the context we want. No more Lorem ipsum, or trying to mix and match your colleague’s names for your design mockups (actually I enjoy mixing and matching my friends’ names too😁).
Samples
Just like Content Generator, with Type we can choose Names, Headlines, Dates, Currency, Cities from the Samples tab… But Type allows us to create our own custom action and grab content from website!
Custom Action allows us to add other text string that is not included in Type. This is much more useful and straightforward to add data for designers. There is someone already sharing the list they have created, check out Multicultural Names list from Rizwan Javaid! 👍✨
You can rearrange, edit or remove the actions in Type panel.
Web
Same idea as Photos. In the Type panel Web tab, we can pull any text content from any website. This is very useful: let’s say for designing a financial news website, there is no more typing the content manually and the mockup will look more real!
Type is useful but it still lacks some things that Content Generator provides. For example, Content Generator can enter a range of custom strings (0–100 or price range).
Finals Thoughts
Clearly, Craft by InVision LABS is a very productive tool and helps improve our design workflow. I cannot imagine not using it for my design work — it’s definitely THE must-have plugin for the year! And this is only version 0.25, from what I see from Sketch Plugins Preferences. I guess InVision LABS will launch 3 more features (0.25+0.25+0.25+0.25 😂) for Craft soon!
So far I’ve only had trouble with how the Dropbox link works in Photos. Otherwise everything is smooth and fast! Go try it yourself and I hope the tutorials above can help you!
P.S.: If you don’t like Craft, you can uninstall it from Sketch>Preferences>Plugins. Look for Panels by InVision Labs and right click to uninstall it.
Hit 💚 and share this article if you’ve enjoyed it. It’ll motivate me to write more too! Thanks! 😊
You can follow me on Twitter, ask me anything about design or ask me out for a coffee if you’re in Singapore/Malaysia. 😅 If you have a new project you want to collaborate with Minitheory on, you can email or visit us here!
_
Yap Kwang Yik is a UI Designer work at Minitheory, a digital design studio based in sunny Singapore. We make software simple, based on how people think and behave.
