Improving efficiency but not known stormy sketch

It has been found that while stormy sketch is a good design tool only, mastering practical tips can make your job easier. So from this issue, I will write some little-known sketch knowledge, including shortcuts, components, libraries, practical plug-ins and so on. I hope this series of articles can be useful and inspiring.
Since it is stormy sketch knowledge, it is often difficult to systematize to sort out, may be more scattered, so you see interested in the small skills best to try, should be able to quickly understand.
Everyone has their own habits and routines, so it’s hard to know whether my writing is hot or cold for you. I’m just sharing my own little tricks that I’ve been using stormy sketch for the first time to the present, which I feel are rather cold-blooded but useful. So, I learned a little bit of praise.

1. Stormy sketch-quickly modify object properties in the property bar.

Usually when you modify the object, you can choose the object and zoom directly, the result is often prone to deviation, such as decimal pixels, no alignment and so on, directly in the right property bar through the numerical operation will be much easier.

1. Stormy sketch: mouse, Shift, Option to achieve rapid modification.

The property bar on the right side of the main interface allows you to click on the property value to increase or decrease the value quickly (note that the mouse should be placed in the upper and lower positions of the text, and the left and right arrows appear before you can modify it quickly). If you hold down the Shift key, Sketch increases or decreases the value by 10 times, and holding down the Option key increases or decreases it by a tenth.

2. Stormy sketch:the property bar also supports composite modification.

Support simple mathematical formula, support style unit L (center point left alignment) R (center point right) C (center point center center) M (center point center point center center point top) T (center point bottom alignment) B (center point bottom alignment), support fillet fast customization (format is X; Y; N; M, order is left-up-right-down-left), can help fast fine. Is the adjustment really high?

Number + function combination operation

Simple mathematical formula calculation

Rounded corners setup

2. Stormy sketch: tips for layer operation

When you first start using sketch, you often misoperate, such as shifting the wrong layer. For example, when you first select a layer and move it, you still move the layer group, which is a headache. So there are several shortcut keys in stacking multiple graphs.
When the layer is buried deep in a bunch of folders, you can hold down the command + left mouse button directly, you can quickly select the layer within the group.

If you press Option, you will select only layers that are entirely located in a graphic area to avoid misuse. (For example, moving the interface elements on a large image with a background at the bottom, but not wanting to select a large image at the bottom, can be handy with Option besides locking the layer.)

Multi graph stacking

Multi choice and do not want to move certain elements.

At the same time, holding option + command can move the layer independently. The mouse focus can not be on the selected layer. If you do not press these two shortcuts, you can not move outside the element area. When there are a large number of layers in the interface, you can avoid misoperation to other layers. (I strongly recommend that this key combination is often used and is very helpful in solving the problem of choice movement)

If there are overlapping layers, especially when the upper layer obscures the lower layer, it is difficult to select them directly. Right-click on the top layer to select the desired layer, and move or modify it with the shortcut key mentioned above.

Alignment layer: Control-Command-V vertical equivalence; Control-Command-H horizontal equivalence, this shortcut key is very common, much more convenient than each click on the upper right-hand corner of the alignment tool.
Layer Adjustment: Zooming in and out of layers is a common practice, but if some layers have layer styles, such as edge tracing, projection, rounded corners, and so on, you can’t zoom in at the same time when zooming out directly. For example, if the shapes with 50 PX lengths and 10 px lengths are changed to 100 PX lengths and widths, the edges are still 1. 0px. How can we solve this problem?
In fact, sketch has two types of scaling, one is direct scaling, does not change the element style only modify the basic attribute size; the other is transform scaling, you can scale the basic attribute and style attributes at the same time. The operation is to select “layer > >” transform “>” zoom “from the menu. “(or by Command-K), this also works for symbol.

3. Stormy sketch:layer constraint techniques

First, look at what is a layer constraint and look directly at the picture. The layer constraint can achieve the following effect:

Is it convenient to do interface adaptation? How can it be done concretely?

