Design Mode

Master the canvas, shapes, text, images, and all the tools you need to create beautiful UI designs and layouts.

Canvas & Navigation

Navigate with Pan & Zoom

Scroll, pan, zoom in/out, fit to screen, and navigate large designs.

→

Selecting Elements

Click to select, marquee selection, shift-select, and selection shortcuts.

→

Shapes & Drawing

Rectangles & Rounded Corners

Draw rectangles with corner radius and iOS-style corner smoothing.

→

Circles & Ellipses

Create circles, ellipses, and configure fills and strokes.

→

Text & Typography

Creating & Editing Text

Add text, inline editing, and the text formatting toolbar.

→

Images & Media

Adding & Editing Images

Import PNG, JPG, GIF images and adjust sizing and positioning.

→

Organization & Structure

Groups & Frames

Create frames for screens, components, and nested layouts.

→

Responsive Constraints

Pin elements to edges and control how they resize with their parent.

→

Auto Layout

Create responsive, flexible layouts with automatic spacing and sizing.

→

Z-Order & Stacking

Control element layering with bring to front and send to back.

→

Copy & Paste Properties

Transfer visual styles between elements quickly.

→

Alignment & Layout

Alignment & Distribution

Align elements to edges, centers, and distribute evenly.

→

Grids & Guides

Layout grids, column grids, rulers, and custom guides.

→

Combining Grids & Constraints

Create responsive layouts with grids and constraints together.

→

Boolean & Masking

Boolean Operations

Union, subtract, intersect, and exclude shapes to create complex forms.

→

Masking

Clip content to shapes with vector and alpha masks.

→

Vector Networks

Create branching paths with shared nodes for complex illustrations.

→

Advanced Layout

Grid Layout

Two-dimensional layouts with CSS Grid rows and columns.

→

Advanced Auto Layout

Baseline alignment, negative spacing, absolute positioning, and more.

→

Components & Variables

Component Overrides

Customize component instances while maintaining the link to main.

→

Variable Bindings

Connect properties to design tokens for theming and modes.

→

Mockups & Presentation

Device Mockups

Preview designs in iPhone, Android, desktop, and tablet frames.

→

Design Mode Tips