Snuggle up on a low-key, beautiful sofa in a coffee shop while the laptop is still 19% charged and try to send out this week’s update. Behind them, the two girls chatted about moments of friends and likes. Why would I do something like this at a time like this in a place like this, instead of sitting at home with Scabbers doing something or playing GTA like I’ve been doing for the last few years? 18% of the electricity.
Time is like the subway that will never stop, speeding past one station after another, and the people waiting for the bus are silhouetted by the lights. Reside in the memory, pass by, turn a blind eye. Time is just a clever gallop never stop.
Rarely have I spent a weekend afternoon writing about software tools and technology, and that’s nothing new. But recently, some friends around me are finally willing to try Sketch. There is a saying “It’s better late than never”, so I decided to do something helpful for them and change my mind.
Sketch doesn’t have a learning curve, and it’s easy to get started with. As a result, it often leads to beginners forgetting important, high-frequency tips in the beginning, and sticking with more laborious and time-consuming methods. This article is aimed at such situations. Almost no advanced points, only for beginners to cultivate correct habits, but also hope you old drivers forgive me. Let’s move on to the text.
Tips on using objects, layers and artboards
1. Use shortcut keys to adjust the shape
Select the shape, hold down the Command key, and use the up, down, left, and right arrow keys to adjust the shape by 1 pixel. Hold Command + Shift + ARROW keys at the same time to make adjustments in units of 10 pixels.
2. Copy elements
Select an element and press Command + D to copy it. The copied new element defaults to the same location and overrides the original element.
In addition, holding down the Option key while dragging the target element can also achieve replication; Keep the copied new elements still selected, and use the Command + D shortcut key continuously to achieve multiple copies according to the distance of the previous manual drag.
3. Choose wisely
Hold down the Option key and pull the selection box for multiple elements. Eventually, only elements that are completely inside the selection box will be selected, and other elements will be ignored.
4. Group and ungroup
Select multiple elements and press Command + G to combine them into a group. Select a group and press Command + Shift + G to ungroup it.
5. Select an intra-group option
To select a particular element within a group, without looking in the layers list, hold down the Command key and point directly at the element to “penetrate” the group and select the element directly.
6. Restore the artboard’s zoom ratio to 100%
Press Command + 0 to quickly restore the artboard zoom ratio to 100%.
7. Adjust the zoom ratio so that all the artboards appear on the same screen
By pressing Command + 1, you can quickly adjust the artboards to the appropriate zoom ratio so that all artboards are in the view at the same time.
8. Focus the view on the selected element
Command + 2 quickly moves the view focus of the edit area to the selected element or artboard.
9. Place the element first or last in the layer sequence
Holding down the Option key, the “Forward” and “Backward” buttons in the toolbar at the top of Sketch will automatically change To “To Front” and “To Back” To align the selected elements at the top or bottom of the layer sequence.
10. Rename the layer
Select an element and press Command + R to make the entry in the layer list editable. Enter a new layer name.
Edit and export elements
1. Measure the distance between elements
Select one or more elements, hold down the Option key, and point your mouse at the target element where you want to measure the spacing. When moving an element, you can also hold down the Option key at the same time to see how far the element is from a specific element or the edge of the artboard.
2. Set the opacity of the element using the number keys
Select an element and press one or a set of numeric keys to directly set its opacity (alpha), such as “1” for 10%, “5” for 50%, “9” for 90%, “75” for 75%, and so on.
3. Adjust the radius of a corner
You can set different radius for each corner of the element. Select the element and enter four numbers in Radius on the right panel, separated by semicolons (;), representing the Radius values at the upper left corner, upper right corner, lower right corner, and lower left corner, for example, 10; 20; 30; 40 “.
4. Customize shortcut keys
You can set up shortcuts for your usual Sketch features. Go to System Preferences – Keyboard – Shortcuts for macOS, select “Application Shortcuts” from the list on the left, click the “+” button on the right, select “Sketch” from the “Applications” list in the Dialog window, enter the exact name of the feature you want in the Sketch menu bar in the “Menu Title”. Then set up your own shortcut key combination.
5. Use mathematical operators in the property inspector
Sketch performs number calculations in the text box on the right inspector panel. For example, if you want to double the Width of the current rectangle, type “*2” after the number in “Width” to mean “multiply by 2”.
6. Complex graphics
For complex shapes, such as polygons or stars, you can set the number of Sides or Points in the right inspector panel.
7. Spin Copy (Kaleidoscope effect)
Right-click on the Toolbar of Sketch, select Customize Toolbar, and drag the Rotate Copies button into the Toolbar.
Select an element, click the “Rotate Copy” button, enter the number of elements to be copied, and click “OK”.
Sliced 8.
The Slicing Tool (shortcut “S”) can drag out rectangular areas for you to export shapes. But export areas don’t have to cover elements or the canvas as a whole; you can use slicing as a flexible screengrab tool.
9. Export elements, groups, or artboards
Select an element, group, or artboard, click “Make Exportable” at the bottom of the inspector panel on the right, and select export specifications, filename suffixes, and file formats from the expanded menu to start exporting.
10. Export high resolution footage
When we design the interface, we usually set the artboard according to the literal pixel size (1x), for example, we use 375×667 artboard to design the 4.7-inch interface. But you’ll need to export artboards or local images for screens with high pixel density – enter “2x” or higher in the “Size” field of the “Make Exportable” TAB. Alternatively, you can enter the specific size you want to export directly here, such as “750px” and so on.
About the symbols
1. Reuse elements through symbols
How to determine whether to use Symbols? The answer lies in the reusability of the target element. Symbols are like a postmark. Once you make one, you can use it again and again. In Sketch, when you modify the main Symbol, all instance objects from that symbol are automatically updated, which greatly improves the efficiency of iteration.
2. To create a symbol
Design patterns with high reuse rate can be packaged by symbols. For example, we now have a card component that contains a circular picture, a text description, and a button. To complete the layout design, package them into groups and click on the “Create Symbol” button in the toolbar.
3. Customize symbol through overrides
For example, we package a card pattern into symbol. In daily use, we usually need to change the specific attribute values in each instance, such as pictures and words, without modifying the main symbol. Overrides are used to solve this problem.
Insert symbol into the artboard and leave it selected. The “Overrides” option appears in the right inspector panel. The example shown below contains four overwritable text fields. You can make changes here so that each instance object derived from the symbol represents a different content.
4. Rename the layer before creating the symbol
To render overwritable properties in the inspector panel with appropriate property names, such as “name”, “function”, and so on, rather than the specific sample content used when creating the Symbol, you can rename the layer before packaging the symbol so that it corresponds to the property names you want to render.
5. Disable attribute overwriting for specific elements
Not every element in symbol needs to support overwriting, such as properties that never change content. If you do not want this property to appear in the Symbol inspector panel, simply lock the layer in the layer list (lock icon) before creating the Symbol.
6. Symbols nesting
“Design pattern” contains the concept of multi-level, which can also be reflected in the realization of Symbol. For example, we first define a global universal button symbol, and then we need a global universal toolbar symbol, and this toolbar will use the just defined button, then we can insert the button symbol into the toolbar, and package together to create a new symbol, realize nesting. If the button symbol is style updated, the button style in the toolbar symbol is automatically updated.
7. The size of symbols can be variable
You can change the size of the Symbols without being constrained by the size of the Symbols themselves. However, if the size of the main symbol changes in the future, all instances will be updated to the new size style, ignoring the adjustments you made earlier.
8. Separate from symbol
To Detach an instance object from the original Symbol (for example, to design a more complex pattern based on the symbol’s layout), right-click on the object and select “Detach from Symbol”. This will change the instance to a normal layer group.
The translation represents the view of the original author. Welcome to comment, or to the translator’s Weibo for further discussion.
Be For Web
Trydesignlab.com/blog/sketch…