Yuri for Mac: The Complete Guide

Source: 爱上MAC  |  Download link: Yuri for Mac

Yuri for Mac is a vector graphic design and prototyping software designed specifically for the macOS system. It integrates interface design, interactive prototyping, animation creation, and other features, offering a clean interface and smooth operating experience for UI/UX designers, product managers, and users who need to quickly draw vector graphics. This article will provide an in-depth analysis of its core interface, complete workflow, and efficient usage tips.

I. Detailed Explanation of the Core Interface and Workspace

After launching Yuri, you will see a modern workspace with a clear structure and distinct modules. It is mainly divided into the following areas:

• Top Menu Bar and Toolbar: Contains global menus such as File, Edit, View, Object, Text, and Prototype. The toolbar below provides quick access to the most commonly used tools, including Select, Artboard, Shape, Pen, Text, and Comment.
• Left Panel (Inspector Panel): This is a dynamic panel that displays the properties of the currently selected object or tool. It mainly includes:
  • Design Inspector: Adjust style properties such as position, size, fill, border, shadow, and opacity.
  • Prototype Inspector: Add interactive links to selected layers or hotspots, and define trigger conditions, animation effects, and navigation targets.
  • Component Inspector: Manage symbols and component states.
• Right Panel (Layers/Artboards List): Clearly displays all artboards in the current document and all layers within each artboard in a tree structure, supporting nested groups. You can quickly select, hide, lock, or reorder layers here.
• Central Canvas Area: The main creative area where all artboards are arranged and displayed. Supports an infinite canvas; you can pan the canvas with a two-finger trackpad gesture or by holding the Spacebar + dragging, and zoom with Command + +/-.
• Bottom Status Bar: Displays the current canvas zoom level, basic information about the selected object (such as coordinates and dimensions), and a quick prototype preview button.

II. Complete Workflow: From Creation to Export

1. Create or Open a Project

Step 1: Launch and Create New After opening Yuri, you will see a welcome window. To create a new project:

• Click the “New Document” button, or go to the menu bar “File” > “New” (shortcut Command + N).
• In the template selector that pops up, you can choose a preset device size (such as iPhone 15, MacBook Pro) or customize the artboard dimensions, then click “Create”.

Step 2: Open an Existing Project Go to the menu bar and choose “File” > “Open” (shortcut Command + O), or click “Open Other Files” in the welcome window and select an existing Yuri project file (usually in .yuri format).

2. Designing Interface Elements

Step 3: Add and Edit Artboards Select the “Artboard Tool” in the toolbar (shortcut A), choose a device size from the preset list in the right panel, or drag directly on the canvas to draw a custom artboard. In the “Layers” panel on the right, double-click the artboard name to rename it.

Step 4: Draw Basic Shapes Select the “Rectangle Tool” (shortcut R), “Ellipse Tool” (O), or “Line Tool” (L) in the toolbar and drag on the canvas to draw. Hold the Shift key while drawing to maintain proportions (such as a perfect circle or square).

Step 5: Use the Pen and Bézier Curves Select the “Pen Tool” (P) to draw custom paths. Click to create corner points, and click and drag to create smooth points with handles. Use the “Direct Selection Tool” (V) to later adjust points and handles along the path.

Step 6: Add and Edit Text Select the “Text Tool” (T), click on the canvas, and enter text. In the “Design Inspector” on the left, you can configure properties such as font, size, weight, color, alignment, and line height in detail.

Step 7: Apply Styles and Effects Select any object, and in the “Design Inspector” on the left:

• Fill: Supports solid colors, linear/radial gradients, and image fills.
• Border: Set border color, thickness, dash style, and endpoint shapes.
• Shadow/Inner Shadow: Add drop shadows and adjust color, blur, offset, and spread.
• Use Command + C / Command + V to copy and paste styles, or use the “Appearance” copy feature to quickly unify styles across multiple objects.

3. Build Interactive Prototypes

Step 8: Create Interactive Links Select the layer you want to make interactive (such as a button), and switch to the “Prototype Inspector” panel on the left. Click “Add Interaction,” and in the settings that appear:

• Trigger: Choose “Click,” “Hover,” “Drag,” etc.
• Action: Choose “Navigate to Artboard,” “Show Overlay,” “Back to Previous Artboard,” etc.
• Target: Select the target artboard or specify a layer for the action.
• Animation: Choose a transition animation (such as Dissolve, Slide In, Push) and set the duration and easing curve.

Step 9: Preview the Prototype Click the “Preview” button in the bottom status bar (shortcut P), or go to the menu bar and select “Prototype” > “Preview Prototype” to experience the prototype flow in interactive mode in a separate window. Press the ESC key to exit the preview.

4. Export the Final Result

Step 10: Export the design draft or prototype

• Export images: Select one or more artboards/layers, then go to the menu bar and choose “File” > “Export” (shortcut Command + E). In the pop-up panel, choose the export format (PNG, JPG, SVG, PDF), resolution multiplier, and specify the export path.
• Share prototype link: Go to the menu bar and choose “Share” > “Publish Prototype”. Yuri will generate an online accessible link that you can send to others for remote preview and comments.

III. Advanced Tips for Common Features

• Efficient alignment and distribution: After selecting multiple objects, alignment and distribution buttons will appear in the top toolbar (align left, horizontal center, distribute spacing evenly, etc.), or use the shortcut Control + Command + A to bring up the alignment panel for precise control.
• Boolean operations: Select two or more overlapping vector shapes, and in the top toolbar or right-click menu, you can use “Union”, “Subtract”, “Intersect”, and “Difference” to create complex graphics.
• Create and use symbols (components): Select a layer or group, right-click and choose “Create Symbol” (shortcut Command + Shift + Y). After that, drag the symbol from the “Components” panel onto the canvas to create instances. Modify the master symbol, and all instances will update synchronously.

IV. Common Issues and Solutions

V. Keyboard Shortcuts Summary Table