Take you to know the Super good sketch plugin

Take you to know the Super good sketch plugin

First, the method of installing the plug-in

Sketch there are two ways to install plug-ins, one is the traditional way of installation, and the other is to use a small software called sketch Toolbox to install quickly.

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

Open after you can see the name of a folder, is a plug-in. The following is the static plug-in installed on the computer. At present sketch official online scattered some of the plug-in compression package we can download the corresponding compression package, and extract to the above plugins below, and then restart the sketch, if successful, the Plugins menu will appear the corresponding options.

Alternatively, you can unzip the folder directly and select the inside. Sketchplugin the end of the file, double-click Install directly, the following prompt appears, then the installation succeeds.

However, using this method to install plug-ins, need to find a plug-in, very cumbersome. So you remember the static electricity in the first section of the sketch tutorial to everyone's two? , and can be used after downloading and installing. Open sketch Toolbox, you will see a variety of plugins, such as:

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

Second, plug-in recommendation

OK, this time you may have a choice of phobias, so many plugins, where do I choose from? Do not worry, static electricity to recommend several of the most commonly used.

Recommended plugins: Content Generator Sketch Plugin

When it comes to app design, we may use a variety of avatars to create real-world results. But looking for an avatar and masking is a very time-consuming thing, but we don't want to do the same with the Avatar, right? This time the artifact is coming, download this Content Generator Sketch plugin now. Just select the graphic you want to fill the avatar with, and he will help you randomly select and fill in the appropriate image. Look at the effect.

This plug-in is relatively large, about 80m, so please be patient and wait for the download to complete. If the download is slow, then use this URL to download directly with Thunderbolt, and then unzip and copy it to the folder as described above:

Of course, it is also possible to generate user names randomly.

You can also have a random large segment of text generation.

Well, wouldn't that be better than making an element and then constantly copying and pasting? After all, we want to simulate the most realistic effect, right?

Recommended plugin: Sketch Measure

After we finish the design manuscript, 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 way of labeling, in the software in the label greatly improve our efficiency. We only need to select two elements, and then choose the Plugins menu, you can label the image size, text size, spacing and so on, and so on, this does not need your own one of the typing up oh, just want to tell sketch you want to mark those elements, to mark what, you can do a button. The efficiency is greatly improved, we can spare more time to design our works better.

Tips: To mark, first select one or more elements to mark, and then select the plugins in the label to complete the automatic labeling. The finished design manuscript, the direct output can be to the front-end development engineer.

Another thing to note, when labeling, be sure to choose the appropriate design Resolution. iOS is labeled iOS as an Android-based solution. This will ensure that your design manuscript is correctly implemented by the front-end engineer. Electrostatic thinking, this label is very convenient, especially when labeling fonts, plug-ins directly according to the labeling solution to the correct font size, convenient for development engineers to call. For iOS and Android annotations, a single set is usually selected. For example, iOS chooses Retina, and Android can choose xxhdpi or xhdpi.

Recommended plugins: Icon Stamper

Icon Stamper is a plugin that can generate multiple icon sizes for iOS in one click. You only need to make one of the biggest icons, this plugin can automatically help you to generate a set of various sizes of icons, and then can be exported at once. Not a single design in PS. Come on, let's see 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 ". When the design is complete, select all the elements, press Command+g to group, and select the group.

In the third step, select Plugins > Icon-stamper > Icon stamper to generate icons of various sizes.

Fourth step, select File>export, you can export in batches.

Recommended Plugins: Rename it

For app designers, we often need to cut out different sizes of icons to suit a variety of models or resolutions. At this point, we need to put some parameters of the file name or layer name, so that we can quickly know that the properties of this layer, such as the length of the width of high and so on. Or, we need to name the file or layer in bulk. The Renameit plugin can help us easily.

Goal: Batch Name the three shapes in the graph according to the width height.

The first step is to select the elements you want to batch name.

Second, select Plugins > Rename it, and in the popup dialog box, set the naming convention. Here to illustrate,%N%w These are variables, will be automatically filled according to the size of the picture, we need to set this rule, and then we enter the following parameters (please fill in the file suffix), and then determine. This time the layer will be in accordance with the rules we want clearly.

Layer Naming rule parameters:

-Enter the number "+" and the text you want to add a fixed character (e.g.: + button) in the appropriate location

-"%N" adds the layer name sequentially with a numeric suffix. "%n" is the number that is added in reverse. (For example: item%N)

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

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

Recommended Plugins: Duplicator

With this plugin, we can copy and arrange an element in regular order, and we can choose the number of copies and the spacing. The use is very simple, static electricity will not demonstrate.

Recommended plugin: Sketch QRCode

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

Take you to know the Super good sketch plugin