Advanced features

· 6 min read

Master advanced features to supercharge your design workflow.

Smart Selection

Intelligent selection tools for faster workflows.

Layer Selection

Select Similar Right-click a layer and choose Select Similar to select all layers with:

  • Same fill color
  • Same stroke properties
  • Same size
  • Same type

Select Children Cmd+Shift+A selects all children of the current frame.

Deep Select Cmd+Double-Click selects nested layers without expanding the hierarchy.

Selection Modes

Multi-Select

  • Hold Shift to add to selection
  • Hold Cmd to toggle selection
  • Click and drag to marquee select

Layer Depth Selection Hold Cmd and click repeatedly to cycle through overlapping layers.

Advanced Typography

Typography controls for precise text design.

Variable Fonts

Use variable fonts for more design control:

Font: Inter Variable
Weight axis: 100-900
Width axis: 75-125

Adjust weight and width independently for custom typography.

Baseline Grid

Align text to a baseline grid:

  1. View → Show Baseline Grid
  2. Set grid size (typically 4px or 8px)
  3. Snap text to grid lines

Advanced Text Features

OpenType Features:

  • Ligatures
  • Tabular numbers
  • Small caps
  • Fractions
  • Alternate glyphs

Enable in Text → OpenType Features

Text Decoration:

  • Underline
  • Strikethrough
  • Custom decoration styles
  • Multiple decorations

Masks and Clipping

Create complex compositions with masks.

Creating Masks

  1. Place the image or content
  2. Draw a shape over it
  3. Select both layers
  4. Right-click → Use as Mask

Or press Cmd+Option+M

Mask Properties

  • Show/Hide Mask - Toggle mask visibility
  • Edit Mask - Modify mask shape
  • Release Mask - Remove masking

Alpha Masks

Use layer opacity and effects as a mask:

  1. Create design
  2. Add layer with opacity gradient
  3. Apply as alpha mask

Great for fade effects and complex compositions.

Blend Modes

Combine layers using blend modes.

Common Blend Modes

Darken:

  • Darken
  • Multiply
  • Color Burn

Lighten:

  • Lighten
  • Screen
  • Color Dodge

Contrast:

  • Overlay
  • Soft Light
  • Hard Light

Difference:

  • Difference
  • Exclusion
  • Subtract

Use Cases

Overlay Blend Mode: Apply texture overlays to designs while preserving underlying colors.

Multiply: Create shadows and depth by darkening overlapping areas.

Screen: Create highlights and light effects.

Vector Networks

Advanced vector editing beyond simple paths.

What are Vector Networks?

Unlike traditional vector paths, vector networks allow:

  • Multiple fill regions in one path
  • Branching paths
  • Complex shapes with fewer anchor points

Creating Vector Networks

  1. Select Pen Tool (P)
  2. Click to create points
  3. Branch off from existing points
  4. Create interconnected paths

Editing Networks

  • Add Points - Click on edge
  • Remove Points - Select and delete
  • Move Points - Drag to reposition
  • Bend Edges - Drag edge to curve

Grid Systems

Create layouts with precision using grids.

Layout Grids

Add grids to frames:

  1. Select frame
  2. Click + in Layout Grid section
  3. Choose grid type

Grid Types

Square Grid:

  • Even squares (e.g., 8px × 8px)
  • Great for spacing and alignment
  • Standard for UI design

Column Grid:

  • Vertical columns
  • Gutter spacing
  • Margins
  • Perfect for responsive layouts

Row Grid:

  • Horizontal rows
  • Baseline alignment
  • Typography systems

Column Grid Settings

Columns: 12
Gutter: 20px
Margin: 40px
Type: Stretch (or Center)

Multiple Grids

Stack multiple grids on one frame:

  • 8px square grid for spacing
  • 12-column grid for layout
  • Baseline grid for typography

Advanced Effects

Create stunning visuals with effects.

Layer Blur

Background Blur: Blur everything behind a layer (frosted glass effect).

Effect: Background Blur
Radius: 20px

Layer Blur: Blur the layer itself.

Advanced Shadows

Inner Shadow: Shadow inside the shape.

Multiple Shadows: Stack shadows for depth:

Shadow 1: Y: 1px, Blur: 2px, Color: rgba(0,0,0,0.2)
Shadow 2: Y: 4px, Blur: 8px, Color: rgba(0,0,0,0.1)
Shadow 3: Y: 8px, Blur: 16px, Color: rgba(0,0,0,0.05)

Image Adjustments

Adjust images without external editors:

  • Exposure - Brighten or darken
  • Contrast - Increase or decrease contrast
  • Saturation - Adjust color intensity
  • Temperature - Warm or cool tones
  • Tint - Add color cast
  • Highlights - Adjust bright areas
  • Shadows - Adjust dark areas

