Complete Guide to Sketch for Mac

Source: 爱上MAC  |  Software download link: Sketch for Mac

Sketch is a vector graphics editing software designed specifically for Mac, renowned for its minimalist interface and workflow focused on user interface (UI) and user experience (UX) design. It has become one of the core tools for digital product designers to carry out interface design, icon creation, and prototyping.

I. Detailed Explanation of the Software’s Core Interface and Workspace

After launching Sketch, you will see a clearly divided workspace, mainly divided into the following areas:

1. Toolbar: Located at the top of the window, it contains the most commonly used tools, such as “Insert” (vector, artboard, text, etc.), “Zoom”, “Export”, etc. You can add or remove tools via “View” > “Customize Toolbar…”.
2. Inspector: Located on the right side of the window. This is a dynamic panel whose content changes according to the currently selected object (artboard, layer, text, etc.). Here you can adjust all properties of a layer, including size, position, fill, border, shadow, opacity, etc.
3. Layer List: Located on the left side of the window. It displays all artboards and layers in the current canvas (or page) in a tree structure. Here you can rename layers, create groups, adjust layer order, and manage the layer structure by dragging and dropping.
4. Canvas: The blank area in the center is your main workspace. Here you can create and edit artboards, draw shapes, and arrange elements. The canvas supports infinite zoom (⌘ + +/-) and panning (hold the spacebar and drag).
5. Status Bar: Located at the bottom of the window, it displays information such as the current canvas zoom level, and the size and position of the selected layer.

II. Complete Workflow: From Creation to Export

1. Create or Open a Project

Create a New Document: After launching Sketch, a “Welcome” window will automatically appear. Click “New Document,” or simply use the shortcut ⌘ + N.

Open an Existing Document: In the “Welcome” window, click “Open Existing Document,” or use ⌘ + O and select a .sketch file in Finder.

2. Set Up Artboards and Grids

An Artboard is the container for your design, typically corresponding to a screen or a standalone interface.

1. Insert an Artboard: Click the “Insert” button in the toolbar (or press A), and a list of preset device sizes (such as iPhone 14, iPad, Desktop) will appear in the inspector. Select one, then click on the canvas to create it. You can also manually drag out an artboard with a custom size.
2. Adjust the Artboard: Select the artboard, and in the inspector on the right, you can precisely modify its size, name, and background color.
3. Use layout grids: Select the artboard and check “Layout Settings” in the “Appearance” section of the Inspector. You can set the number of columns, width, gutters, etc., to assist with responsive design.

3. Add and Edit Content

Insert shapes and text:

• Click the “Shape” tool in the toolbar (or press V to enter vector drawing mode, R to create a rectangle, O to create an oval, U to create a rounded rectangle), then drag on the canvas to draw.
• Click the “Text” tool in the toolbar (or press T), click on the canvas, and type your text.

Edit properties: Select any layer, and the Inspector on the right will display all its properties. For example, for shapes, you can adjust fills (color, gradient, pattern), borders, shadows, blur effects, and more.

4. Organize and Align

Group layers: Select multiple layers (hold Shift to multi-select or drag to marquee-select), then press ⌘ + G to group them. Double-click a group to enter isolated editing mode.

Align and distribute: Select multiple layers, and alignment and distribution buttons will appear at the top of the Inspector (align left, center horizontally, distribute evenly, etc.).

Use smart guides: When moving or resizing layers, Sketch automatically displays alignment guides with other layers to ensure elements are precisely aligned.

5. Create Symbols and Shared Styles (Advanced Organization)

Create a Symbol: Select a layer or group and click the “Create Symbol” button in the toolbar (or press ⌘ + Shift + S). A symbol is a master copy that can be reused throughout the document; edit any instance and all instances update in sync. The symbol library is located in the “Symbols” page at the top of the layer list.

Create a Shared Style: After setting up the appearance for a layer (such as fill and border), go to the “Appearance” section of the inspector and click the “Create new Shared Style” button (the icon with a “+” sign). You can then quickly apply this style to other layers.

6. Create Simple Interactive Prototypes

1. Enter “Prototype” mode: Click the “Prototype” tab on the right side of the toolbar (or press the P key).
2. Create a link: Select a layer (such as a button) and click the blue circular handle that appears on its right side, then drag it to the target artboard.
3. Set up the interaction: In the inspector, set the trigger (such as “Click”), the animation type (such as “Smart Animate” or “Dissolve”), and the duration.
4. Preview: Click the “Preview” button in the toolbar (or press ⌘ + .) to view the interaction in a new window.

7. Export Your Design

1. Export a single layer/artboard: Select the object you want to export, and in the “Export” area at the bottom of the inspector, click “Add Export Item.” You can choose the export format (PNG, JPG, SVG, PDF, etc.), the size multiplier (1x, 2x, 3x), and specify the export path. Then click “Export Selected.”
2. Batch Export: You can add export entries separately for multiple artboards or layers. You can also select multiple objects and add export settings all at once in the Inspector.
3. Export Entire Page: Select a page in the layer list, right-click and choose “Export…”, and you can export all artboards on that page at once.

III. Advanced Tips for Common Features

• Boolean Operations: Select two overlapping shapes, click the “Combine Shapes” button in the top toolbar, and choose “Union”, “Subtract”, “Intersect”, or “Difference” to create complex graphics.
• Masking: Place a shape (such as a circle) above an image, select both, and choose “Layer” > “Use Selected Shape as Mask” (⌘ + Shift + M). The image will then only be displayed within the shape’s area.
• Scale Tool: Select a layer and press K to bring up the Scale tool. Drag the handles to scale non-proportionally. Check “Adjust Content to Fit” in the Inspector to scale sub-elements within the layer at the same time.
• Text Style Overrides: In a symbol instance, you can override text content independently without breaking the link to the symbol. Double-click the text to edit it directly.
• Smart Selection: Hold the Option key and drag a layer, and Sketch will display the precise distance between that layer and surrounding layers, making it easy to achieve accurate spacing.

IV. Common Issues and Solutions

V. Sketch for Mac Keyboard Shortcuts Summary