Super Practical! The 3 most common practical tips for master Sketch

Editor's note: In the face of sketch such a new application, who want to directly achieve high efficiency, high-yielding, skilled use of the level. So today @ Choking Red Leon is here to introduce three tips on Sketch, which are usually only visible to experienced Sketch masters.

Translator's public number: ZHENLEI_PD, recommend the students concerned yo. This article is authorized by the translator to set up the release, without the author's authorization do not reprint, thank you:)

What's most comfortable--it's our comfort zone!

Everyone has their own comfort zone, as designers, we will have four or five apps that can be used almost in sleep, hundreds of hours of accumulated muscle memory, shortcut keys and familiar little quirks will make us use these applications like lying in an old but comfortable armchair. But when we try to switch to a new tool, we always find it too hard to use-at least for the first few weeks.

Tip 1: A ninja that makes a keyboard shortcut

Sketch keyboard shortcut design can not be more concise, most of the time we just need to command plus a key to achieve the goal, and even more often as long as a single key (such as a: Create an artboard artboard). Rest assured, when you design in Sketch, you never twist your fingers together.

Many shortcuts are very intuitive, or have the same keys as the same features in Photoshop, so they are often overlooked-but they are the most used shortcuts.

Single-key shortcut keys:

A: Creating Artboards

T: Create Text

V: Create vector

O: Create a circle

R: Create Rectangle

U: Creating rounded rectangles

Multi-key shortcut keys:

Z + click/Selection: Narrow the screen to a specific area

Enter: Enable edit mode for the currently selected layer

Shift + TAB: Select the next layer (the previous layer is single-click Tab)

Option + drag layer: Copy a new layer and move

Option + hover Layer: shows the distance between two layers

Command + click: Select a layer in a group

Command + R: Rename a layer or artboard

Command + Shift + H: Show/Hide Layers

Command + scroll Wheel: Zoom page

Command + Shift + E: Activate export mode

Command + Option + C: Duplicate layer style

Command + Option + V: Paste layer Style

What shortcuts are important and ultimately depends on your work environment and work content, and if you want to learn more about Sketch shortcuts, Jean-marc Denis provides a list: Sketch Keyboard shortcuts

TIP 2: Carefully organize your pages and Artboards

If you use Sketch to draw the user interface, it is often necessary to create multiple other styles of a page to explain and demonstrate the interaction and effects on the page. Typically 2-10 artboards are enough to depict a page, depending on the number of dynamic content on the page.

Create a new artboard (if you forget how to do it: CMD + A), it will appear directly to the right of the last existing artboard, so they are about a 100px-spaced queue. But maybe you don't want the artboard to be arranged in this form, for example, to put the artboard in the direction of the axis.

The cleanest interface should be organized from left to right, or from desktop to mobile, so that all the interfaces are lined up on a new line. All you have to do is to place the artboards of each interface neatly in a horizontal or vertical direction.

When you plan to design a new page, you can create a new one in Sketch and click the "+" number at the top of the layer manager. You can find that by right-clicking on the Page and selecting copy, you can quickly copy all the artboard sizes and common elements, and it's easy to delete them.

A Sketch file should contain the entire Web site design, each page should be assigned to a different page, and these pages, the horizontal direction of the artboard is placed on different pages, the vertical direction of the artboard is placed on these pages of their respective dynamic content rendering.

(Translator Note: Here translation is a bit stiff, simple explanation.) General design, in addition to the main visual of each page, but also need to show these pages in specific circumstances of the rendering style, such as the home page in addition to Timeline, but also to draw a like interface, comments page, hover view user Information page, etc. This article suggests that designers put different functions in different page, in each page, horizontal display of different interface main vision, and portrait of each master vision to draw the visual effects of the different operations. ）

Tip 3: Keep dry--utilize styles and symbols

(Photo credit:m01229)

This is not an advertisement for the latest deodorant. Here Dry (DRY) refers to the "don ' t Repeat yourself" abbreviation, that is, do not let yourself repeat. This is similar to the idea of creating functions, classes, and complex functions that will be reused over the course of programming.

No one wants to get wet "wet"--every thing is done two times "write everything twice".

Shared styles, text styles, and symbols work similarly, but are used in different design scenarios. Shared styles are primarily used for shapes, text styles are primarily for text, and symbols work on layer groups. They are used to name the styles uniformly so that they can be reused in the future. If you are familiar with CSS, this is very similar to the classes.

Shared styles are not related to shapes, such as when we create a rectangle, generate a shared style and name it "button", we can apply this style to other rectangles that don't have styles, making them a new " buttons, and if applied to a circle or polygon, you can make them a button for that style. Shared styles can be applied and removed in the inspector (right), and text styles and symbols are similar.

Symbols are slightly different, mainly because they share information such as shape, size, and location, and act on the entire group of layers, including the other shared styles and text styles.

If you resize a symbol layer group, all of its contents are scaled, and if you modify and add a new layer to the symbol, all the layers in the group that share the symbol will also be modified or added to this new layer. In short, if your design uses a lot of modular content, the symbolic function is very, very practical.

Summary

The book came to the end of shallow, all the operation does not try how to understand deeply, so open the Sketch to see the actual operation. If you are a logo or interface designer, these three tips will help you to become master Sketch with the speed of light. No one wants to leave their comfort zone, but leave the skilled software (Photoshop, AI, etc.) for one or two hours, download Sketch and try it, you'll love it.

Author Daniel Schwarz is a designer and developer who is currently traveling with his wife to experience the best of his travels. Daniel is co-founder, curator and editor of http://airwalk-design.com/, as well as creative director of Airwalk Studios. Yes, he's still a fan of Sketch.

Static sketch Tutorial collection continues to update:

1. "Sketch Design Classroom!" Learn the app design tool from scratch sketch (i) "
2. "Sketch Design Classroom!" Learn the app design tool from scratch sketch (ii) "
3. "Sketch Design Classroom!" Take you to know the Super Good sketch plug-in "
4. Do you want a draft to work overtime? Sketch with artifact Mirror preemptive experience

Static electricity in the Xcode tutorial collection continues to update:

1. "Fix a pixel don't ask!" Xcode Tutorials for Designers (1)
2. "Fix a pixel don't ask!" Xcode Tutorials for Designers (2)
3. "0 code to deal with interactive animation!" Xcode Tutorials for Designers (3)
4. "Fix tab Bar interaction!" Xcode Tutorials for Designers (4)

Original Address: Become a Sketch Guru in 3 easy Steps
Translator:@ choking red Leon

Super Practical! The 3 most common practical tips for master Sketch