Smart Animate

Create smooth animations between states.

Setting Up Smart Animate

  1. Duplicate artboard
  2. Modify properties (position, size, opacity)
  3. Create prototype connection
  4. Set interaction to Smart Animate

What Smart Animates

  • Position (x, y)
  • Size (width, height)
  • Rotation
  • Opacity
  • Fill color
  • Stroke properties
  • Corner radius
  • Effects

Matching Layers

Layers must have identical names to animate smoothly.

Example: Frame 1: Layer named “Button” Frame 2: Layer named “Button” (moved or resized)

Result: Smooth animation between states.

Easing

Choose easing for animations:

  • Ease In - Slow start, fast end
  • Ease Out - Fast start, slow end
  • Ease In-Out - Slow start and end
  • Linear - Constant speed
  • Custom - Bezier curve control

Advanced Prototyping

Build sophisticated interactive prototypes.

Overflow Behavior

Control scrolling in frames:

Horizontal Scrolling: Set frame to Overflow: Horizontal Scroll

Vertical Scrolling: Set frame to Overflow: Vertical Scroll

Fixed Elements: Pin navigation or headers while content scrolls.

Advanced Interactions

While Hovering: Show tooltip or change state while mouse hovers.

While Pressing: Show pressed state while click is held.

Mouse Enter/Leave: Trigger animations on mouse enter or leave.

Drag: Make elements draggable. Perfect for:

  • Sliders
  • Sortable lists
  • Interactive maps

Variables and Logic

Create dynamic prototypes with variables:

Boolean Variables: Toggle states (e.g., dark mode on/off).

Number Variables: Track values (e.g., cart count).

String Variables: Store text (e.g., username).

Conditional Logic: Show/hide content based on variable values.

Branching and Merging

Collaborate with version control features.

Creating Branches

  1. File → New Branch
  2. Name your branch
  3. Make changes
  4. Request review

Reviewing Changes

Team members can:

  • View changes
  • Add comments
  • Approve or request changes

Merging Branches

Once approved:

  1. File → Merge Branch
  2. Review conflicts (if any)
  3. Complete merge

Conflict Resolution

When conflicts occur:

  • See both versions side-by-side
  • Choose which version to keep
  • Manual merge if needed

Plugins and Integrations

Extend Acme with plugins and integrations.

Installing Plugins

  1. Plugins → Browse Plugins
  2. Search or browse categories
  3. Click Install

Unsplash: Insert free stock photos directly.

Iconify: Browse and insert icons from multiple libraries.

Content Reel: Generate realistic placeholder content.

Stark: Check accessibility and contrast ratios.

Autoflow: Draw user flow arrows automatically.

Developer Tools

Inspect: View code for designs (CSS, iOS, Android).

Handoff: Share specs with developers.

Code Export: Export designs as code (HTML, React, Vue).

Performance Optimization

Keep files fast and responsive.

Reduce File Size

Flatten Layers: Flatten finished sections that won’t change.

Optimize Images:

  • Use appropriate formats (PNG, JPG, WebP)
  • Compress images before importing
  • Remove unused images from assets

Clean Up:

  • Delete hidden layers
  • Remove unused components
  • Clear empty frames

Improve Performance

Use Components: Instances are lighter than duplicated groups.

Avoid Deep Nesting: Flatten unnecessarily nested groups.

Limit Effects: Too many shadows and blurs slow rendering.

Optimize Prototypes: Remove unnecessary connections and overlays.

File Organization

Use Pages: Split large projects into multiple pages.

Naming Conventions: Use consistent, descriptive names for easy searching.

Archive Old Versions: Move old iterations to archive page.

Advanced Tips

Pro tips from design experts.

Keyboard Modifiers

While Resizing:

  • Shift - Maintain aspect ratio
  • Option - Resize from center
  • Cmd - Ignore constraints

While Moving:

  • Shift - Constrain to axis (horizontal or vertical)
  • Option - Duplicate while moving
  • Arrow keys - Move 1px
  • Shift+Arrow - Move 10px

Math in Input Fields

Use math operators in any numeric field:

Width: 100+50 = 150
Height: 200*2 = 400
X: 100/2 = 50
Opacity: 100-25 = 75%

Paste Properties

Copy properties from one layer to another:

  1. Select source layer
  2. Cmd+Option+C to copy properties
  3. Select target layer(s)
  4. Cmd+Option+V to paste properties

Quick Actions

Press Cmd+/ to open Quick Actions:

  • Search for any command
  • No need to remember shortcuts
  • Fuzzy search supported

Color Picker Tricks

Eyedropper: Click color field, then click anywhere in Acme to sample.

Hex Input: Paste hex codes directly: #3B82F6

Opacity in Hex: Use 8-digit hex for opacity: #3B82F680 (50% opacity)

Next Steps