Have you ever been in a remote meeting to discuss changes to a design when—halfway through—you realize that several members on your team are working from older, outdated versions of your style guide? The title font is different, the buttons are the wrong color, and the latest design swapped out a basket icon for a shopping cart. The conversation gets derailed and, rather than discussing the new sign-in flow, you’re burning precious minutes trying to guide people to the right file: app_screens_final-Final-FINAL-noreally-v4.sketch.

We can't go on living like this.

We can't go on living like this.

Collaborating on a team—especially a remote team—presents unique challenges. Getting multiple designers, developers, managers, and stakeholders on the same page and looking at the same version of a Sketch file is a struggle. And if you want to make changes to one of the font styles in your designs, it’s a mess to make sure everyone updates simultaneously.

Craft by InVision LABS is a powerful suite of plugins for Sketch and Photoshop that streamline workflow and collaboration with design and development teams. Craft makes it easy to build and maintain a common library of assets and styles, annotate and mark up designs in real time, upload instantly to InVision, and sync updates on the cloud.

I. Install Craft for Sketch and Sync with Cloud

Let’s begin by installing Craft. While Craft is a powerful set of plugins available for both Adobe Photoshop and Sketch, we will be focusing on using it with Sketch in this piece. First, check to see that your version of Sketch is updated to the latest and installed in the Applications folder of the Finder. Then, go to https://www.invisionapp.com/craft to download the Craft Plugin Manager.

Craft is a suite of powerful plugins to streamline your team's workflow.

Craft is a suite of powerful plugins to streamline your team's workflow.

Open the file and follow the prompts to install the Craft Plugin Manager. Once successful, the Craft icon should appear among the quick-launch icons in your operating system header. Click on it and choose to install each plugin for the Sketch platform. Craft will check to ensure that your version of Sketch is up to date and give you the option to quickly restart the program once you’ve activated the desired plugins.

Craft Manger will appear in your computer's header.

Craft Manger will appear in your computer's header.

One of the main appeals of Craft is that teams can sync shared styles and assets over popular cloud platforms such as Dropbox, Google Drive, and Box, ensuring that everyone is working with the same library.

You and your team will need to have accounts on InVisionApp. Set up sync by logging into the InVision site, navigating to your user profile, and opening the sync tab. There, you may select the preferred cloud platform used by your team to share files. Follow the prompts and grant permission for InVision to sync over your team’s cloud.

Screenshot

Now that you’ve installed and set up Craft with your shared cloud, you can begin establishing shared styles for your team.

Open a document in Sketch and see the new Craft panel that has appeared alongside the inspector panel. Here, you will find the installed plugins you activated in the Craft Manager: Sync, Library, Data, Duplicate, Freehand, and Stock. For the purpose of this piece on team collaboration, we are mostly concerned with Sync, Library, and Freehand.

Craft's plugins will appear in a panel next to the inspector.

Craft's plugins will appear in a panel next to the inspector.

II. Build a Library of Styles and Shared Assets for Your Team

One of my favorite things about Craft is its Library plugin, which allows you to generate a style guide from your design and share styles and assets with your team. When there are many team members working on their own files, making sure changes are updated simultaneously into everyone’s working environment can be a pain. Library makes this process seamless.

One-Click Style Guide

Creating a style guide is one of those necessary steps in the design and development process that many designers put off as long as possible. Depending on the complexity of your design, the number of object and text styles, and the rapidity of design changes, the task can be daunting. Craft’s one-click style guide feature generates text styles and colors from your document at the push of a button and even saves it in its own symbols page, eviscerating your excuses.

Begin by clicking on the Library plugin and navigate to the “Document” tab. There, you will see the option to generate a style guide page from the styles that exist in your document.

Generate a style guide in one click.

Generate a style guide in one click.

Voilà—Craft has generated a style guide for you in one simple action, added them to your document text styles and colors, and even created a page where they are all neatly organized to hand off to your developers! What a time to be alive!

Take a quick look to see if there’s anything you would like to re-label, and pat yourself on the back for saving hours of work creating a style guide the hard way. Any changes you or your team need to make can be pushed and instantly synced with your shared cloud.

Like magic, you have a neat, legible style guide and document styles that are shared on your cloud.

Like magic, you have a neat, legible style guide and document styles that are shared on your cloud.

Library of Assets

As a designer, I am a huge proponent of maintaining a pattern library for reusable components in addition to a style guide to speed up the design process as well as minimize inconsistencies. The Craft Library plugin makes it so simple to add headers, footers, navigation menus, icons, buttons, and other symbols to a global asset library. Make a change to one, push it to your team, and everyone is working from the same set of symbols. For the pattern-minded, Craft is a revelation!

In the Library plugin panel, switch to “Shared,” where you will find the option to import a library or create a new one. After you’ve created at least one library, you will see a dropdown list of available categories as well as the ability to add your own. I suggest creating separate categories for icons and buttons, as well as one for headers/footers and one for reused assets such as a user avatar.

Once you’ve got your organization in place, select any symbol in your document, such as an icon, and then click the [+] space in the panel to add it to your library.

Organize global assets like headers, icons, and buttons, and then push updates to your shared library.

Organize global assets like headers, icons, and buttons, and then push updates to your shared library.

As you and your team iterate on your design, you’ll probably make changes to these shared assets. Simply hit “push changes” when you’ve updated the assets and everyone linked on the team will receive an instant notification on the update with a prompt to “pull changes.”

Craft alerts you when library assets are updated, so every member can pull changes and stay in sync.

Craft alerts you when library assets are updated, so every member can pull changes and stay in sync.

