Holy Sh!t~ Designing with Craft by InVision LABS in Sketch

With Real Data in Real Time

Pizza Yap🍕
Feb 5, 2016 · 7 min read

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.

Wobbly-wobbly logo design~

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…😝)

Watch the Video or just skip it and read my tutorials 😁

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?

Super fast installation ⚡️

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.

The three plugins inside Craft: Duplicate, Photos and Type.
Top bar new menu: Panels, it is weird that it doesn’t include Type.

Craft comes with three plugins, Duplicate, Photos, and Type. Let’s dive into each one, with animated GIFs! 😅


Inside Selection

  1. First you need to select a layer.
  2. Adjust to your desired Vertical/Horizontal Gutter.
  3. Press Duplicate Content.
  4. Now your selected layer is group under a new Group folder automatically, and with a new layer at the bottom called Selection.
Quite a few steps to create a list…
  1. Select the layer named Selection.
  2. 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.)
  3. Press Duplicate Content, again and…BOOM💥~ a list of friends is created! (Although it takes some time to download the images from Unsplash 😝)
We need some time to load images pulled from Unsplash

Specific Count

  1. Under Specific Count, enter the Item count number and Gutter you want on either Vertical or Horizontal.
  2. 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!
You can see some text going to the next line… If Craft can be updated to wrap the text according to a fixed width then it will be great~!

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.




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 😩

No luck 😢


Unsplash will take more time to load if you have more shapes to fill up or your internet connection is slow…


  1. Just open up Web tab.
  2. Paste in the website link. I personally prefer Pexel, free stock photos with large libraries and categories. (https://www.pexels.com/search/car/)
  3. Then click on any photo. Your shapes will fill up with that image and follow the sequence of image in that webpage.
Pexel is always my favourite website for images in my quick design mockups

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! 😁

UIFaces!!! The most awesome website ever~

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.



Love this!

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 create your own custom list that will suit your design mockups.

You can rearrange, edit or remove the actions in Type panel.

But there is no confirmation warning when you delete a custom action, best to keep your list somewhere else.


Works like magic~ ✨

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

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.

Minitheory Design

Minitheory is a digital design studio, based in sunny Singapore. We make software simple, based on how people think and behave. www.minitheory.com

Thanks to Mike Chen

Pizza Yap🍕

Written by

Product Designer in DesignOps at Grab Singapore | Design System | Writer | Design Tools Reviewer | Maker

Minitheory Design

Minitheory is a digital design studio, based in sunny Singapore. We make software simple, based on how people think and behave. www.minitheory.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade