Sketch Design

Sketch Design

Master professional UI/UX design in Sketch, the vector-based design tool for macOS with powerful symbols, libraries, and plugins.

Overview

Sketch is a vector-based design tool exclusively for macOS, focused on UI/UX design. It offers powerful symbols, shared libraries, an extensive plugin ecosystem, and efficient workflows for creating digital products.

Core Concepts

Vector Design

Vector vs. Raster:

• Scalable without quality loss
• Resolution-independent
• Smaller file sizes
• Editable shapes
• Perfect for UI design

Vector Tools:

• Shapes (rectangle, circle, polygon)
• Pen tool for custom paths
• Boolean operations
• Vector editing
• Path manipulation

Artboards

Purpose:

• Represent screens or pages
• Organize designs
• Export individual screens
• Present flows
• Multiple device sizes

Artboard Management:

• Preset sizes (iPhone, iPad, Desktop)
• Custom dimensions
• Arrange in canvas
• Name descriptively
• Group related artboards

Pages

Organization:

• Separate sections of project
• Symbols page
• Design pages
• Archive page
• Exploration page

Best Practices:

• Logical grouping
• Clear naming
• Separate final from explorations
• Archive old versions
• Keep symbols organized

Symbols and Components

Creating Symbols

What Are Symbols:

• Reusable components
• Master symbol and instances
• Update all instances globally
• Override properties
• Nested symbols

Creating Symbols:

1. Design element
2. Select and create symbol (Cmd+Y)
3. Name descriptively
4. Organize in Symbols page
5. Use in designs

Symbol Overrides:

• Text content
• Images
• Nested symbols
• Layer styles
• Maintain structure

Nested Symbols

Purpose:

• Complex components
• Flexible variations
• Efficient updates
• Modular design

Example:

• Button symbol contains icon symbol
• Card symbol contains button symbol
• Override icon in button
• Override button in card

Symbol Organization

Naming Convention:

• Use slashes for hierarchy
• Example: Button/Primary/Large
• Creates folders in symbol menu
• Easy to find and manage
• Consistent structure

Best Practices:

• Atomic design principles
• Clear hierarchy
• Descriptive names
• Logical grouping
• Regular cleanup

Styles

Text Styles

Purpose:

• Consistent typography
• Global updates
• Design system foundation
• Efficient workflow

Creating Text Styles:

1. Format text
2. Create text style
3. Name (e.g., Heading/H1)
4. Apply to other text
5. Update globally

Text Style Properties:

• Font family and weight
• Size and line height
• Letter spacing
• Color
• Alignment

Layer Styles

Purpose:

• Reusable visual styles
• Fills, borders, shadows
• Consistent appearance
• Global updates

Creating Layer Styles:

1. Style layer (fill, border, shadow)
2. Create layer style
3. Name descriptively
4. Apply to other layers
5. Update globally

Layer Style Properties:

• Fills (color, gradient, image)
• Borders
• Shadows (inner and outer)
• Blur
• Opacity

Color Variables

Purpose:

• Centralized color management
• Theme support
• Easy updates
• Consistency

Using Color Variables:

• Define color palette
• Name colors (Primary, Secondary, etc.)
• Use in fills, borders, text
• Update globally
• Support light/dark themes

Layout and Alignment

Smart Layout

Purpose:

• Responsive symbols
• Automatic resizing
• Maintain spacing
• Adapt to content

How It Works:

• Enable on symbol
• Define pinning rules
• Content adapts automatically
• Maintains relationships

Use Cases:

• Buttons that resize with text
• Cards with variable content
• Lists that grow
• Responsive components

Stacks

Purpose:

• Automatic layout
• Spacing control
• Alignment
• Responsive design

Stack Properties:

• Horizontal or vertical
• Spacing between items
• Alignment
• Padding
• Resize behavior

Grids and Guides

Layout Grids:

• Column grids
• Row grids
• Baseline grids
• Custom grids
• Per-artboard settings

Guides:

• Manual guides
• Snap to guides
• Align elements
• Consistent spacing
• Ruler guides

Prototyping

Creating Prototypes

Hotspots:

• Define clickable areas
• Link to artboards
• Set transitions
• Create user flows

Transitions:

• Slide from direction
• Fade
• None (instant)
• Custom duration
• Easing

Smart Animate

Purpose:

