Tips: Using Sketch on a Team Project

The proverb “Too many cooks spoil the broth” is well known, but as many designers will often agree there are times in a project with a tight deadline you need “all hands on deck.”

Our UX team had to take this approach recently to turn around a large number of wireframes in a ridiculously short time. Locked in a War Room for a week we battled through delivering some key pages and functionality across a number of breakpoints and scenarios.

Aside from the pressure of the looming deadline we were also a new team that is yet to work together collectively. Our approach was to look at the task and debate between Sketch or Axure, settling on the former as more of the team were familiar with the software. The bonus for our UI team was that they could refine, swap or build out symbols when we passed the baton to them.

Sketch has made great strides in symbols in recent releases. There is no end of articles every day of tips and best practices, but we found out that when we tried to collaborate on files, there was no common approach amongst the team. Some created colossal symbols while other created more specific micro-components.

The power of symbols is let down by human error and governance. Where we failed from the outset was not defining guidelines and as our deadline approached and we tried to combine or share files it ended up causing more issues than it helped.

Below is a list of things I wished we had done before we created that first file.

Before you start

  • It is better to agree on sizes and structure up front and work on components across those sizes, rather than pages. Building and sharing components are faster than an entire page. If we’d used a tool like brand.ai, we could have built things a lot quicker and more consistently.
  • Dividing up works among ourselves would have made things easier.
  • Always work on another version of Sketch behind the current release, at the time we migrated to 4.2 it killed some productivity.
  • Work in the same space if possible — this allowed us to ask questions without disturbing the flow or work so far. One of the days when we used two rooms, we lost time running between rooms to look at a screen, and some parts needed to be redone.
  • Agree on color palettes up front if you are using Invision’s Craft app. It is better to use the shared library in case there are any changes along the way.

Agree on a Code of Practice

  • Set checkpoints every couple of hours to make sure there are no overlaps. That could be done by one person and shared.
  • Namespace the files that you are sharing, e.g., don’t send a file that uses a symbol/shared style called “carousel” prepend it to “Andys_carousel.” Common names of symbols can cause confusion.

Playing Your Part

  • ALWAYS NAME YOUR LAYERS!
  • Keep your symbols small and sensible. We ran into problems when some of the team created monolithic symbols. If you are unsure on how to judge the scale of a symbol then refer to a CSS framework like Bootstrap or Foundation we found is a good guide.

Working Together

  • Always work on a version of Sketch behind the current release, 40.2 killed some productivity when it was released as it broke the use of some files and plugins.
  • Make sure everyone is using the compatible versions of sketch before you begin
  • To change the name of your symbols, and avoid crashing, you need to do it on the “Symbols” page, not the art board or it won’t change anything. We found this little plugin useful for symbol updates: https://github.com/exevil/sketch-rename-instances
  • When sharing sketch files on slack or airdrop only include what you need to send, not a full art board.
  • Save file space on things that won’t change by exporting layers to bitmap before sharing.
  • Copying symbols to different sketch files doesn’t maintain label changes.
  • When working on common elements draw it on a whiteboard or share a sketch and make sure everyone understands the drawing before starting. This keeps everyone on the same page and maintains momentum on the projects.
  • Even in the heated times try and stick to good symbol etiquette. When you return to a file, it takes longer to fix than doing it right the first time.
  • Symbols don’t like strings of text that could wrap over multiple lines. There is no auto vertical alignment, so some instances can look misaligned.
  • If you are on a mac use Airdrop if you can to share files, faster than emailing it.
  • Write up weird naming conventions in a visible space if you really can’t follow a pattern. At least people then know what to watch out for.
  • Make sure everyone understands the basics of building symbols. This means you can make one scalable symbol instead of four down the line.

Good Luck

While this may seem like a short list of things it did cost us precious time when we are up against a deadline.

One last suggestion is, if possible get the rules you plan to stick to up on a common whiteboard or shared digital space before you begin… Then there will be no arguments when the heat is on.

Show your support

Clapping shows how much you appreciated Andrew Cetnarskyj’s story.