III. Use Sync and Freehand to Share Designs and Get Feedback

Instantly Sync Artboards to InVision

Gone are the days of endless cycles of emailed PDF documents—InVision makes it easy to create clickable prototypes and share them with your whole team. The standard workflow for InVision is to export image files from your design and upload them to a prototype on the site. The Sync plugin in the Craft suite eliminates most of these steps.

With Sync, you can add and update artboards directly to a prototype on your team’s account. Just navigate to the Sync feature in the Craft panel and select your screen’s destination. From here, you can even start a new prototype and share it with your team for comments.

Sync makes it ridiculously easy to keep your InVision prototypes up to date.

Sync makes it ridiculously easy to keep your InVision prototypes up to date.

Share your prototypes through invitation or by sharing a link, and it’s delightfully simple for your teammates to click through your clickable prototype and add comments. Developers can explore the layout details with Inspection mode, saving you hours of spec work and the need to update files as the design changes.

Inspect mode makes it easy for teammates to see the styles in your designs and even grab CSS.

Inspect mode makes it easy for teammates to see the styles in your designs and even grab CSS.

Invite Your Team to Comment, Annotate, and Draw on Your Designs

Craft addresses another pain point for remote collaborative teams that don’t have the luxury of meeting in the same room with a whiteboard. Using Freehand, designers can capture parts or all of their design document and instantly sync to a sharable project on InVision where everyone on the team can annotate, comment, and even draw.

In your document, navigate to the Freehand panel and choose to create a Freehand project from your document or selected artboards.

Create a Freehand space for free-form collaboration.

Create a Freehand space for free-form collaboration.

After the plugin generates a freehand space, you can share the link with anyone and begin collaborating. The tools are fairly straightforward, and Freehand tracks who says what, making it easy to work together seamlessly. As you update your designs, you can use the panel to update the freehand space instantly. Now, no one is confused about which of the fifteen icons, exactly, the boss is talking about.

It's almost like being there.

It's almost like being there.

IV. Bonus Features for Your Own Workflow

While I was most excited about Craft’s potential for team collaboration, the suite comes with other plugins that are just as compelling for streamlining the individual design workflow.

Quickly Add Dummy Content from the Web

It only takes a few instances of “wait, what does that lorem ipsum text mean?” during meetings before you concede that you need to use real content in your final mockups. But who wants to have to scour the Internet for photos, headlines, posts, and other dummy content to drop into their designs and screen mockups? After the third or fourth name, it can be hard to make up fake users from your own imagination.

Data is a delightful plugin in the Craft suite that makes subbing in content a breeze. Select a shape in your design and navigate to the Data plugin where you can drop in photos from your own folders or instantly add random images from Unsplash from any category. You can even create your own custom queries to use again and again.

Instantly grab dummy content and drop it into your design without leaving Sketch.

Instantly grab dummy content and drop it into your design without leaving Sketch.

Adding text such as headlines and body copy is just as easy—just select the desired text box and choose from the many categories under the Type tab. My team especially enjoys using headlines from the “Motivation” category as placeholder content.

Your life will have much more meaning with Craft.

Your life will have much more meaning with Craft.

Data also allows you to add content from any website, in case you need something less random. The process is essentially the same, and can have your designs chock-full of relevant, real data in no time.

Generate Evenly-Spaced Rows and Columns of Content

Another reason you need Craft in your life right now is that it makes duplicating objects and groups of objects into perfectly-ordered, evenly-spaced rows and columns in a snap. Forget the tedium of copy+paste. Just select an object or group, and then specify the number of columns and rows, as well as the spacing.

Specify the number of objects in each direction as well as the spacing.

Specify the number of objects in each direction as well as the spacing.

I am especially charmed by the way it integrates with the Data plugin—duplicating dummy content generated by Data will give you newly-generated, fresh bits of content in each frame. Need a huge grid full of user photos? Done. Laying out a content list for an articles page with photos, headlines, and preview copy? No problem.

After dropping in some dummy content from Data, make a whole list instantly.

After dropping in some dummy content from Data, make a whole list instantly.

Add Files Directly from iStock and Getty Images

Are you past the filler content stage and need a high-quality hero image for your mock? The latest addition to the Craft Suite is the Stock plugin, which allows you to link your design in Sketch directly to your account with iStock or Getty Images. Search for relevant images within the panel and add them into your design with one click. One less interruption to your design workflow!

Drop high-res stock images from your account into your design without having to open a web browser.

Drop high-res stock images from your account into your design without having to open a web browser.

Conclusion

Design teams are always looking for ways to improve their collaborative workflow and keep everyone in sync. Sketch and InVision changed the landscape for interaction designers. Craft enhances the potential of these tools for your team, streamlining and connecting everyone’s process no matter the distance. With the Craft suite of plugins for Sketch, you can shave hours off your design work.

About the author

Bree Chapin, United States
member since April 26, 2016
Bree is a multi-skilled soup-to-nuts designer with 10+ years of interaction design and five years with a strong focus on UX and product development for web and mobile. She's had the great fortune to work on projects across a wide range of domains and on teams of all sizes, from developing IoT startup MVPs to designing features on long-established finance industry tools. [click to continue...]
Hiring? Meet the Top 10 Freelance InVision Experts for Hire in November 2017

Comments

comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great design posts.
Free email updates
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Bree Chapin
Designer
Bree is a multi-skilled soup-to-nuts designer with 10+ years of interaction design and five years with a strong focus on UX and product development for web and mobile. She's had the great fortune to work on projects across a wide range of domains and on teams of all sizes, from developing IoT startup MVPs to designing features on long-established finance industry tools.