• Automatic animations
• Smooth transitions
• Matches layers by name
• Position, size, opacity changes

How to Use:

1. Duplicate artboard
2. Modify elements
3. Keep layer names same
4. Link with Smart Animate
5. Preview animation

Prototyping Tools

Sketch Cloud:

• Upload prototypes
• Share links
• View on any device
• Collect feedback
• Version history

Third-Party Tools:

• InVision
• Marvel
• Principle
• Flinto
• Export and sync

Libraries

Shared Libraries

Purpose:

• Share symbols across files
• Team-wide consistency
• Centralized updates
• Design system distribution

Creating Libraries:

1. Create Sketch file with symbols
2. Save to shared location
3. Add as library in Preferences
4. Team members access library
5. Use symbols in designs

Library Updates:

• Modify symbols in library file
• Save changes
• Users notified of updates
• Accept or ignore updates
• Maintain consistency

Managing Libraries

Organization:

• Separate files for different systems
• UI components library
• Icon library
• Illustration library
• Brand assets library

Best Practices:

• Version control
• Clear documentation
• Regular updates
• Communicate changes
• Test before publishing

Plugins

Essential Plugins

Content:

• Craft: Realistic data and images
• Unsplash: Free stock photos
• Content Generator: Lorem ipsum, names, etc.

Productivity:

• Rename It: Batch renaming
• Automate: Workflow automation
• Symbol Organizer: Clean up symbols

Design:

• Stark: Accessibility checker
• Anima: Export to code
• Sketch Measure: Specifications

Using Plugins

Installation:

• Sketch > Preferences > Plugins
• Download from Sketch website
• Double-click to install
• Access from Plugins menu

Plugin Manager:

• Sketch Runner
• Quick access to plugins
• Search and run commands
• Keyboard shortcuts

Developer Handoff

Design Inspect

Purpose:

• Developers inspect designs
• Get measurements and specs
• Export assets
• Copy CSS
• Free for developers

Features:

• Measurements
• Colors and typography
• Spacing
• Asset export
• Code snippets

Exporting Assets

Export Settings:

• Format (PNG, JPG, SVG, PDF)
• Scale (1x, 2x, 3x)
• Suffix naming
• Batch export
• Slices

Make Exportable:

1. Select layer
2. Make Exportable
3. Choose format and scale
4. Export selected or all
5. Organize exports

Best Practices:

• Use SVG for icons
• Multiple scales for images
• Consistent naming
• Organize in folders
• Document export process

Collaboration

Sketch Cloud

Features:

• Upload designs
• Share links
• Version history
• Comments and feedback
• Prototype testing

Workflow:

1. Upload to Sketch Cloud
2. Share link with team
3. Collaborators view and comment
4. Designer addresses feedback
5. Upload new version

Team Collaboration

Shared Libraries:

• Centralized components
• Team-wide access
• Consistent updates
• Design system enforcement

Version Control:

• Abstract (third-party)
• Git-based versioning
• Branch and merge
• Conflict resolution
• Team workflows

Best Practices

File Organization

Layer Organization:

• Group related elements
• Descriptive names
• Logical hierarchy
• Lock background layers
• Hide unused layers

Artboard Organization:

• Arrange logically
• Group by flow
• Consistent spacing
• Clear naming
• Use pages for sections

Performance

Optimize Files:

• Flatten complex layers
• Remove unused symbols
• Optimize images
• Simplify vectors
• Regular cleanup

Symbol Management:

• Remove unused symbols
• Consolidate duplicates
• Organize hierarchy
• Document usage
• Regular audits

Design Consistency

Use Symbols and Styles:

• Create symbols for repeated elements
• Define text and layer styles
• Use shared libraries
• Update globally
• Maintain design system

Grid and Alignment:

• Use layout grids
• Align to grid
• Consistent spacing
• Snap to pixel
• Test responsiveness

Workflow Tips

Keyboard Shortcuts

Essential Shortcuts:

• Cmd+Y: Create symbol
• Cmd+G: Group
• Cmd+R: Rename
• Cmd+D: Duplicate
• Cmd+L: Lock layer
• Cmd+Shift+L: Unlock all
• Cmd+E: Export
• Cmd+K: Scale

Custom Shortcuts:

• Preferences > Shortcuts
• Assign to frequent actions
• Plugin shortcuts