There is no denying that Sketch is becoming more and more influential. Many people even look down on designers who still use Photoshop. Of course, this is extreme. If the focus is only on efficiency, I think it’s a little too much detail, and we try to look at it from a higher perspective.

As a fresh blood of design tools, Sketch is not only a pursuit of efficiency, but also an integration of systematic thinking in design. In other words, to make good use of Sketch, we must first have a relatively complete working system, and then put it into operation through Sketch.

If you are also working with Sketch, this article will give you some inspiration and help.

What are the working systems

A good tool will influence our thinking to some extent, and an integrated tool will inspire us to integrate. Sketch is a tool that combines the strengths of PHOTOSHOP and AI and allows us to integrate all aspects of our work in a systematic way that makes it very efficient to manage. Even if you don’t use Sketch, I hope you have it, because it can increase your sense of control over design and give you a better overall thinking.

This system includes the following aspects:

  • Visual design

  • Visual specification

  • Slicebox

  • Highly integrated annotations

  • Version of the iteration

  • Visual Update list

  • Complex control annotation

  • Design summary

1. Visual scheme

Needless to say, Sketch is similar to the AI multi-artboard model, which is the driving force for many people to use Sketch. During the construction of the design scheme, the direct drag and use of the same elements between different drawing boards is extremely efficient. The most important is the way of combining Pages and Artboard, which can organize the outputs in the working system together, greatly reducing the maintenance cost and the memory burden of searching for files. If you’ve ever looked through a mountain of PSD, you’ll love the relief.

2. Visual norms

Large projects will certainly have visual specifications, but if you are the only designer on a project, I suggest you put together a visual specification as well. The function of norms is on the one hand to unify ideas, on the other hand to sort out ideas. In the process of creating a specification, you will form an overall view of the project, view the current project from a higher Angle, and have a stronger sense of control. Another point is that projects are iterative, and without a specification, your own plan will be inconsistent during implementation.