1. Stormy sketch:layer zoom fixed margins

In the element attribute bar, you can find constraint settings that set the relationship between child elements and parent elements as needed (Note: Layer constraints must be established in a layer group, without the concept of a group, layer constraints cannot be used; child parent relationships refer to reference relationships, such as white blocks relative to the bottom in the following figure The blue block, the white is the child, the blue is the parent, and the resizing setting is the child.

Sub parent relationship

Apple official component settings for layer constraints

2. Stormy sketch:symbol content automatic adaptation

When there is cursor in the input item, the position can be changed automatically according to the length of the content.

4. Stormy sketch:graphic manipulation skills

Rotation is a frequently used operation. There are many ways to rotate layers in sketch, depending on the situation.
Setting the fillet value directly by setting the angle of the property bar is very convenient when the rotation angle is very clear.

The advantage of rotating through the rotation option on the toolbar is that the object can be rotated anywhere on the screen after selection.

Rotate directly through the shortcut key, hold the command key and drag one of the object’s handles to rotate, this shortcut, in need of multi-frequency adjustment rotation, will be very practical.

In addition, add a little knowledge beyond rotation, and comand keys are also useful when doing transformation. It allows object transformation to be adjusted in one direction only.

5. Stormy sketch:mask technology

Masking in sketch is powerful, not only for layers, but also for layer groups. But within the masking group, any new layer or layer group will be masked automatically, and sometimes it can be a hassle.
There are 2 ways to remove the mask.
Drag the layer or group out of the mask group, but this will destroy the element structure.
Select the layer you want to remove directly, and right-click to ignore the underlying mask. The advantage is that you don’t destroy the object’s organizational structure.

There are two forms of mask in sketch. One is based on graphics, the other is based on transparency. Gradients are often used to make the image fade. These 2 are very common.

6. Stormy sketch:sketch file compression

Using a lot of high-definition graphics in source files often makes the whole sketch file very large, one is inconvenient to transfer, the other will also cause file stuck, slow response. At this point, you can use the layer – picture – the smallest size to quickly compress the files.

7. Stormy sketch:batch replacement colors

Modifying colors on multiple pages and panels can be time-consuming without symbols. In fact, sketch has built-in batch modification of color function, but probably not many people use.
Specific operations are: Edit – find and replace color (option + Command + F), need to pay attention to color transparency, according to actual needs to determine whether to check.

Photo source: Sketch official website

8. Stormy sketch:quick switch view

During the design process, you often need to switch different views to view the design content, which is almost the use of UHF requirements! So for these shortcuts, we must mention here:
Command +1 fully displays all the contents in the page, which is suitable for global display and view consistency.

Command + 2 enlarges the selected elements to the right screen size, and one of the great things about this view is that you can copy the duplicated elements directly into the middle of the current element. This feature is very practical, and you’ll know it’s useful if you try it.

Command +3 displays the selected elements in the center of the screen.

Command + 0 previews the page with the actual pixel mode, that is to say, look at the design effect under 100% size.

9. Stormy sketch:layer alignment

Layer alignment is also a frequently used operation. When aligning directly with objects, Sketch aligns the layer to the outermost layer of all selected objects. But how do you want to map the layer to specific objects?
For example, if you want the two elements in the following figure to be centered with a square as a reference, you should first use the lock button in the layer list or use Shift-Command-L to lock the layer, and then perform the alignment operation.

10. Stormy sketch:set the default value of sketch shape.

When sketch is first used, a new rectangle is created, each time it brings its own edge tracing, and then manually closes the edge tracing, which is troublesome. Can this default value be changed? Certainly.
Operations: First create a rectangle without edges, then select layer-style-set style as default (this function was previously in Edit and was updated and merged into style). Get it done. Next time you create a new shape, you will use the style you just set as the default value.

In addition to that, the article mentioned in the small skills, must try their own ah, otherwise you have read or you do not need, do not believe it? Then try it.


1 thought on “Improving efficiency but not known stormy sketch”

Comments are closed.