Show you the sketch plugin

Through the last two sections of the article, you may already have a general understanding of the basic operation of the sketch software. But many friends may have doubts, "as if the sketch function is not so strong ah?" Is it a common vector drawing software? "Well, you're wrong, because you've overlooked something--plugins. Plug-in is to allow sketch to maintain a strong unique stunt, many software does not seem to support the function, through plug-ins can be achieved, greatly improve work efficiency. Below, static electricity to introduce under sketch commonly used, by everybody welcome plug-in.

　First, the installation of Plug-ins method

Sketch has two kinds of plug-in installation methods, one is the traditional installation method, the other is through a small software called sketch Toolbox to install quickly.

First look at the first installation method, open the sketch (here with the latest version of the SKETCH3 as an example), and then select Menu Plugins>reveal Plugins folder, you can open the plug-in folders. Open to know the path, do not deliberately to remember where the path.

Open after you can see a folder named, is one of the plug-ins. The following is the plug-in installed in the electrostatic computer. At present, sketch official online scattered some of the plug-ins of the compression package (RELATED links: http://www.bohemiancoding.com/sketch/support/developer/) We can download the corresponding compression package, And extract to the above plugins below, and then restart sketch, if successful, the Plugins menu will appear the appropriate options.

Alternatively, you can extract the folder directly and select the inside. Sketchplugin the end of the file, double-click the direct installation, the following prompts, the installation was successful.

However, the use of this method to install Plug-ins, need to find plug-ins, very troublesome. So do you remember the static electricity in the first section of the sketch tutorial to give you two download addresses? One is the sketch installation file, the other is about the plug-in sketch Toolbox. Address again to everyone, not under the classmate must be installed Oh (sketch Toolbox download Address: Http://pan.baidu.com/s/1dD3VeUX), download and installation can be used. Open sketch Toolbox, you will see a variety of plug-ins, the following figure:

Simply click on the Install button, you can easily install plug-ins, no longer time-consuming and laborious to find.

　　Second, the plug-in recommended

OK, this time everybody may have the choice phobia, so many plug-ins, I want to choose from? Don't worry, static electricity for everyone to recommend some of the most commonly used.

Recommended plugins: Content generator Sketch Plugin

When doing app design, we may use a variety of avatars to create real results. But looking for the avatar and masking is a very time-consuming thing, but we don't want to make the avatar the same, right? This time the artifact came, quickly to download this Content generator Sketch plugin bar. Just select the graphic you want to fill the avatar with, and he will help you randomly select and fill in the appropriate image. Let's see the effect.

This plug-in is relatively large, about 80m, so please be patient waiting for the download to complete. If the download is very slow, then please use this URL to use the Thunderbolt direct download, and then follow the method above to extract and copy to the folder: https://codeload.github.com

Of course, random generation of user names is also possible.

There can also be a random large segment of text generation.

Well, this effect is not better than doing an element and then constantly copy and paste more handsome? After all, our effect chart is to simulate the most authentic effect, isn't it?

Recommended plugins: Sketch Measure

After we finish the design draft, we need to tell the front-end development engineer, the picture is how big size, this text is how big font size, spacing is how much. This time, sketch messure to come in handy, compared to the traditional annotation way, in the software annotation greatly enhances our work efficiency. We only need to select two elements, and then select Plugins menu, you can mark the picture size, text size, spacing and so on, and so on, all this does not need your own typing up oh, just tell sketch you want to mark those elements, to mark what, you can be a key to get it done. The efficiency is greatly improved, we can spare more time to design our works better.

Tips: To mark, first select the one or more elements to mark, and then select the plugins in the callout way to complete the automatic annotation. Note the finished design draft, direct output can be given to the front-end development engineer.

In addition to pay attention to a point, marking the time, we must choose the corresponding design resolution. Android is labeled as an Android solution, and iOS is tagged as ios. This will ensure that your design is implemented correctly by the front-end engineers. Static electricity thinks, this annotation is very convenient, especially when marking the font, the plug-in directly according to the annotation solution translates the correct font size, facilitates the development engineer to call. For iOS and Android annotations, generally choose a set of each can be. For example, iOS chooses Retina, and Android can choose xxhdpi or xhdpi.

Recommended plugins: Icon Stamper

Icon Stamper is a key to generate iOS a variety of icon size plug-ins. You only need to make a maximum icon, this plugin can automatically help you generate a set of various dimensions of the icon, and then you can export. No need to design a single one in PS. Here, let's take a look at how this plugin is used.

Preferred, select Menu File > New from Template > IOS App Icon

The second step is to design your icon in the artboard named itunesartwork@2x. When the design is complete, select all the elements, press Command+g to combine them into a group, and select the group.

The third step, choose Plugins > Icon-stamper > Icon stamper to generate a variety of size icons.

The fourth step, select File>export, you can bulk export.

Recommended Plugins: Rename it

For app designers, we usually need to cut out different sizes of icons to accommodate a variety of models or resolutions. At this time, we need to put some of the parameters of the file name or layer name, so that we very quickly know that the properties of this layer, such as the length and width of the height and so on. Or, we need to name the files or layers in batches. Renameit Plug-ins can help us easily.

Goal: Batch the three shapes in the diagram by their width and height.

The first step is to select the elements to be named in batches.

The second step, select Plugins > Rename it, in the pop-up dialog box, set the naming rules. Here to explain,%N%w These are variables, will be based on the size of the picture to automatically fill, we need to set this rule, and then we enter the following parameters (please fill out the file suffix yourself), and then determine. This time the layer will be according to our rules clearly.

Layer Naming rule parameters:

-Enter the number "+" and the text you want to add can be added in the appropriate position of the fixed characters (such as: + button)

-"%N" adds a numeric suffix to the layer name in order. "%n" is a number that is added in reverse. (such as: Item%N)

-Keep and move the original layer name: When entering a new layer name, use the "*" number instead of the original layer name. (such as: Big * button)

-Add the length and width of the layer: enter "%w" or "%h" to add the length and width of the layer. (such as: Rectangle%w or rectangle%w x%h)

Recommended Plugins: Duplicator

With this plugin, we can copy and arrange an element regularly, and we can choose the number of copies and spacing. Use is very simple, static electricity will not capture the demo.

Recommended plugins: Sketch QRCode

Generate vector two-dimensional code, directly in the sketch solution, no longer to find two-dimensional code generation site.

Ok,sketch's powerful right-hand arm has been introduced. With these plug-ins, we can make the design more convenient. The next section, we focus on sketch pen tool, after all, vector software, the path of what must be and skilled, small partners, if found that there are other good plug-ins, welcome to exchange, but also welcome attention to my micro-letter jingdesign91. We'll see you next time.