We just need to open a new Pages in the current document, will clarify the specification, visual scheme and visual specification in one document, very elegant. As for how to build a visual specification, enough to write several articles, you can view before UEDC summary of an article (http://www.zcool.com.cn/article/ZNDIwMDY4.html).

3. Slicebox

If you managed to organize all your cuts into a single file during your Photoshop days, congratulations, you have good work habits. If you haven’t already done this, I suggest you do it now. It’s very easy to find and manage all your slices together. The other advantage is to reduce the interference to the design draft, many ICONS have two states, or more, it is inevitable to hide in the design draft to hide, very troublesome. I believe that as a designer, you will feel very comfortable.

I called this little system a Slicebox. As with the visual specification, just open a New Pages in the current document.

4. Highly integrated annotations

With the help of plugins, Sketch has freed us from tagging. What I like about Marketch is its flexibility, whether it’s local or online, depending on your needs. And it has a particularly big advantage, which I’ll talk about later. It’s important to note, however, that these annotation plugins require a lot of layer management. Not to say that layers are a mess, the plugin can also generate annotations perfectly, and problematic annotation files can cause a lot of trouble in development. So in order to generate usable annotations, the plugin in turn forces you to tidy up your layers.

5. Version iteration

While it is still possible to open Pages for larger iterations, I do not recommend doing so. The reason is that there are too many Pages in a document, which requires high computer performance. The other one is that old and new Pages are mixed together. Although separated by Pages, it is still a kind of interference, so create a new document. Sketch aggregates recent documents on the startup page, so it’s relatively easy to manage.

6. Visual update list

This is useful when there is a visual update, but it is not a big overhaul, because you need to let the developers know where the changes have been made. Verbal communication is too inefficient, so it is clearer and more professional to submit a document to the developers. This part opens a new Pages unified management in the document.

7. Annotation of complex controls

You must be wondering why the original manual annotation is needed when there is a annotation plug-in. The reason is that when the file is very complex and layered on top of another, the plug-in stops working and the exported annotations are completely unavailable. Therefore, it is acceptable to mark individual parts manually.

8. Design summary

When the project reaches a certain stage, it can be summed up appropriately. Any form is good. If it is a project that you are more satisfied with, you can sort out and send it to the station or other design platform, which will form precipitation and increase some influence.

How to maximize the pursuit of efficiency

Sketch is synonymous with efficiency in the design world, but it cannot maximize efficiency by itself. We need to use it flexibly.

This section includes the following aspects:

  • Make notes more than just notes.

  • Symbols and shared styles

  • Use the plug-in

1. Make notes more than just notes.

As mentioned above, we can make the annotation online. Here we will talk about it in detail. The biggest benefit of going online is to improve communication efficiency. It’s efficient enough to use a plugin to generate native markup, but it’s a shame to stop there. The real power is to make markup online, which is what the plugin builders intended. Annotations can be uploaded to a company server or hosted on a third-party website and accessed directly from a browser.

Here’s a way to make tagging online. Some people might mention Zeplin, but Zeplin involves invitation, registration, and fees. It’s too cumbersome and unstable, so I won’t go into it here. What we need to do is for designers to do things quietly, maintain and update themselves (this is very important), just gracefully send an address to the developers. There are several development concepts involved in this approach, and I know it can be a bit of a headache for designers, believe me.

Here are a few concepts that you don’t need to know how they work, just how they work:

(1) Code hosting

I use this site for code hosting, https://coding.net/, free account can create 5 projects, perfectly enough. Using the website’s “Pages service”, you can create a static site, the domain name of what we do not need to manage, the site itself will generate, which is exactly what we need. Some companies may mind hosting the design to a third party, but if you have a similar mechanism in-house, that’s great.

(2) Git repository

Git is an open source distributed version control system that can manage project versions efficiently and quickly. We use this tool to manage our annotation files.

(3) SourceTree submission tool

SourceTree is a visual Git management tool that is useful for non-developers unfamiliar with Git commands. In fact, the above two websites have already helped us, we just need to use this client to submit local annotation files.

The reason I spent so much time on this is that we packaged the design proposal, visual annotations, visual specifications, cut-outs, and visual update lists from the working system into a document with Marketch output. This means that the annotation document is used flexibly, and it presents a complete and rich design document. This online document, development can see, product interaction can see, design colleagues can also see, everyone needs.

2.Symbols and shared styles

Needless to say, these are two well-known features. However, the form of Symbols organized with Sketch is not conducive to viewing. It is suggested to combine visual specifications with Symbols, that is, to sort out a visual specification with a clear structure. All the controls in the specification are Symbols, which will be very efficient when dragging and using controls. Similarly, text in the specification is defined as a shared style.

3. Use plug-ins

We know that what makes Sketch powerful, not just in itself, is largely due to plugins, and a lot of the cool stuff is done with plugins, just to name a few that are used a lot.

1.Marketch

2.Craf T (comprehensive plug-in, autofill, shared style library, etc.)

3. The Sketch I18 N (if not accustomed to using in English or English is general, don’t tangle, localization plugin to use, http://sketch.im/plugins/2).

4.Dyna mic Button (dynamic Button, I believe every designer wants to change the length of the Button after the text changes, this plug-in helps you solve this problem)

5. Ren ame It (renaming tool, play a lot, http://sketch.im/plugins/17).

6. Run ner (using the command line to improve the efficiency of your work, the occasional oh, because a lot of stylist for the command line operating mode is not a cold, http://sketch.im/plugins/12).

Iii. Multi-person collaboration in large projects

The ultimate goal of multi-person collaboration must be dynamic, real-time and unified. Dynamic is easy to understand, projects are constantly evolving and iterating, and real time is about keeping everyone aware of these changes, because the project style is highly consistent only when it is synchronized. We know that visual discipline is the most important part of multi-person collaboration, and that it is a powerful tool to ensure unity of mind. But the visual specification was too static, and we needed to go one step further and make the visual specification dynamic and real-time.

This section includes the following aspects:

  • Visual specification with Craft

  • Dropbox synchronization tool

  • Online visual specifications

1. Visual specification: Craft

Craft is best known for its auto-fill feature, but today we’re going to introduce another core feature: Library. This feature allows you to combine common palette, text styles, components, and ICONS, and you can see that this is one of the major visual conventions. The biggest advantage of it is that it is exported and imported in the form of files. If one party adjusts the file, other people who refer to the file will be prompted to update it. At this time, just click the update button, which provides the possibility for resource sharing. That is, of course, assuming that we have a visual specification sorted out and then tucked it into a plugin.

2.Dropbox Synchronization tool

When the file is done, it is natural to need a synchronization method to realize file sharing. The biggest problem with Dropbox right now is getting over the wall. But if you do, Dropbox for Team works really well. Basically, Dropbox creates a folder for the Team to share. All members of the team are automatically updated in real time.

With these two tools, a set of collaborative visual specifications can be created by simply placing the finished Library in a shared folder in Dropbox. Of course, if it is difficult to ensure that all members can climb the wall, we can also use the “Git repository” method we introduced earlier, slightly troublesome is that every update needs to be manually committed and pulled.

3. Online visual specifications

This has already been mentioned, but it is hosted online with annotations, so that the static online specification can be viewed by all during the team collaboration process. A well-structured online specification allows colleagues to quickly understand the big picture, and then it becomes more efficient to keep the specification dynamic with a shared Library.

The work system and collaboration mode built around Sketch are basically covered. Due to space, some parts are not covered in detail, but I hope this idea can bring some practical help to you. If you can use it, it will be great.

Sing Sing by Sing Sing

Picture Constrast Network

Please do not transfer to other public numbers without permission

Please leave a message for the public to be granted permission

· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·